Adding Lights and Meshes
Explore how to add ambient and directional lights in Three.js to illuminate your scene and enable shadows. Learn to create and configure 3D meshes like cubes, torus knots, and planes using various geometries and materials. Understand how to position and render these objects with shadows to build your first interactive 3D scene.
We'll cover the following...
Adding lights
If we don’t have lights in the scene, most materials will be rendered in black. So, to see our meshes (and get shadows), we’re going to add some lights to the scene. In this case, we’re going to add two lights:
THREE.AmbientLight: This is just a simple light that affects everything with the same intensity and color.THREE.DirectionalLight: This is a light source whose rays are cast in parallel to one another. This is pretty much how we experience the light of the Sun.
The following code fragment shows how to do this: ...