I attempted to add lighting in Three.js, but after updating the display, the light didn't seem to affect my cylinder. I simply copied and pasted the source code from the Three.js documentation Three.js as instructed, but to no avail.
Below is the code I used:
import * as THREE from "https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10647862757550203e2122263e21">[email protected]</a>";
import { OrbitControls } from "https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js";
//scene and camera set up
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(devicePixelRatio);
document.body.appendChild(renderer.domElement);
//Orbitcontrols
new OrbitControls(camera, renderer.domElement);
camera.position.z = 5;
//setting up cylinder
const geometry = new THREE.CylinderGeometry( 1.4, 2, .6, 10 )
const material = new THREE.MeshBasicMaterial( {color: 0x327322} )
const cylinder = new THREE.Mesh( geometry, material )
scene.add( cylinder )
//Light Implementation
const light = new THREE.DirectionalLight(0xffffff, 0.1);
light.position.set(0, 0, 1)
scene.add(light)
const animate = () => {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate()
You can also view the implementation on Codepen: CODEPEN