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

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

前言

使用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

image.png

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

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

GIF.gif

生成立方体全景

使用CubePanorama

image.png

// 传入六个方向的图片,也是来自官方示例
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)
复制代码

GIF2.gif

场景中添加标识点

首先要获取标识点位置

步骤

  1. 指定位置的输出方式
  2. 开启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,可输出鼠标的位置

image.png \

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

image.png

添加标识点

使用Infospot对象

image.png

// 初始化标识点, 因为本质是精灵模型,需要传入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)
复制代码

image.png

场景切换

GIF.gif

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

Snipaste_2022-01-07_17-00-01.png

...
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的基本操作,其实还有很多玩法,也可以使用视频,有兴趣的小伙伴可以查看文档根据自己需求去设置学习

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改