2

I am creating a scene & have used a boolean function to cut out holes in my wall. However the lighting reveals that the resultant shapes have messed up faces. I want the surface to look like one solid piece, rather than fragmented and displaying lighting backwards. Does anyone know what could be going wrong with my geometry?

The code that booleans objects is as follows: 

//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;
};

I have two lights in the scene:

        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);

Unexpected Mesh Behaviour

EDIT: Using WestLangley's suggestion, I was able to partially fix the wall rendering. And by using material.wireframe=true; I can see that after the boolean operation my wall faces are not merged. Is there a way to merge them?

unmerged faces

Lozza
  • 75
  • 5
  • Use `THREE.VerteNormalsHelper` so your can see the vertex normals. I expect `computeVertexNormals()` is a method that you should not be using since it smooths the shared normals. Maybe call `computeFaceNormals()` and use `THREE.FlatShading` instead. Make sure your library versions are compatible. – WestLangley Aug 20 '14 at 20:04
  • @WestLangley Removing computeVertexNormals() definitely helped fix the appearance of the walls. Thanks! But for some reason the faces still look segmented in line with the boolean. Does ThreeCSG not merge the faces into one after a boolean operation? – Lozza Aug 21 '14 at 14:20
  • Maybe you will have insight if you set `material.wireframe = TRUE`. – WestLangley Aug 21 '14 at 19:41
  • @WestLangley, I can see that the faces are not merged, but do not know how to fix it. – Lozza Aug 27 '14 at 19:59
  • Are you using `MeshLambertMaterial`? If so, try `MeshPhongMaterial`. – WestLangley Aug 27 '14 at 21:46
  • I posted an answer for you. – WestLangley Aug 27 '14 at 23:28

1 Answers1

4

Your problems are due to two issues.

First, you should be using FlatShading.

Second, as explained in this stackoverflow post, MeshLambert material only calculates the lighting at each vertex, and interpolates the color across each face. MeshPhongMaterial calculates the color at each texel.

You need to use MeshPhongMaterial to avoid the lighting artifacts you are seeing.

three.js r.68

Community
  • 1
  • 1
WestLangley
  • 102,557
  • 10
  • 276
  • 276