Vanilla Three.js Course

0% completed

100%

Chapter 01

Getting started

Meet Adrian, Your Instructor
Get the Most Out of This Course
Access to a Private 24/7 Community
Environment Setup

Chapter 02

Introduction to 3D and Three.js

What is Three.js and Why Use It?
Setting Up Three.js — Your First Step into 3D Web
Basic Three.js Structure
Cameras
OrbitControls

Chapter 03

Transformations

Transformations
Position
Rotation
Scale.

Chapter 04

Meshes and Geometries

An Introduction to Meshes
Geometries
BoxGeometry
SphereGeometry
TorusGeometry
PlaneGeometry
Custom Geometry

Chapter 05

GUI (Graphical User Interface)

GUI (Graphical User Interface)
lil-gui library
Range (Slider)
Color Picker
Checkbox Controls
Folders
Dropdown (Select)

Chapter 06

Lights

Introduction to Lights
AmbientLight
DirectionalLight
PointLight
SpotLight
RectAreaLight
HemisphereLight
Final Lesson of Light

Chapter 07

Materials

Introduction to Materials
MeshBasicMaterial
MeshStandardMaterial
MeshPhysicalMaterial
MeshMatcapMaterial
MeshPhongMaterial
MeshToonMaterial

Chapter 08

Textures

Textures
Color/Albedo Map
Normal Map
Roughness Map/Gloss Map
Displacement Map
Metalness Map
Emissive Map
Specular Map
Mask Map
Environment Map

Chapter 09

Models

Let’s Talk About 3D Models
Add First Model
Change colors
🎛️ Adding GUI Controls for Each Mesh
Playing Model Animations
OBJLoader
Loading .obj + .mtl Models
FBXLoader
Loading FBX Models

Chapter 10

Animations

Basic Animation
GSAP & Three.js
Advanced Camera Animation with GSAP

Course

Final Light Lesson

Welcome to the grand finale of our lighting module! Over the past lessons, we’ve explored the magic of , the precision of , the versatility of , the focus of , the softness of , and the natural beauty of .

Today, we’ll bring it all together, summarizing what we’ve learned and creating a stunning scene that combines all these lights. By the end of this lesson, you’ll have a solid understanding of how to use lighting to bring depth, mood, and realism to your 3D creations.

A Quick Recap of the Lights We’ve Learned

Before we dive into the final exercise, let’s take a moment to revisit the lights we’ve explored:

: Provides even, omnidirectional lighting to the entire scene. Perfect for simulating indirect light or adding a base level of illumination.
: Mimics sunlight or moonlight, casting parallel rays in a specific direction. Great for outdoor scenes.
: Emits light in all directions from a single point, like a light bulb or a glowing orb.
: Creates a cone of light, ideal for focused lighting like flashlights or stage lights.
: Emits light from a rectangular surface, perfect for simulating light panels or windows.
: Blends two colors (sky and ground) to create natural ambient lighting, ideal for outdoor environments.

The Final Exercise: Creating a Cozy Nighttime Scene

For our final exercise, let’s create a cozy nighttime scene that incorporates all the lights we’ve learned. Here’s how we’ll use each light:

Exercise: Experiment with the Now that you’ve built the scene, it’s time to play around with the ! Try the following:

Change the colors of each light to see how they affect the mood of the scene.
Adjust the intensity of the lights to make the scene brighter or darker.
Move the lights around to see how their positions influence the shadows and highlights.
Combine different lights to create unique lighting setups.

Conclusion Congratulations! You’ve not only mastered the art of lighting in but also learned how to control it dynamically using a . This powerful combination will allow you to create stunning, interactive 3D scenes with ease. Whether you’re building a cozy nighttime scene, a futuristic city, or a magical forest, you now have the tools to bring your vision to life.

Keep experimenting, keep creating, and let your imagination shine bright! 🌟

What’s Next?: Now that you’ve mastered lighting, why not explore materials and textures in ? Stay tuned for our next module, where we’ll dive into the art of making your objects look even more realistic!

Happy coding! 🚀

How did you manage to remove the blur property and reach here?

A

I used sheer determination and problem-solving skills.

B

I inspected the code, found the blur effect, and disabled it.

C

I randomly clicked buttons until something worked.

D

I have no idea, but I made it!

Test Your Knowledge, Level Up

Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.

Upgrade your account

0 Comments

"Please login to view comments"

Join the Conversation!

Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.

Upgrade your account

import "./styles.css"; import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper"; import { RectAreaLightUniformsLib } from "three/examples/jsm/lights/RectAreaLightUniformsLib"; // Init RectAreaLightUniformsLib.init(); // Scene const scene = new THREE.Scene(); // Camera const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 ); camera.position.set(6, 4, 10); scene.add(camera); // Renderer const canvas = document.querySelector("canvas.world"); const renderer = new THREE.WebGLRenderer({ canvas }); renderer.setSize(window.innerWidth, window.innerHeight); // Controls const controls = new OrbitControls(camera, renderer.domElement); // === LIGHTS === // 1. Ambient Light (white fill) const ambient = new THREE.AmbientLight(0xffffff, 0.4); scene.add(ambient); // 2. Hemisphere Light (blue sky / pink ground) const hemi = new THREE.HemisphereLight(0x44ccff, 0xff33cc, 0.7); scene.add(hemi); scene.add(new THREE.HemisphereLightHelper(hemi, 1)); // 3. Directional Light (warm orange) const dir = new THREE.DirectionalLight(0xffaa33, 1); dir.position.set(6, 6, 2); scene.add(dir); // 4. Point Light (neon green) const point = new THREE.PointLight(0x00ff99, 2, 15); point.position.set(-5, 3, 1); scene.add(point); // 5. Spot Light (cyan beam) const spot = new THREE.SpotLight(0x00ffff, 2, 20, Math.PI / 5); spot.position.set(0, 6, 5); spot.target.position.set(0, 1, 0); scene.add(spot, spot.target); // 6. RectArea Light (purple wall glow) const rect = new THREE.RectAreaLight(0xaa00ff, 8, 6, 6); rect.position.set(5, 3, -6); rect.rotation.y = Math.PI; scene.add(rect); scene.add(new RectAreaLightHelper(rect)); // === MATERIAL const brightMat = new THREE.MeshStandardMaterial({ roughness: 0.2, metalness: 0.6, color: "#ffffff", emissiveIntensity: 0.1, }); // === OBJECTS // Left: Sphere under PointLight const sphere = new THREE.Mesh(new THREE.SphereGeometry(1.2, 32, 32), brightMat); sphere.position.set(-4, 1.2, 0); // Center: Torus under SpotLight const torus = new THREE.Mesh( new THREE.TorusKnotGeometry(1, 0.4, 100, 16), brightMat ); torus.position.set(0, 1.5, 0); // Right: Cube lit by RectAreaLight const cube = new THREE.Mesh(new THREE.BoxGeometry(1.8, 1.8, 1.8), brightMat); cube.position.set(4, 1.2, 0); // Floor const plane = new THREE.Mesh( new THREE.PlaneGeometry(40, 40), new THREE.MeshStandardMaterial({ color: "#222", roughness: 1 }) ); plane.rotation.x = -Math.PI / 2; plane.position.y = -1; scene.add(sphere, torus, cube, plane); // Animate function animate() { requestAnimationFrame(animate); torus.rotation.y += 0.01; cube.rotation.y += 0.005; controls.update(); renderer.render(scene, camera); } animate();