第一人称漫游功能
更新时间: 2022-04-12 09:33:29
接下来给这个查看器加上漫游模式
# 原理
漫游功能其实是使用three.js的FirstPersonControls来实现的。
- 点击漫游按钮的时候，停用orbitControls，启用FirstPersonControls来开启漫游功能
- 再次点击漫游按钮的时候，停用FirstPersonControls， 启用orbitControls
# 代码实现
let flag = false
function toggleFirstPerson() {
if(flag) {
orbitControls.enabled = true
firstPersonControls.dispose()
firstPersonControls = null
flag = false
renderer.render(scene,camera)
camera.updateProjectionMatrix();
}else{
orbitControls.enabled = false
addFirstControls()
camera.updateProjectionMatrix();
flag = true
}
}
function addFirstControls(){
firstPersonControls = new FirstPersonControls(camera);
firstPersonControls.enabled = true;
firstPersonControls.lookSpeed = 0.05; //鼠标移动查看的速度
firstPersonControls.movementSpeed = size/50; //相机移动速度
firstPersonControls.noFly = false;
firstPersonControls.constrainVertical = true; //约束垂直
firstPersonControls.verticalMin = 0;
firstPersonControls.verticalMax = 3;
firstPersonControls.lon = 0; //进入初始视角x轴的角度
firstPersonControls.lat = 0; //初始视角进入后y轴的角度
}
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
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
注意，当窗口大小改变时要记得调用 firstPersonControls.handleResize()方法。
然后发现一个问题，就是当鼠标移动到窗口外的时候，窗口里的视角依然在旋转，所以，要在mouseout事件中调用firstPersonControls.lookSpeed = 0
然后在动画循环中调用firstPersonControls.update(clock.getDelta())就完成啦。