While attempting to display a mesh with Phong shading along with wireframe on an ArrayBufferGeometry where the vertex colors are set to THREE.vertexColors, I encountered an issue where the lighting only affects one random face. However, when I switch to MeshBasicMaterial, the desired behavior is achieved. The Phong material looks good and is properly lit up when the wireframe is set to false:
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.computeFaceNormals();
geometry.computeVertexNormals();
console.log(geometry);
var material = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
wireframe: true,
transparent: false,
vertexColors: THREE.VertexColors, // CHANGED
shininess: 100,
// color: 0xff0000,
shading: THREE.SmoothShading
});
console.log(material);
var terrainMesh = new THREE.Mesh(geometry, material);
terrainMesh.name = 'GRD';
terrainMesh.receiveShadow = true;
terrainMesh.castShadow = true;
console.log(terrainMesh);
return terrainMesh;
Would recomputing the vertex normals after applying the material solve the issue? And is there a specific reason why the lighting seems to work for solid faces but not for wireframes?