如何将边界框附加到相机？

Question

我正在使用 Three.js 和 PointerLockControls.js。我想在我的相机上附加一个准边界框。我想开发一个场景，当我靠近/或与给定物体碰撞时（当相机与其碰撞时），我希望能够检测到它，并以某种方式处理碰撞。我的第一个想法是创建一个新的 Mesh，给它一个透明的 material 并像我使用相机一样移动它，但这实际上不起作用，因为过了一会儿我的 Mesh 将开始移动由于某种原因与我的相机不同的方向（在下面的代码中，这个 cameraBox 是红色的）。这是我创建相机和网格的方式：

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    controls = new THREE.PointerLockControls(camera);

    scene.add(controls.getObject());

    controls.getObject().position.set(20, 30, 20);

    var cameraBox = new THREE.Mesh(
            new THREE.BoxGeometry(20, 30, 20),
            new THREE.MeshBasicMaterial({color: 0xff0000})
    );

    cameraBox.position.set(20, 30, 20);
    scene.add(cameraBox);

这是我的渲染函数：

        function render() {
            var delta = clock.getDelta();
            if (controlsEnabled) {
                velocity.x -= velocity.x * 10.0 * delta;
                velocity.z -= velocity.z * 10.0 * delta;
                velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass

                if (moveForward) velocity.z -= 200.0 * delta;
                if (moveBackward) velocity.z += 200.0 * delta;
                if (moveLeft) velocity.x -= 200.0 * delta;
                if (moveRight) velocity.x += 200.0 * delta;

                controls.getObject().translateX(velocity.x * delta);
                controls.getObject().translateY(velocity.y * delta);
                controls.getObject().translateZ(velocity.z * delta);

                cameraBox.translateX(velocity.x * delta);
                cameraBox.translateY(velocity.y * delta);
                cameraBox.translateZ(velocity.z * delta);

                if (controls.getObject().position.y < 30) {
                    velocity.y = 0;
                    controls.getObject().position.y = 30;
                    canJump = true;
                }

                if (cameraBox.position.y < 30) {
                    velocity.y = 0;
                    cameraBox.position.y = 30;
                    canJump = true;
                }
            }

            requestAnimationFrame(render);
            webGLRenderer.render(scene, camera);
        }

我编写了自己的方法来获取对象（而不是网格）的边界框，因为我发现 computeBoundingBox() 方法相当混乱。它似乎不会考虑 Mesh 的当前位置。我借助网格的几何形状属性.

传递尺寸对象

function getBoundingBox(position, dimensions) {
    return {
        minX: position.x,
        maxX: position.x + dimensions.width,
        minY: position.y,
        maxY: position.y + dimensions.height,
        minZ: position.z,
        maxZ: position.z + dimensions.depth
    };
}

我的另一个想法是使用 controls.getObject().position 坐标，它会给我相机的位置 (?) 但这些坐标又很奇怪，而且看起来不一样好像我得到了网格的位置。提前致谢！

Answer 1

您可以从 object 创建边界框并像这样检测与相机的碰撞：

var boundingBox = new THREE.Box3().fromObject( object );
var collision = boundingBox.containsPoint( camera.position );

如果相机与边界框相交，则碰撞是 true。

如何将边界框附加到相机？

How to attach a bounding box to the camera?

camera

three.js