предисловие
Способ использования 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
Две строчки кода, генерируется сферическая панорама
// 传入官方案例的全景图片,初始化一个球形的全景
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))
Суммировать
Поскольку Panelens упакован на основе трех, тем, кто использовал три, будет быстрее начать работу.
Текст только знакомит с основными операциями panelens.js. На самом деле, есть много способов играть. Вы также можете использовать видео. Заинтересованные друзья могут просматривать документы, чтобы настроить и учиться в соответствии со своими потребностями.