three.js - 将相机位置移动限制到特定 3D 对象的区域

Question

我试图将相机位置移动限制在由 3D 对象/对象子项定义的特定区域。例如，如果我在海洋上有一个走道对象，我只希望我的用户能够在该走道上前后移动相机。类似于 Unity 中的第一人称 Controller 导航网格，但没有 AI 方面。

我会喜欢基于 AFrame 的解决方案，但如果有三个 js 解决方案，我不介意编写自定义组件。

谢谢!

Answer 1

您可以通过以下方式创建一个 THREE.Box3 来获取 3D 对象/对象子对象的边界:

 var box = new THREE.Box3();
 box.setFromObject(yourObject);

在第一人称 Controller 中，您可以检查相机是否越界:

if(camera.position.x > box.max.x){
    camera.position.x = box.max.x;
}

if(camera.position.x < box.min.x){
    camera.position.x = box.max.x;
}

if(camera.position.z > box.max.z){
    camera.position.z = box.max.z;
}

if(camera.position.z < box.min.z){
    camera.position.z = box.max.z;
}

我希望它会有所帮助