Three.js Raycaster.intersectObjects 只检测前表面的交点答案

【问题标题】：Three.js Raycaster.intersectObjects only detects intersection on front surfaceThree.js Raycaster.intersectObjects 只检测前表面的交点
【发布时间】：2025-12-21 09:30:10
【问题描述】：

我正在创建一个程序，该程序在鼠标单击时用地面上的块填充世界（坐标基于我计算的鼠标单击坐标）。创建新块时，它不应与事先已创建的块相交。我使用 THREE.Raycaster 完成了这项检查。基本上我从块的中心向其顶点的所有方向投射光线。

var ln = preview.geometry.vertices.length;

//for each vertices we throw a ray
for(var i = 0; i < ln; i++){
    var pr_vertex = preview.geometry.vertices[i].clone();
    var gl_vertex = pr_vertex.applyMatrix4(preview.matrix);
    var dr_vector = gl_vertex.sub(preview.position);

    var ray = new THREE.Raycaster(preview.position, dr_vector.clone().normalize());
    var intersects = ray.intersectObjects(objmanager.getAllObject(), true);

    //if there is intersection
    if(intersects.length > 0 && intersects[0].distance < dr_vector.length()){
        //hide preview material
        preview.material.opacity = 0;
        //exit checking
        break;
    }
}

预览是对象的名称。该代码已经完美运行。问题是，Raycaster.intersectObjects 仅在光线与测试对象的正面相交时才起作用。我在运行代码时对其进行了测试，如果光线从被测对象外部开始，它们相交就好了。但是当光线从测试块的内部开始时，它没有捕捉到与测试块表面的交点。我认为发生这种情况是因为 intersectObjects 仅适用于测试对象的前表面。这是真的吗？

直觉上，我尝试使用 THREE.DoubleSide（制作双面对象）来解决这个问题。但它产生了一个错误，因为着色器未能初始化。

Could not initialise shader
VALIDATE_STATUS: false, gl error [0] three.js:25254
    buildProgram three.js:25254
    initMaterial three.js:23760
    setProgram three.js:23830
    renderBuffer three.js:22371
    renderObjects three.js:23061
    render three.js:22935
    animLoop

我正在使用 THREE.MeshLambertMaterial。当我使用 MeshBasicMaterial 时，Raycaster.intersectObjects 根本不起作用。

所以我现在遇到了障碍。有什么想法可以解决这个问题吗？要么这样，要么我必须手动测试每个对象的个体面的碰撞（我担心这会严重影响性能）。

提前谢谢你。

================

edit：忘了说，我用的是最新的three.js版本，应该是r63左右

【问题讨论】：

THREE.DoubleSided 应该这样做，Raycaster.js 会检查有背面的面。
正如我所说，当我使用 material.side = THREE.DoubleSide 时，它在着色器中产生了错误。我不知道为什么会产生这个错误，因为从逻辑上讲它不应该。我正在为此使用 MeshLambertMaterial，也许是那个？
此时，我建议您创建显示问题的最小可能示例，并在 ThreeJS 存储库中提交错误报告。

标签： javascript three.js collision-detection raytracing

【解决方案1】：

如果你设置：

object.material.side = THREE.DoubleSided

你应该在两个表面上都被击中。

【讨论】：

我确实尝试过这种方法，但是在我的对象上这样做会导致着色器出错。顺便说一下，我正在使用 MeshLambertMaterial。我不知道为什么会导致错误。

【解决方案2】：

如果是双面的，您将有两个交叉点：

object.material.side = THREE.DoubleSide

【讨论】：