加载全景图
更新时间: 2021-09-10 18:21:36
公司突然有加载全景图并且在全景图上加标签的需求，于是我先写了个demo验证一下可行性
# 原理
全景图我使用了一张贴图，贴在球体上，贴图如下：
球体需要注意的是要将z轴翻转
代码如下：
const material = new THREE.MeshBasicMaterial()
const textureLoader = new THREE.TextureLoader();
textureLoader.load( '/daodao-knowledge/textures/bgtest.jpg', function ( texture ) {
texture.encoding = THREE.LinearEncoding;
material.map = texture
skyBox = new THREE.Mesh(new THREE.SphereBufferGeometry(100,100,100),material)
skyBox.geometry.scale( 1, 1, -1 );
skyBox.name = 'skyBox'
scene.add(skyBox)
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
然后将摄像头放在原点，使用OrbitControl控制旋转镜头,达到查看全景图的目的。
接下来是添加标签以及拾取标签，我使用射线拾取的方式，当点击到skyBox的时候，就往上添加一个新的标签，当点击到标签的时候，就触发标签的事件：
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
container.addEventListener("click",function(event) {
console.log(points)
mouse.x = ( event.offsetX / container.clientWidth ) * 2 - 1
mouse.y = - ( event.offsetY / container.clientHeight) * 2 + 1
raycaster.setFromCamera( mouse, camera );
const intersects = raycaster.intersectObjects([skyBox,...points.children])
if(intersects[0].object.name == 'skyBox') {
const map = new THREE.TextureLoader().load( "/daodao-knowledge/img/home.jpg" );
const material = new THREE.SpriteMaterial( { map: map } );
const sprite = new THREE.Sprite( material );
const point = intersects[0].point
sprite.position.set(point.x * 0.9, point.y * 0.9, point.z * 0.9)
sprite.scale.set(10,10,1)
sprite.name = 'sprite'
points.add(sprite)
}else if(intersects[0].object.name == 'sprite') {
alert("选中了标签")
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 实践
先看下实现效果
完整代码：
import * as THREE from 'three/build/three.module.js';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
let container, scene, renderer, sphere, camera, control, skyBox, points
function init() {
container = document.getElementById('three1')
camera = new THREE.PerspectiveCamera(90, container.clientWidth / container.clientHeight, 0.1, 10000)
camera.position.set(1,1,0)
scene = new THREE.Scene()
scene.background = new THREE.Color(0xf0f0f0)
renderer = new THREE.WebGLRenderer()
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(container.clientWidth, container.clientHeight)
renderer.outputEncoding = THREE.LinearEncoding
container.appendChild(renderer.domElement)
control = new OrbitControls(camera, renderer.domElement)
control.minDistance = 0
control.maxDistance = 2000
points = new THREE.Group()
scene.add(points)
const material = new THREE.MeshBasicMaterial()
const textureLoader = new THREE.TextureLoader();
textureLoader.load( '/daodao-knowledge/textures/bgtest.jpg', function ( texture ) {
texture.encoding = THREE.LinearEncoding;
material.map = texture
skyBox = new THREE.Mesh(new THREE.SphereBufferGeometry(100,100,100),material)
skyBox.geometry.scale( 1, 1, -1 );
skyBox.name = 'skyBox'
scene.add(skyBox)
});
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
container.addEventListener("click",function(event) {
console.log(points)
mouse.x = ( event.offsetX / container.clientWidth ) * 2 - 1
mouse.y = - ( event.offsetY / container.clientHeight) * 2 + 1
raycaster.setFromCamera( mouse, camera );
const intersects = raycaster.intersectObjects([skyBox,...points.children])
if(intersects[0].object.name == 'skyBox') {
const map = new THREE.TextureLoader().load( "/daodao-knowledge/img/home.jpg" );
const material = new THREE.SpriteMaterial( { map: map } );
const sprite = new THREE.Sprite( material );
const point = intersects[0].point
sprite.position.set(point.x * 0.9, point.y * 0.9, point.z * 0.9)
sprite.scale.set(10,10,1)
sprite.name = 'sprite'
points.add(sprite)
}else if(intersects[0].object.name == 'sprite') {
alert("选中了标签")
}
})
}
function animate() {
requestAnimationFrame(animate)
renderer.render(scene,camera)
}
init()
animate()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78