Learn Three.js for 3D Computer Graphics/

...

Adding Lights and Meshes

Add lights, meshes, and geometrical shapes with materials and shadow configurations to a Three.js scene.

We'll cover the following...

Adding lights
Adding the meshes
- Example: Add lights and meshes

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: ...

Introduction to the Course

Part 1: Getting Up and Running

Creating the First 3D Scene with Three.js

The Basic Components That Make Up a Three.js Application

Working with Light Sources in Three.js

Part 2: Working with the Three.js Core Components

Working with Three.js Materials

Learning to Work with Geometries

Exploring Advanced Geometries

Points and Sprites

Part 3: Particle Clouds, Loading, and Animating Models

Creating and Loading Advanced Meshes and Geometries

Animation and Moving the Camera

Loading and Working with Textures

Part 4: Post-Processing, Physics, and Sounds

Render Post-Processing

Adding Physics and Sounds to Our Scene

Working with Blender and Three.js

Three.js: Together with React, TypeScript, and WebXR

Conclusion

Appendix

Adding Lights and Meshes

Adding lights