I'm attempting to achieve flat shading using the Phong material in Three.js. According to the documentation, I need to set flatShading:true in the configuration when creating the material. I've successfully created a cube with these settings and positioned a spot light to focus on the center of the cube (not touching the vertices).
I expected the faces of the cube to look the same at all pixels, but I'm seeing a reflection of light at the center of the face. Changing flatShading from true to false doesn't seem to impact the lighting.
Here is the JSFiddle link demonstrating what I've tried: https://jsfiddle.net/dj03gktb/.
Below is the code snippet:
var camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 4;
scene.add(camera);
scene = new THREE.Scene();
var ambientLight = new THREE.AmbientLight(0xcccccc, 0.2);
scene.add(ambientLight);
var pointLight = new THREE.SpotLight({ color: 0xffffff, angle: Math.PI / 10, intensity: 2 });
scene.add(pointLight);
pointLight.position.z = 1.5;
pointLight.position.y = 0;
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({ color: 0xff0000, flatShading: true, shininess: 100, specular: 0x00ff00 });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
I may have misunderstood flat shading, or there could be a bug in Three.js or an issue with the rendering engine. Any assistance would be greatly appreciated.