three.js shows no respect for my normals

Question

I'm making a custom three.js geometry for non-orthogonal cubes. It is loosely based on the existing Box-geometry in three.js but has the absolute position of its vertices fed directly to it.

I have a problem with three.js seemingly not respecting the normals that I pass to the faces of the geometry. When I console.log the normals just prior to assigning them to the faces, they look just fine:

normal: Object { x=0, y=0, z=-1, more...}
normal: Object { x=0, y=0, z=1, more...}

These normals would be just fit for a straight cube's upper and lower sides. However, as can be seen from this screenshot (were I have tilted the camera appropriately), the first normal seems to have been applied to both surfaces:

a cube of 200x200x200 centred on origo and orthogonal to all axes

This is two sides of a cube of 200x200x200 centred on origo and orthogonal to all axes. The white line denotes the z-axis.

Here follows my faulty geometry. The 'quadruplets' array contains six arrays with each four Vector3 instances. Each inner array delineates a side of the cube.

THREE.Box3Geometry = function (quadruplets, normals, debug) {

THREE.Geometry.call(this);

var constructee = this;  // constructee = the instance currently being constructed by the Box3Geometry constructor

buildPlane(quadruplets[0], normals[0], 0, debug); // px
buildPlane(quadruplets[1], normals[1], 1, debug); // nx
//    buildPlane(quadruplets[2], normals[2], 2); // py
//    buildPlane(quadruplets[3], normals[3], 3); // ny
//    buildPlane(quadruplets[4], normals[4], 4); // pz
//    buildPlane(quadruplets[5], normals[5], 5); // nz

function buildPlane(quadruplet, normal, materialIndex, debug) {


    var offset = constructee.vertices.length;

    // populate the vertex array:
    constructee.vertices.push(quadruplet[0]);
    constructee.vertices.push(quadruplet[1]);
    constructee.vertices.push(quadruplet[2]);
    constructee.vertices.push(quadruplet[3]);

    // construct faceVertexUvs:
    var uva = new THREE.Vector2(0, 1);  //(u:0, v:1), uvb: (u:0, v:0) uvc: (u:1, v:0), uvd: (u:1, v:1)
    var uvb = new THREE.Vector2(0, 0);
    var uvc = new THREE.Vector2(1, 0);
    var uvd = new THREE.Vector2(1, 1);

    // construct faces:
    var a = 0;  // vertex: u:50, v:50
    var b = 2;  // vertex: u:50, v:-50
    var c = 3;  // vertex: u:-50, v:-50
    var d = 1;  // vertex: u:-50, v:50

    if (debug) { console.log("normal: ", normal); }

    // make a face:
    var face1 = new THREE.Face3(a + offset, b + offset, d + offset);
    face1.normal.copy(normal);
    face1.vertexNormals.push(normal.clone(), normal.clone(), normal.clone());
    face1.materialIndex = materialIndex;
    constructee.faces.push(face1);
    constructee.faceVertexUvs[ 0 ].push([ uva, uvb, uvd ]);

    // make another face:
    var face2 = new THREE.Face3(b + offset, c + offset, d + offset);
    face2.normal.copy(normal);
    face2.vertexNormals.push(normal.clone(), normal.clone(), normal.clone());
    face2.materialIndex = materialIndex;
    constructee.faces.push(face2);
    constructee.faceVertexUvs[ 0 ].push([ uvb.clone(), uvc, uvd.clone() ]);

};

this.mergeVertices();
};

THREE.Box3Geometry.prototype = Object.create(THREE.Geometry.prototype);

This is my test instantiation of the geometry:

var quadruplets = [
    [new THREE.Vector3(-100, -100, -100), new THREE.Vector3(100, -100, -100), new THREE.Vector3(-100, 100, -100), new THREE.Vector3(100, 100, -100)],
    [new THREE.Vector3(-100, -100,  100), new THREE.Vector3(100, -100,  100), new THREE.Vector3(-100, 100,  100), new THREE.Vector3(100, 100,  100)],
    [new THREE.Vector3(-100, -100, -100), new THREE.Vector3(100, -100, -100), new THREE.Vector3(-100, -100, 100), new THREE.Vector3(100, -100, 100)],
    [new THREE.Vector3(-100,  100, -100), new THREE.Vector3(100,  100, -100), new THREE.Vector3(-100,  100, 100), new THREE.Vector3(100,  100, 100)],
    [new THREE.Vector3(-100, -100, -100), new THREE.Vector3(-100, 100, -100), new THREE.Vector3(-100, -100, 100), new THREE.Vector3(-100, 100, 100)],
    [new THREE.Vector3( 100, -100, -100), new THREE.Vector3( 100, 100, -100), new THREE.Vector3( 100, -100, 100), new THREE.Vector3( 100, 100, 100)]
];

var normals = [
    new THREE.Vector3( 0,  0, -1),
    new THREE.Vector3( 0,  0,  1),
    new THREE.Vector3( 0, -1,  0),
    new THREE.Vector3( 0,  1,  0),
    new THREE.Vector3(-1,  0,  0),
    new THREE.Vector3( 1,  0,  0)
];

var myBox3Geometry = new THREE.Box3Geometry(
    quadruplets,
    normals,
    true
);

And this is the Box geometry from which I was "inspired".

I am having trouble decoding your screenshot. You say it illustrates the wrong normals, but all I can see both polygons facing the same way due to polygon winding (i.e. "the order of the vertex indices"). Normals only affect lighting. — Paul-Jan

gaitat gaitat · Accepted Answer · 2014-08-26T18:36:12

Three.js has some very nice Helper functions:

THREE.BoxHelper( mesh )
THREE.FaceNormalsHelper( mesh )
THREE.VertexNormalsHelper( mesh )
THREE.WireframeHelper( mesh )

just to name a few.

It looks like you are setting vertex normals so why don't you use the THREE.VertexNormalsHelper(mesh) to verify three.js is using what you expect.

Note: Your variable normal is not visible in your code.

three.js shows no respect for my normals

2 Answers