最近项目中要求vr功能，可以进行图片的全景查看，在此，用到了vue里的一个实现全景预览的插件：photo-sphere-viewer.js。这些插件，在uniapp中不能直接用。不过uniapp有个组件web-view，可以引入内部或外部的HTML。

首先写一个html，在html中引入三个js文件

<script src="./js/three.min.js"></script>
<script src="./js/browser.min.js"></script>
<script src="./js/photo-sphere-viewer.min.js"></script>

在<body>中放一个div

<!-- 全景图 -->
<div id="viewer" style="width: 100vw; height: 100vh;"></div>

在js中new一个PhotoSphereViewer对象

<script>
	var panos = [
			{
				url: 'http://5664213.cn/attachs/photo/201511/20151120_244587E7732518CCD3866D6ECB79F9B0.png',
				desc: '全景一'
			}
		]
	
	const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
	
	const viewer = new PhotoSphereViewer.Viewer({
		container: 'viewer', // 包含全景图或元素的标识符 也可container: document.querySelector('.viewer')
		panorama: panos[0].url, // 全景图片路径
		caption: panos[0].desc, // 导航栏中显示的文本
		loadingImg: baseUrl + 'loader.gif',
		// description:'测试VR', // 当用户单击“i”按钮时，侧面板中显示的文本。允许使用 HTML
		autorotateIdle: true, // 用户处于空闲状态，则重新启动自动旋转
		autorotateDelay: 1000, // 延迟1秒之后自动旋转
	});
</script>

接下来就是在uniapp项目中引入，阅读web-view文档

 本地资源文件是不能随意乱放的，有固定的存放路径

<template>
	<view class="contain">
		<web-view src="../../../hybrid/html/index.html"></web-view>
    </view>
</template>

示例图片：

# vr # uni-app # javascript
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

一文带你搞懂GaussDB数据库性能调优

avatar 华为开发者空间
cover

GaussDB全密态数据库等值查询

avatar 华为开发者空间
cover

COC云运维中心新特性解读，让智能运维更高效

avatar 华为开发者空间