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

SpotLight

Hey there, welcome back, in this lesson, we will explore another light from the three js library. Imagine you’re crafting a scene in a 3D universe, and you want to highlight a specific object or area with a focused beam of light, like a spotlight on a stage. That’s where the comes into play. It’s a powerful tool in that allows you to create directional, cone-shaped lighting effects. Let’s break it down step by step, with a beginner-friendly approach.

What is a SpotLight?

A in is

a light source that emits light in a cone shape, similar to a flashlight or a stage spotlight.

It has a specific direction, position, and angle, which makes it perfect for highlighting specific parts of your 3D scene. Think of it as a light that shines on a particular spot (hence the name) and fades out as it moves away from the center. Official Docs

Spotlights: Focused Light Beams It represents a cone-shaped light source, emitting light in a specific direction with a defined spread angle.

It's the same as a flashlight or a car headlight or a theater spotlight.

Before creating a , let’s set up the scene with some geometries.

Adding the

Now comes the exciting part—adding the ! Let’s create a spotlight that shines on the objects.

Parameters Explained

: Hexadecimal color of the light (default is ).
: Strength of the light (default is ).
: Maximum distance from the spotlight source where objects are affected by the light (default: ).
: Spread angle of the light cone in radians (default: ). Lower values create narrower beams.
: Percent of the spotlight cone attenuates due to penumbra. It takes values between zero and 1. The default is .
: Light decay rate (default is ).

As usual, we will change the properties with GUI

Visualizing the with a Helper

To see the spotlight's position and direction, we will use Official Docs

// helper
const spotLightHelper = new THREE.SpotLightHelper(spotlight);
scene.add(spotLightHelper);

// Animation loop
function animate() {
 requestAnimationFrame(animate);

 // change with lil-gui
 ...

 // helpers update
 spotLightHelper.update(); <= Here's the code

 controls.update(); // Update the controls

 // Render the scene
 renderer.render(scene, camera);
}

// Start the animation loop
animate();

Now, we can see visually how is working in our scene due to the help of

At the end, let's rotate the whole scene with OrbitControls autoRotate

controls.autoRotate = true;
controls.autoRotateSpeed = 0.5;

Conclusion: Lighting Up Your 3D World with

As we wrap up this journey into the world of Three.js , it’s amazing to see how a single light source can transform a simple 3D scene into something dynamic and visually captivating. Whether you’re building a game, a simulation, or an interactive art piece, understanding how to use effectively can elevate your project to the next level.

Think of as your storytelling tool in the 3D universe. It’s not just about illuminating objects—it’s about creating mood, directing attention, and adding depth to your scenes. From the soft glow of a flashlight in a dark room to the dramatic beam of a stage spotlight, the possibilities are endless.

As you continue your adventures, don’t be afraid to experiment. Play with colors, adjust the penumbra for softer edges, or animate the light to bring your scene to life. Remember, every great 3D scene is a blend of creativity and technical skill, and is one of the many tools at your disposal.

So, go ahead—shine a light on your ideas, and let your creativity illuminate the digital world. Happy coding, and may your scenes always be well-lit! ✨

P.S. If you enjoyed this lesson, share your creations with the world! Tag your projects with #ThreeJS #JSM to inspire others in the community. Let’s light up the web together! 🌐💡

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

// Animation loop function animate() { requestAnimationFrame(animate); // change with lil-gui ... // helpers update spotLightHelper.update(); <= Here's the code controls.update(); // Update the controls // Render the scene renderer.render(scene, camera); } // Start the animation loop animate();

