javascript - Three.js Projector 和 Ray 对象

Question

我一直在尝试使用 Projector 和 Ray 类来做一些碰撞检测演示。我开始只是尝试使用鼠标来选择对象或拖动它们。我查看了使用这些对象的示例，但它们似乎都没有解释 Projector 和 Ray 的某些方法究竟在做什么的评论。我有几个问题，希望有人能轻松回答。

到底发生了什么，Projector.projectVector() 和 Projector.unprojectVector() 有什么区别？ 我注意到在所有同时使用投影仪和光线对象的示例中，似乎在创建光线之前调用了 unproject 方法。 你什么时候会使用 projectVector？

我在此 中使用以下代码demo 用鼠标拖动时旋转立方体。 有人可以简单地解释一下当我用 mouse3D 和相机取消投影然后创建 Ray.js 时到底发生了什么。射线是否依赖于对 unprojectVector() 的调用

/** Event fired when the mouse button is pressed down */
function onDocumentMouseDown(event) {
    event.preventDefault();
    mouseDown = true;
    mouse3D.x = mouse2D.x = mouseDown2D.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse3D.y = mouse2D.y = mouseDown2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
    mouse3D.z = 0.5;

    /** Project from camera through the mouse and create a ray */
    projector.unprojectVector(mouse3D, camera);
    var ray = new THREE.Ray(camera.position, mouse3D.subSelf(camera.position).normalize());
    var intersects = ray.intersectObject(crateMesh); // store intersecting objects

    if (intersects.length > 0) {
        SELECTED = intersects[0].object;
        var intersects = ray.intersectObject(plane);
    }

}

/** This event handler is only fired after the mouse down event and
    before the mouse up event and only when the mouse moves */
function onDocumentMouseMove(event) {
    event.preventDefault();

    mouse3D.x = mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse3D.y = mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
    mouse3D.z = 0.5;
    projector.unprojectVector(mouse3D, camera);

    var ray = new THREE.Ray(camera.position, mouse3D.subSelf(camera.position).normalize());

    if (SELECTED) {
        var intersects = ray.intersectObject(plane);
        dragVector.sub(mouse2D, mouseDown2D);
        return;
    }

    var intersects = ray.intersectObject(crateMesh);

    if (intersects.length > 0) {
        if (INTERSECTED != intersects[0].object) {
            INTERSECTED = intersects[0].object;
        }
    }
    else {
        INTERSECTED = null;
    }
}

/** Removes event listeners when the mouse button is let go */
function onDocumentMouseUp(event) {
    event.preventDefault();

    /** Update mouse position */
    mouse3D.x = mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse3D.y = mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
    mouse3D.z = 0.5;

    if (INTERSECTED) {
        SELECTED = null;
    }

    mouseDown = false;
    dragVector.set(0, 0);
}

/** Removes event listeners if the mouse runs off the renderer */
function onDocumentMouseOut(event) {
    event.preventDefault();

    if (INTERSECTED) {
        plane.position.copy(INTERSECTED.position);
        SELECTED = null;
    }
    mouseDown = false;
    dragVector.set(0, 0);
}

Answer 1

基本上，您需要从 3D 世界空间和 2D 屏幕空间进行投影。

渲染器使用 projectVector用于将 3D 点转换为 2D 屏幕。 unprojectVector基本上是为了做相反的事情，将 2D 点取消投影到 3D 世界中。对于这两种方法，您都可以通过您正在查看场景的相机。

因此，在此代码中，您将在 2D 空间中创建归一化向量。老实说，我对 z = 0.5 一直不太确定。逻辑。

mouse3D.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse3D.y = -(event.clientY / window.innerHeight) * 2 + 1;
mouse3D.z = 0.5;

然后，此代码使用相机投影矩阵将其转换为我们的 3D 世界空间。

projector.unprojectVector(mouse3D, camera);

将 mouse3D 点转换为 3D 空间后，我们现在可以使用它来获取方向，然后使用相机位置从中转换光线。

var ray = new THREE.Ray(camera.position, mouse3D.subSelf(camera.position).normalize());
var intersects = ray.intersectObject(plane);