使用 Panolens.js 构建全景图片或全景视频

Panolens.js 是一个基于 WebGL 的全景查看器，构建在 Three.js 之上。尽管现在贡献者已不再对其维护，但是 Panolens.js 的出色表现和易用性仍是一个不错的全景查看器选择。

首先需要引入 Three.js（官方推荐使用 105 版本） 和 Panolens.js。Panolens.js 似乎没有 CDN，需要自己下载导入：

https://raw.githubusercontent.com/pchen66/panolens.js/master/build/panolens.min.js

<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/three.js/105/three.min.js" type="application/javascript"></script>
<script src="panolens.min.js"></script>

定义一下页面的大小

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}

使用 <script> 标签构建全景图。这里使用官方示例的图片 field.jpg，可以从下面的地址下载。

https://pchen66.github.io/Panolens/examples/asset/textures/equirectangular/field.jpg

<script>
const panorama = new PANOLENS.ImagePanorama( 'field.jpg' );
const viewer = new PANOLENS.Viewer();
viewer.add( panorama );
</script>

如果是视频类型的全景，可以使用下面的代码：

panorama = new PANOLENS.VideoPanorama( 'asset/textures/video/ClashofClans.mp4', { autoplay: true } );

想了解更多，可以看看官方的例子。

• Panolens.js Demo