ThreeCSG 布尔运算的意外网格结果答案

【问题标题】：Unexpected mesh results from ThreeCSG boolean operationThreeCSG 布尔运算的意外网格结果
【发布时间】：2014-10-14 07:40:16
【问题描述】：

我正在创建一个场景并使用布尔函数在墙上挖洞。然而，照明显示最终的形状已经弄乱了面孔。我希望表面看起来像一个实心件，而不是碎片化并向后显示照明。有谁知道我的几何图形出了什么问题？

布尔对象的代码如下：

//boolean subtract two shapes, convert meshes to bsps, subtract, then convert back to mesh 

var booleanSubtract = function (Mesh1, Mesh2, material) {

    //Mesh1 conversion
    var mesh1BSP = new ThreeBSP( Mesh1 );

    //Mesh2 conversion
    var mesh2BSP = new ThreeBSP( Mesh2 );

    var subtract_bsp = mesh1BSP.subtract( mesh2BSP );
    var result = subtract_bsp.toMesh( material );
    result.geometry.computeVertexNormals();
    return result;
};

场景中有两盏灯：

        var light = new THREE.DirectionalLight( 0xffffff, 0.75 );
        light.position.set( 0, 0, 1 );
        scene.add( light );

        //create a point light
        var pointLight = new THREE.PointLight(0xFFFFFF);

        // set its position
        pointLight.position.x = 10;
        pointLight.position.y = 50;
        pointLight.position.z = 130;

        // add to the scene
        scene.add(pointLight);

编辑：使用 WestLangley 的建议，我能够部分修复墙壁渲染。通过使用 material.wireframe=true;我可以看到在布尔运算之后我的墙壁没有合并。有没有办法合并它们？

【问题讨论】：

使用THREE.VerteNormalsHelper，这样您就可以看到顶点法线。我希望computeVertexNormals() 是一种您不应该使用的方法，因为它可以平滑共享法线。也许打电话给computeFaceNormals() 并改用THREE.FlatShading。确保您的库版本兼容。
@WestLangley 移除 computeVertexNormals() 确实有助于修复墙壁的外观。谢谢！但由于某种原因，这些面孔仍然看起来与布尔值一致。 ThreeCSG 不会在布尔运算后将人脸合并为一张吗？
如果你设置material.wireframe = TRUE，也许你会有洞察力。
@WestLangley，我可以看到人脸没有合并，但不知道如何解决。
你在使用MeshLambertMaterial吗？如果是这样，请尝试MeshPhongMaterial。

标签： three.js threecsg

【解决方案1】：

您的问题是由两个问题引起的。

首先，您应该使用FlatShading。

其次，如this stackoverflow post 中所述，MeshLambert 材质仅计算每个顶点的光照，并在每个面上插入颜色。 MeshPhongMaterial 计算每个纹素的颜色。

您需要使用MeshPhongMaterial 来避免您看到的光照伪影。

three.js r.68

【讨论】：