Three.js: incorrect light on Three.Geometry + LambertMaterial meshes

Question

I have improved my previous formulation of this question (previous question version) with a jsfiddle that uses the most recent build of Three.JS and deomonstrates my Three.Geometry lighting issue. I couldn't get the dependencies to work in Stack Snippets, but the JSFiddle works:

JSFIDDLE SHOWING INCORRECT LIGHTING

JSFiddle

Notice the incorreectly lit faces on the left (Three.Geometry objects), versus the correctly lit adjoining faces on the right (Three.CubeGeometry).

My light code:

hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 50, 0 );
app.scene.add( hemiLight );

dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.color.setHSL( 0.1, 1, 0.95 );
dirLight.position.set( -1, 1.75, 1 );
dirLight.position.multiplyScalar( 50 );
app.scene.add( dirLight );

You can see the JSFiddle source for the THREE.CubeGeometry (mesh 1, 2, 3) and THREE.Geometry (mesh 4, 5, 6) objects. Mesh 5 and 6 have lambert faces individually instantiated and assigned by array, whereas geo 4 has a single lambert material passed in to the mesh constructor.

Is it possible that the materials in the material-array storage class THREE.MeshFaceMaterial need to be in a particular order for a cube to light properly? I've assigned them in the order: 2 bottom faces, 8 side faces, 2 top faces.

Why would the light be tiling on the green cubes if the Three.Geometry object appears to be correctly added to the scene? Thanks.

I wanted to see the normals of your objects so I updated the fiddle jsfiddle.net/rab3pwpp with calls to Face|Vertex NormalsHelper(). As you can see the normals are not consistent so the lighting will not be. — gaitat

erichlof erichlof · Accepted Answer · 2015-01-29T16:49:11

as answered here: https://gamedev.stackexchange.com/questions/93031/three-js-lighting-not-calculating-correctly-on-three-geometry-objects/93099#93099

The triangle winding needs to be counter-clockwise as seen from the outside of the object.

To confirm, change all instances of THREE.DoubleSide to THREE.FrontSide and run. THREE.FrontSide should look perfect because it is the three.js default - but in your example it does not. Hope this helped! :)

Three.js: incorrect light on Three.Geometry + LambertMaterial meshes

2 Answers