import "./styles.css"; // Import the necessary Three.js modules import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // Canvas const canvas = document.querySelector("canvas.world"); // Create a scene const scene = new THREE.Scene(); // Create a camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 10; camera.position.y = 5; scene.add(camera); // Create a renderer const renderer = new THREE.WebGLRenderer({ canvas: canvas, }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); document.body.appendChild(renderer.domElement); // Add OrbitControls to the camera const controls = new OrbitControls(camera, renderer.domElement); // Create an ambient light const ambientLight = new THREE.AmbientLight(0xffffff, 0.1); // Color, intensity scene.add(ambientLight); // Create various geometries and materials const sphereGeometry = new THREE.SphereGeometry(1, 32, 32); const icosahedronGeometry = new THREE.IcosahedronGeometry(1, 0); const boxGeometry = new THREE.BoxGeometry(1, 1, 1); const coneGeometry = new THREE.ConeGeometry(1, 2, 32); const sphereMaterial = new THREE.MeshStandardMaterial({ color: "#00b8a2", roughness: 0, wireframe: false, }); const icosahedronMaterial = new THREE.MeshStandardMaterial({ color: "#fffa00", roughness: 0, wireframe: false, }); const boxMaterial = new THREE.MeshStandardMaterial({ color: "#ff5733", roughness: 0.5, wireframe: false, }); const coneMaterial = new THREE.MeshStandardMaterial({ color: "#4a00e0", roughness: 0.3, wireframe: false, }); // Create meshes with different geometries const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.set(-3, 0, 0); const ico = new THREE.Mesh(icosahedronGeometry, icosahedronMaterial); ico.position.set(3, 0, 2); const box = new THREE.Mesh(boxGeometry, boxMaterial); box.position.set(0, 0, -3); const cone = new THREE.Mesh(coneGeometry, coneMaterial); cone.position.set(0, 0, 3); // Add all objects to the scene scene.add(sphere, ico, box, cone); // Create a plane for a floor const planeGeometry = new THREE.PlaneGeometry(30, 30, 1, 1); const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 }); const plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.position.y = -2; plane.rotation.x = -Math.PI / 2; scene.add(plane); // Animation loop function animate() { requestAnimationFrame(animate); controls.update(); // Update the controls cone.rotation.x += 0.01; cone.rotation.y += 0.01; cone.rotation.z += 0.01; ico.rotation.x += 0.01; ico.rotation.y += 0.01; // Render the scene renderer.render(scene, camera); } // Start the animation loop animate();

import "./styles.css"; // Import the necessary Three.js modules import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // Canvas const canvas = document.querySelector("canvas.world"); // Create a scene const scene = new THREE.Scene(); // Create a camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 10; camera.position.y = 5; scene.add(camera); // Create a renderer const renderer = new THREE.WebGLRenderer({ canvas: canvas, }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.render(scene, camera); document.body.appendChild(renderer.domElement); // Add OrbitControls to the camera const controls = new OrbitControls(camera, renderer.domElement); // Create an ambient light const ambientLight = new THREE.AmbientLight(0xffffff, 0.1); // Color, intensity scene.add(ambientLight); // Create various geometries and materials const sphereGeometry = new THREE.SphereGeometry(1, 32, 32); const icosahedronGeometry = new THREE.IcosahedronGeometry(1, 0); const boxGeometry = new THREE.BoxGeometry(1, 1, 1); const coneGeometry = new THREE.ConeGeometry(1, 2, 32); const sphereMaterial = new THREE.MeshStandardMaterial({ color: "#00b8a2", roughness: 0, wireframe: false, }); const icosahedronMaterial = new THREE.MeshStandardMaterial({ color: "#fffa00", roughness: 0, wireframe: false, }); const boxMaterial = new THREE.MeshStandardMaterial({ color: "#ff5733", roughness: 0.5, wireframe: false, }); const coneMaterial = new THREE.MeshStandardMaterial({ color: "#4a00e0", roughness: 0.3, wireframe: false, }); // Create meshes with different geometries const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.set(-3, 0, 0); const ico = new THREE.Mesh(icosahedronGeometry, icosahedronMaterial); ico.position.set(3, 0, 2); const box = new THREE.Mesh(boxGeometry, boxMaterial); box.position.set(0, 0, -3); const cone = new THREE.Mesh(coneGeometry, coneMaterial); cone.position.set(0, 0, 3); // Add all objects to the scene scene.add(sphere, ico, box, cone); // Create a plane for a floor const planeGeometry = new THREE.PlaneGeometry(30, 30, 1, 1); const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 }); const plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.position.y = -2; plane.rotation.x = -Math.PI / 2; scene.add(plane); // Spotlight with properties const spotlight = new THREE.SpotLight("#ffd60a", 50, 10, Math.PI / 2, 0.2, 2); // Color, intensity, distance, angle, penumbra, decay spotlight.position.set(0, 5, 3); scene.add(spotlight); // spotlight 2 const spotLight2 = new THREE.SpotLight("#9d4edd", 50, 10, Math.PI / 2, 0.2, 2); // Color, intensity, distance, angle, penumbra, decay spotLight2.position.set(-2, 5, -3); scene.add(spotLight2); // Animation loop function animate() { requestAnimationFrame(animate); controls.update(); // Update the controls cone.rotation.x += 0.01; cone.rotation.y += 0.01; cone.rotation.z += 0.01; ico.rotation.x += 0.01; ico.rotation.y += 0.01; // Render the scene renderer.render(scene, camera); } // Start the animation loop animate();