三种微信小程序VR实现方法

2021-03-15 分类：前端之旅 / 后端之路阅读(797) 评论(0)

经常有人会问我小程序里怎么实现vr, 今天简单介绍两种小程序里vr的实现方法; 给大家提供参考;

第一种: 使用 photo-sphere-viewer 插件

文档地址: https://photo-sphere-viewer.js.org/

很简单的加载一张全景图:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>芊云全景VR预览全景</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
  <script src="//cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #viewer {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
<div id="viewer"></div>
<script>
  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: '全景图地址'
  });
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>芊云全景VR预览全景</title>

<style>

* {

padding: 0;

margin: 0;

}

#viewer {

width: 100vw;

height: 100vh;

}

</style>

</head>

<body>

var viewer = new PhotoSphereViewer.Viewer({

container: document.querySelector('#viewer'),

panorama: '全景图地址'

});

</script>

</body>

</html>

具体的详细用法可以查看开发文档, 这个插件可以实现很多功能, 包括热点, 视角, 等等, 感兴趣可以试试

2. 第二种, 使用 krpano

文档地址: https://krpano.com/home/

krpano 是收费软件, 需要授权才可以使用, 并且比较复杂一些, 感兴趣的可以去搜索相关资料

初始化一张全景, 需要先使用krpano引擎把全景做切片,

embedpano({
          swf: "tour.swf",
          xml: "playxml.html"
          html5: "only+webgl+preserveDrawingBuffer",
          mobilescale: 0.5,
          passQueryParameters: true
 });