javascript - 为什么使用 ThreeBSP.js 创建的网格不能与 MeshNormalMaterial 以外的任何 Material 正常工作？

Question

仅当我在倒数第二行中使用 MeshNormalMaterial 时，骰子才看起来像骰子 (result = resultBSP.toMesh(materialNormal);)。对于任何其他 Material ，它看起来就像一个没有减法(点)的立方体。我正在使用的 ThreeBSP (ThreeCSG 升级)库位于 here 。使用MeshNormalMaterial没有问题。它只是几乎没有任何修改它的选项。 (它不像其他 Material 那样需要参数)。

这是我用来创建骰子的函数:

function buildDice(){

    var materialNormal = new THREE.MeshNormalMaterial();
    var diceCube = new THREE.Mesh( new THREE.BoxGeometry(100,100,100), materialNormal);
    
    diceCube.position.x = 0;
    diceCube.position.y = 50;
    diceCube.position.z = 0;
    
    diceCube.geometry.computeFaceNormals();
    diceCube.geometry.computeVertexNormals();
    
    var cubeBSP = new ThreeBSP(diceCube);
    
    var sphereGeometry = new THREE.SphereGeometry(75,16,8);
    var sphereMesh = new THREE.Mesh(sphereGeometry, materialNormal);
    
    sphereMesh.scale.x = 0.17;
    sphereMesh.scale.y = 0.17;
    sphereMesh.scale.z = 0.17;
    
    //coords of the spheres 
    var xPositions = [....]; // coordinates for xPositions of sphereMesh
    var yPositions = [....];
    var zPositions = [....];
    
            
    var diceDots    = new THREE.Geometry();
    
    for(var i = 0; i < xPositions.length; i++){
        
        sphereMesh.position.x   = xPositions[i];
        sphereMesh.position.y   = yPositions[i];
        sphereMesh.position.z   = zPositions[i];
        THREE.GeometryUtils.merge(diceDots, sphereMesh);
    }
    
    var dotsMesh = new THREE.Mesh(diceDots, materialNormal);
    dotsMesh.geometry.computeFaceNormals();
    dotsMesh.geometry.computeVertexNormals();
    
    var dotsBSP = new ThreeBSP(dotsMesh);
    var resultBSP = cubeBSP.subtract(dotsBSP);
    
    result = resultBSP.toMesh(materialNormal);
    scene.add(result);

}

Answer 1

它确实可以与其他 Material 配合使用，例如与 THREE.MeshPhongMaterial 配合使用。使用您的 buildDice() 函数的 jsfiddle 可能会帮助您: http://jsfiddle.net/L0rdzbej/152/

您必须在合并几何体之前更新网格矩阵，并且最好不要为此使用已弃用的函数。

Three.js r73