threejs 如何控制模型的移动范围，即对摄像头的控制

2023-10-05 07:37| 来源: 网络整理| 查看: 265

这个方法只是给一个简单的思路，具体的实现需要根据实际情况实现，总的来说就是需要存在一个基准点。

1.规划处模型的限制区间范围，这个可以通过方法计算也可以写死

let box = { min: { x: -10943.613394093247, z: -14327.533236958321, }, max: { z: 4282.623649449902, x: 7992.161614671444, }, };

当然也可以使用第二种方法,通过计算两点的距离的方法来实现，当操作距离后执行controls.reset()方法

distanceBetween(pointstart, positionEnd) { let pos1 = new THREE.Vector3(pointstart.x, pointstart.y, pointstart.z); let pos2 = new THREE.Vector3(positionEnd.x, positionEnd.y, positionEnd.z); return pos1.distanceTo(pos2); }, 在controls.addEventListener(“change”, (event) => {}）中调用对应计算的方法限制移动的方法

camera 摄像头 controls 控制器 controls.reset(); 重置控制器方法 controls.saveState(); 保存控制器当前属性

if (camera.position.x > box.max.x) { controls.reset(); } else if (camera.position.x < box.min.x) { controls.reset(); } else if (camera.position.z > box.max.z) { controls.reset(); } else if (camera.position.z < box.min.z) { controls.reset(); } else { controls.saveState(); }

方法2

if (distance > 16000) { //超过这个范围,摄像头的值将会被写死 console.log("超出边界"); controls.reset(); } else { // 当没有超过这个值时,将对应的坐标信息保存 controls.saveState(); }

【本文地址】

公司简介

联系我们