Three.js：第一人称相机碰撞检测

Question

我在 Three.js 中有一个非常简单的场景，用户可以在其中移动相机以获得第一人称视角。

相机不得在物体内部移动，例如一个立方体。我试图用Raycaster.intersectObjects 来防止这种情况发生。但是，当我走进立方体时，只能识别出立方体的一个面。看起来立方体的其他面对射线来说是不“可见的”，但它们当然被完美地渲染了。

相关代码如下：

cubeGeometry = new THREE.CubeGeometry(size, size, size, 20, 20, 20);
cubeMesh = new THREE.Mesh(cubeGeometry, new THREE.MeshBasicMaterial({color: 0x00FF00, wireframe: true, side: THREE.DoubleSide}));
geometries.push(cubeMesh); 

...

var oldCamera;
function moveAround(){
    oldCamera = camera.clone();
    if(movement=="forward") camera.translateZ(-30);
    if(movement=="left") camera.translateX(-30);
    if(movement=="backward") camera.translateZ(30);
    if(movement=="right") camera.translateX(30);
    ray = new THREE.Raycaster(camera.position, oldCamera.position.normalize());
    ray.far = 100;
    if(ray.intersectObjects(geometries).length>0){
        // only the case with one of the faces of a cube
        ...

[编辑 2020.05.09]

我在 GitHub 上上传了一个工作示例：

https://github.com/TovAqulic/threejs_collision_issue/blob/master/index.html

您可以使用箭头键移动（相机即您自己），并且可以使用鼠标转动。

所有几何对象，即周围的墙壁和中间的块，都是geometries 数组的一部分，该数组使用raycaster.intersectObjects(geometries) 进行检查。

在几乎所有情况下，移动到墙上时，如预期的那样，正面、向后或侧面移动都会阻止移动。

但是，您可以在某些位置移动穿过墙壁，尤其是右侧的墙壁。例如，加载页面后直接移动到右侧墙。

我不明白我做错了什么。

Answer 1

ray = new THREE.Raycaster(camera.position, oldCamera.position.normalize());

此代码并不理想。一次创建THREE.Raycaster 的实例，然后重用它。也将它命名为raycaster（因为它不是THREE.Ray 的实例）。另外，在调用intersectObjects()之前，使用这段代码来准备光线投射器：

raycaster.ray.origin.copy( camera.position );
camera.getWorldDirection( raycaster.ray.direction );