С быстрой генерацией панорамной трехмерной пакетной библиотеки Panolens.js.

three.js
С быстрой генерацией панорамной трехмерной пакетной библиотеки Panolens.js.

предисловие

Способ использования threejs для создания панорамы был представлен многими крупными парнями в Интернете.Он примерно делится на два типа: один - использовать сферу + 1 панораму, другой - использовать куб + 6 карт окружения.
Сегодня мы используем более простой способ реализации с помощью готовых библиотек.Паноленс помог нам инкапсулировать сцену инициализации, камеру, контроллер, события мыши и другие операции в три.Нам нужно только обратить внимание на картинку.

основное использование

представлять

гитхаб-адресGitHub.com/foil66/диск…
Документы АдресFoil 66.GitHub.IO/Боюсь нолинза, это просто…

npm install panolens
import * as PANOLENS from 'panolens'

инициализация

Те, что в тройке инициализируют камеру, рендерер, события мыши, контроллер и прочие операции, просто нужноnew PANOLENS.Viewerготов завершить

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

Остальные параметры можно посмотреть в документации Foil 66.GitHub.IO/Боюсь нолинза, это просто…

Создать сферическую панораму

использовать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))

Суммировать

Поскольку Panelens упакован на основе трех, тем, кто использовал три, будет быстрее начать работу.
Текст только знакомит с основными операциями panelens.js. На самом деле, есть много способов играть. Вы также можете использовать видео. Заинтересованные друзья могут просматривать документы, чтобы настроить и учиться в соответствии со своими потребностями.