Currently, I am diving into three.js and encountered a baffling issue. I successfully created a cube that responds to the A and D keys for rotation, but I am struggling to implement proper lighting. Despite referencing several examples and attempting to replicate them, the lighting feature refuses to work. Is there a glaring mistake that I am overlooking?
let scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
let camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 1000);
scene.add(camera);
//lightning
let light = new THREE.DirectionalLight(0xffffff, 1.0);
let lightAmbient = new THREE.AmbientLight(0x404040);
light.position.set(3, 0, 0).normalize();
scene.add(light, lightAmbient);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
document.body.appendChild(renderer.domElement);
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshBasicMaterial({color: 0x539cef});
let cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 3;
let left = false;
let right = false;
cube.rotation.x += 0.5;
function animate() {
document.addEventListener('keydown', event => {
if(event.keyCode === 65) {
left = true;
}
if(event.keyCode === 68) {
right = true;
}
});
document.addEventListener('keyup', event => {
left = right = 0;
})
requestAnimationFrame(animate);
if(left) {
cube.rotation.y -= 0.05;
} else if(right) {
cube.rotation.y += 0.05;
}
renderer.render(scene, camera);
}
animate();body { margin: 0; }<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>