three.js - Draw custom mesh with MeshLambertMaterial and point light

Question

I'm currently learning webGL and three.js. So, for test reasons, I tried to create a plane geometry and two cube geometries and a point light:

function initLights () {
    var c = context;

    var pointLight = new THREE.PointLight( 0xffffff, 1, 100 );
    pointLight.position.set( 10, 10, 10 );

    c.scene.add(pointLight);
}

function initObjects () {
    var c = context;

    /**
     * Defining the materials
     */

    var lambertRedMaterial = new THREE.MeshLambertMaterial({
            color  : 0xff0000
            , side : THREE.DoubleSide
        });

    var lambertWhiteMaterial = new THREE.MeshLambertMaterial({
            color     : 0xffffff
            , side    : THREE.DoubleSide
        });

    /**
     * Defining the floor
     */
    var floorGeometry = new THREE.Geometry();

    floorGeometry.vertices.push(new THREE.Vector3(-5.0, 0.0, -5.0));
    floorGeometry.vertices.push(new THREE.Vector3( 5.0, 0.0, -5.0));
    floorGeometry.vertices.push(new THREE.Vector3( 5.0, 0.0,  5.0));
    floorGeometry.vertices.push(new THREE.Vector3(-5.0, 0.0,  5.0));
    floorGeometry.faces.push(new THREE.Face3(2, 1, 0));
    floorGeometry.faces.push(new THREE.Face3(3, 2, 0));


    var floorMesh = new THREE.Mesh(floorGeometry, lambertWhiteMaterial);
    floorMesh.position.set(0.0, 0.0, 0.0);

    /**
     * Defining a cube
     */
    var cubeGeometry1 = new THREE.CubeGeometry(2.0,0.25,1);
    var cube1 = new THREE.Mesh( cubeGeometry1, lambertRedMaterial );
    cube1.position.set(0.0, 1.0, 0.0);

    var cubeGeometry2 = new THREE.CubeGeometry(2.0,0.25,1);
    var cube2 = new THREE.Mesh( cubeGeometry2, lambertRedMaterial );
    cube2.position.set(0.0, 1.35, 0.0);

    c.scene.add(floorMesh);
    c.scene.add(cube1);
    c.scene.add(cube2);
}

The context with a camera and the scene was defined before. The weird thing is, that the cubes are displayed correctly, but the plane is not displayed.

When I set the y-position of the plane to 1.0, then I can see, that it intersects with the lower cube. Also, it's displayed when I use MeshBasicMaterial, but I want to use MeshLambertMaterial for lighting reasons.

Has anybody an idea, if I forgot something, or what the problem could be?

Many thanks in advance.

Answer 1

MeshLambertMaterial requires face normals or vertex normals for the lighting calculation.

Face normals are used for "flat shading" and vertex normals are used for "smooth shading".

You can compute face normals by calling geometry.computeFaceNormals();. For vertex normals, you can call geometry.computeVertexNormals();.

For visual cues, use the three.js helpers, such as this one:

scene.add( new THREE.FaceNormalsHelper( mesh ) );

Also, if you are just learning, the advice in this answer may be helpful to you.

three.js r.65