I have a project where I am displaying 3 cubes and toggling between MeshLambertMaterial and MeshPhongMaterial when pressing the A key. However, I'm facing an issue where the object turns black when applying the phong shading, even though I've calculated the normals of the vertices beforehand.
While the code is quite extensive, the crucial part to focus on is the function changeMaterial, as this is where the phong shading is implemented
Key Function:
function changeMaterial(change) {
for (i = 0; i < figures.length; i++)
{
if (change)
{
figures[i].material = new THREE.MeshLambertMaterial( {color: 0xff0000} );
figures[i].material.shading = THREE.FlatShading;
figures[i].material.shading = THREE.SmoothShading;
figures[i].geometry.normalsNeedUpdate = true;
figures[i].geometry.computeVertexNormals();
}
else
{
figures[i].material = new THREE.MeshPhongMaterial( {color: 0xff0000} );
figures[i].geometry.computeVertexNormals();
figures[i].geometry.normalsNeedUpdate = true;
console.log(figures[i].geometry);
figures[i].material.specular = 0x111111;
figures[i].material.shininess = 10;
figures[i].material.shading = THREE.FlatShading;
figures[i].material.shading = THREE.SmoothShading;
figures[i].material.needsUpdate = true;
figures[i].geometry.normalsNeedUpdate = true;
console.log(figures[i].geometry);
}
}
}
Program:
/*
Your program logic goes here
...
*/