前言

使用threejs来生成全景的方式，网上已经有很多大佬介绍过了，大致分为两种，一种是使用球体+1张全景图，另一种使用立方体+6张环境贴图
今天使用更简的方式，使用现成的库来实现，Panolens已经帮我们把three中初始化场景、相机、控制器、鼠标事件等操作都封装好了，我们只需要关注图片即可

基本使用

引入

github地址 github.com/pchen66/pan…
文档地址 pchen66.github.io/panolens.js…

npm install panolens
import * as PANOLENS from 'panolens'

初始化

three中的那些初始化相机、渲染器、鼠标事件、控制器等操作，只需要new PANOLENS.Viewer即可完成

// 初始化场景
this.viewer_main = new PANOLENS.Viewer({
  container: document.getElementById(this.domId), // 传入父容器dom
  output: 'console'  // 为了后面打印位置信息
})

其余的参数可参考文档 pchen66.github.io/panolens.js…

生成球体全景

使用ImagePanorama

两行代码，一个球体全景就生成了

// 传入官方案例的全景图片，初始化一个球形的全景
this.panorama_main_image = new PANOLENS.ImagePanorama('static/img/panoramic/lake5000x2500.jpg')
// 把全景添加到场景中
this.viewer_main.add(this.panorama_main_image)

生成立方体全景

使用CubePanorama

// 传入六个方向的图片，也是来自官方示例
const cube = new PANOLENS.CubePanorama([
  'static/img/sand/px.png',  // 左面
  'static/img/sand/nx.png',  // 右面
  'static/img/sand/py.png',  // 上面
  'static/img/sand/ny.png',  // 底面
  'static/img/sand/pz.png',  // 正面   
  'static/img/sand/nz.png'   // 背面  因为相机是在立方体内部望向z轴的负方向，所以实际先看到这个面
])
// 添加到场景中
this.viewer_main.add(cube)

场景中添加标识点

首先要获取标识点位置

步骤

指定位置的输出方式
开启outputPosition方法

this.viewer_main = new PANOLENS.Viewer({
  .....
  output: 'console' // 1.指定输出方式，采用控制台打印
})
.....
this.viewer_main.add(cube)
// 2.开启方法，因为此方法本质是射线捕捉物体，所以要放到this.viewer_main.add()之后，不然会因为没物体而报错
this.viewer_main.outputPosition()

开启outputPosition方法后，按住ctrl，可输出鼠标的位置

按住ctrl把鼠标放到想要添加标识的位置，控制台会打印位置，记录下位置

添加标识点

使用Infospot对象

// 初始化标识点, 因为本质是精灵模型，需要传入scale缩放来控制大小
// 图标采用自带的图标PANOLENS.DataImage.Info
const infospot1 = new PANOLENS.Infospot(350, PANOLENS.DataImage.Info)
// 根据前面获取的位置来设置标识点的位置
infospot1.position.set(2851.10, -1651.58, -5000.00)
// 给标识点添加文字
infospot1.addHoverText('石头')
// 信息点添加交互
infospot1.addEventListener( 'click', function(){
 ...
 })
// 标识点添加入场景
cube.add(infospot1)

场景切换

使用场景的link方法，来添加切换按钮

...
this.viewer_main.add(this.panorama_main_image)
...
this.viewer_main.add(cube)
...
// 把之前生成的两个场景进行链接
// 用法 场景1.link(场景2，按钮位置，图片缩放，图片地址)
// 图片使用默认的，生成两个位置相同的按钮，用于来回切换
this.panorama_main_image.link(cube, new THREE.Vector3(-3260.34, -700.96, -3017.16))
cube.link(this.panorama_main_image, new THREE.Vector3(-3260.34, -700.96, -3017.16))

总结

因为panolens是基于three封装的，所以对于使用过three的小伙伴上手会快些
文本只介绍了panolens.js的基本操作，其实还有很多玩法，也可以使用视频，有兴趣的小伙伴可以查看文档根据自己需求去设置学习

用封装好的threejs库快速生成全景-Panolens.js

前言