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

【问题标题】：How to attach a bounding box to the camera?如何将边界框附加到相机？
【发布时间】：2016-09-01 08:00:48
【问题描述】：

我正在使用 Three.js 和 PointerLockControls.js。我想在我的相机上附加一个准边界框。我想开发一个场景，当我靠近/或与给定物体发生碰撞时（当相机与它发生碰撞时），我希望能够检测到它，并以某种方式处理碰撞。我的第一个想法是创建一个新的 Mesh，给它一个透明的材质，然后像我使用相机一样移动它，但这并没有真正起作用，因为过了一会儿我的 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 坐标，这会给我相机的位置（？），但这些坐标再次很奇怪，似乎与我得到的不同一个Mesh的位置。提前致谢！

【问题讨论】：

标签： camera three.js

【解决方案1】：

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

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

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

【讨论】：