碰撞检测three.js/相机碰撞

Posted 2023-02-27

【中文标题】碰撞检测three.js/相机碰撞

【英文标题】：Collision Detection three.js/Camera collision

【发布时间】：2019-04-30 22:10:11

【问题描述】：

我在 three.js 中测试了一些编码技术，我对这些技术有基本的了解，但在尝试推进一个项目时遇到了问题。我试图弄清楚如何检测第一人称的碰撞（按键移动相机）。

我有一个播放器变量定义为：

var player =  height:1.8, speed:0.1, turnSpeed:Math.PI*0.01 ;

在按键事件中的移动为：

if(keyboard[87]) // W key
    camera.position.x -= Math.sin(camera.rotation.y) * player.speed;
    camera.position.z -= -Math.cos(camera.rotation.y) * player.speed;

if(keyboard[83]) // S key
    camera.position.x += Math.sin(camera.rotation.y) * player.speed;
    camera.position.z += -Math.cos(camera.rotation.y) * player.speed;

if(keyboard[65]) // A key
    // Redirect motion by 90 degrees
    camera.position.x += Math.sin(camera.rotation.y + Math.PI/2) * player.speed;
    camera.position.z += -Math.cos(camera.rotation.y + Math.PI/2) * player.speed;

if(keyboard[68]) // D key
    camera.position.x += Math.sin(camera.rotation.y - Math.PI/2) * player.speed;
    camera.position.z += -Math.cos(camera.rotation.y - Math.PI/2) * player.speed;

然后我就这样加载了一个板条箱（加载了纹理、凹凸和法线贴图）：

crate = new THREE.Mesh(
    new THREE.BoxGeometry(3,3,3),
    new THREE.MeshPhongMaterial(
       color: 0xffffff,
       map: crateTexture,
       bumpMap: crateBumpMap,
       normalMap: crateNormalMap,           
        )
);

程序中的一切正常，我只想知道如何检测相机与墙壁的碰撞。我不想去设置参数，比如：

if(keyboard[68] && !(camera.position.x < crate.position.x + 1.5) && !(camera.position.x > crate.position.x - 1.5) && !(camera.position.z < crate.position.z -1.5) && !(camera.position.z > crate.position.z -1.5))  // D key
    camera.position.x += Math.sin(camera.rotation.y - Math.PI/2) * player.speed;
    camera.position.z += -Math.cos(camera.rotation.y - Math.PI/2) * player.speed;

能否给我一种方法来检测诸如此板条箱（boxGeometry）之类的对象甚至其他形状之间的碰撞？

编辑：我相信我找到了一种手动检测与相机和 boxGeometry 碰撞的方法，但到目前为止只在一个面上和一个方向移动。下面的代码在向前移动时检测到加载时的右面。

if(camera.position.z > crate.position.z - 1.650 && camera.position.z < 
crate.position.z + 1.650 && camera.position.x > crate.position.x - 2 && 
camera.position.x < crate.position.x - 1.9 && camera.rotation.y > - Math.PI && camera.rotation.y < 0 ) canMoveForward = false;
if(!(camera.position.z > crate.position.z - 1.650 && camera.position.z < 
crate.position.z + 1.650 && camera.position.x > crate.position.x - 2 && 
camera.position.x < crate.position.x - 1.9 && camera.rotation.y > - Math.PI && camera.rotation.y < 0 )) canMoveForward = true;  

然后我在按键事件中实现了一个检测系统，它允许“墙壁滑动”机制，如果我以一个角度向前走，它会阻止我进入板条箱，但会根据我的旋转移动我。这是代码：

if(keyboard[87] ) // W key
   if(camera.position.z > crate.position.z - 1.650 && camera.position.z < crate.position.z + 1.650 && camera.position.x > crate.position.x - 2 && camera.position.x < crate.position.x - 1.9 && camera.rotation.y > - Math.PI && camera.rotation.y < 0 ) 
    camera.position.z -= -Math.cos(camera.rotation.y) * player.speed;
     else if(canMoveForward == true) 
    camera.position.x -= Math.sin(camera.rotation.y) * player.speed;
    camera.position.z -= -Math.cos(camera.rotation.y) * player.speed;

我认为经过测试，我可能会找到一些更简单/更通用的方法来实现检测此冲突的 if 语句。但随之而来的是我走哪条路的问题，这也成了一个问题。我已经制定了计划，并且必须在我输入碰撞的单侧检查多少旋转。

如果有更容易/更简单的方法来检测这种类型的碰撞，我将很高兴提供意见。这是我到目前为止的project，以便您可以了解更多情况。

【参考方案1】：

How to detect collision in three.js?

如果您转到链接，问题已关闭，但它们仍然涵盖 3d 碰撞的一般概念。

【讨论】：

我看过这个页面。但是，它没有回答我的问题，因为答案会使用光线检测两个形状之间的碰撞，但我要求找到相机和物体之间的碰撞。

除此之外，我还没有看到有关 three.js 有碰撞器的任何信息。您是否尝试过寻找另一个与 three.js 一起使用的库

chandlerprall.github.com/Physijs 试试看这里是否更接近您的需要