Why mesh created with ThreeBSP.js is not working properly with any material other than MeshNormalMaterial?

Question

The dice looks like a dice only if I use MeshNormalMaterial in the second last line (result = resultBSP.toMesh(materialNormal);). With any other material it just looks like a cube with no subtraction (dots) on it. The ThreeBSP (ThreeCSG upgrade) library I am using is located here. There is no problem with using the MeshNormalMaterial. It just doesn't have almost any options to modify it. (It doesn't take parameters like other materials).

Here is my function that I am using to create a dice:

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

It does work with other Materials, for example with a THREE.MeshPhongMaterial. This jsfiddle using your buildDice()-function may help you: http://jsfiddle.net/L0rdzbej/152/

You have to update the mesh´s matrix before merging the geometry, and best not to use deprecated functions for this.

Three.js r73