I am currently using the three.js library to create an animated cylinder:
let renderer, camera, scene, light, cylinder;
initialize();
animate();
function initialize() {
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight);
scene = new THREE.Scene();
light = new THREE.SpotLight();
scene.add(light);
cylinder = new THREE.Mesh();
cylinder.material = new THREE.MeshToonMaterial({ color: "#007700" });
cylinder.geometry = new THREE.CylinderGeometry(3, 3, 12, 25)
scene.add(cylinder);
}
function animate() {
cylinder.position.z -= 1;
cylinder.rotation.x -= THREE.Math.degToRad(2);
light.position.x = cylinder.position.x;
light.position.y = cylinder.position.y + 100;
light.position.z = cylinder.position.z;
camera.position.x = cylinder.position.x;
camera.position.y = cylinder.position.y + 10;
camera.position.z = cylinder.position.z + 30;
camera.lookAt(cylinder.position);
requestAnimationFrame(animate);
renderer.render(scene, camera);
}body{
width: calc(100vw - 16px);
height: 100vh;
margin: 0;
padding: 0;
border: 0;
background: #aabbaa;
}
canvas {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js">
</script>Even though I want the light to be positioned above the cylinder in each frame, it quickly moves into darkness. What could be causing this issue?