Question

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

    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);
        }

我编写了自己的方法来获取对象的（而不是Mesh的）边界框，因为我发现computeBoundingBox（）方法相当混乱。似乎不会考虑Mesh的当前位置。我借助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（）。位置坐标，它会给我相机的位置（？），但这些坐标又是奇怪的，似乎与我得到的相同Mesh的位置。提前谢谢！

Answer 1

您可以从object创建一个边界框并检测与相机的碰撞，如下所示：

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

如果摄像机与边界框相交，

碰撞为true。

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

1 个答案: