After enhancing my initial version of this inquiry (previously asked question) with a JSFiddle showcasing the latest build of Three.JS and illustrating the lighting issue on Three.Geometry, I encountered difficulties with dependencies in Stack Snippets. However, the JSFiddle is accessible:
VIEW INCORRECT LIGHTING ON JSFIDDLE
Observe the inaccurately lit surfaces on the left (Three.Geometry objects), as opposed to the correctly lit adjacent surfaces on the right (Three.CubeGeometry).
This is the snippet of my lighting 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 review the source code on the JSFiddle for both 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 into the mesh constructor.
Could the arrangement of materials in the storage class THREE.MeshFaceMaterial affect proper lighting for a cube? I have placed them in the following order: 2 bottom faces, 8 side faces, 2 top faces.
Why does the light seem distorted on the green cubes even though the Three.Geometry object seems to be added correctly to the scene? Appreciate any insights provided.