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

AmbientLight

Imagine you're an explorer discovering a mysterious cave. You light a small lantern, and suddenly, the entire cave is dimly illuminated. You can't see every detail, but you can now navigate safely and sense the space around you.

This is how works in Three.js.

What is AmbientLight ?

In the realm of Three.js, is like a universal light source that evenly illuminates every object in your scene. It doesn’t cast shadows or have a specific direction—it’s just there, softly brightening everything. Think of it as the light that fills a room on a cloudy day, where everything is visible but without strong contrasts. Three.js Docs

Setting Up Your Scene

You can also check the full code in here

Get Source Code

Okay so, let’s set up a simple Three.js scene.

The takes two parameters:

: a hexadecimal color code (like for a white color) or string like “white”
: numeric value of the light's strength/intensity. Default is 1

const ambientLight = new THREE.AmbientLight(0xffffff, 0.1); // Soft white light
scene.add(ambientLight);

If you render the scene now, you’ll notice that the scene is softly lit, but it looks a bit flat. That’s because:

Learning

doesn’t create shadows or highlights—it just evenly lights everything.

Let’s add here to control the intensity of the light and color of the light

Final Thoughts

The is like the quiet hero of Three.js lighting. It doesn’t demand attention, but it subtly enhances your scene, making everything visible and cohesive. As you continue your journey in Three.js, experiment with combining with other lights to create stunning, realistic scenes.

And remember, every great 3D masterpiece starts with a single light. So, keep experimenting, and soon you’ll be painting with light like a pro!

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 the necessary Three.js modules import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; import GUI from "lil-gui"; const gui = new GUI(); const config = { wireframe: false, // Add a boolean property visibleToggle: function () { sphere.visible = !sphere.visible; }, meshColor: "#00ff00", // Add a color property lightColor: "#ffc370", // Add a color property intensity: 5, }; gui.add(config, "wireframe"); gui.add(config, "visibleToggle"); gui.addColor(config, "meshColor"); gui.addColor(config, "lightColor"); gui.add(config, "intensity", 0, 10, 0.01); // 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 = 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 a geometry const geometry = new THREE.SphereGeometry(1, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, wireframe: false, visible: true, roughness: 0, // if you want to see the ambient light effect, set roughness to 0. }); const sphere = new THREE.Mesh(geometry, material); sphere.position.x = 2; scene.add(sphere); const basicgeometry = new THREE.SphereGeometry(1, 32, 32); const basicmaterial = new THREE.MeshStandardMaterial({ color: "pink", }); const basicsphere = new THREE.Mesh(basicgeometry, basicmaterial); basicsphere.position.x = -2; scene.add(basicsphere); // Create a geometry const torusGeometry = new THREE.TorusGeometry(1.5, 0.5, 16, 100); const torusMaterial = new THREE.MeshStandardMaterial({ color: "#ff8c00", }); const torus = new THREE.Mesh(torusGeometry, torusMaterial); torus.position.x = -3.5; scene.add(torus); // Create a geometry const dodecahedronGeometry = new THREE.DodecahedronGeometry(1.5, 0); const dodecahedronMaterial = new THREE.MeshStandardMaterial({ color: "#ff0054", }); const dodecahedron = new THREE.Mesh(dodecahedronGeometry, dodecahedronMaterial); dodecahedron.position.z = -3; scene.add(dodecahedron); // Create a plane for a floor const planeGeometry = new THREE.PlaneGeometry(30, 30, 1, 1); const planeMaterial = new THREE.MeshStandardMaterial({ color: "#f7ede2" }); 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); // change with lil-gui sphere.material.wireframe = config.wireframe; sphere.material.color.set(config.meshColor); ambientLight.color.set(config.lightColor); ambientLight.intensity = config.intensity; // rotate animation dodecahedron.rotation.x += 0.01; dodecahedron.rotation.y += 0.01; dodecahedron.rotation.z += 0.01; 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 = 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 a geometry const geometry = new THREE.SphereGeometry(1, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, wireframe: false, visible: true, roughness: 0, // if you want to see the ambient light effect, set roughness to 0. }); const sphere = new THREE.Mesh(geometry, material); sphere.position.x = 2; scene.add(sphere); const basicgeometry = new THREE.SphereGeometry(1, 32, 32); const basicmaterial = new THREE.MeshStandardMaterial({ color: "pink", }); const basicsphere = new THREE.Mesh(basicgeometry, basicmaterial); basicsphere.position.x = -2; scene.add(basicsphere); // Create a geometry const torusGeometry = new THREE.TorusGeometry(1.5, 0.5, 16, 100); const torusMaterial = new THREE.MeshStandardMaterial({ color: "#ff8c00", }); const torus = new THREE.Mesh(torusGeometry, torusMaterial); torus.position.x = -3.5; scene.add(torus); // Create a geometry const dodecahedronGeometry = new THREE.DodecahedronGeometry(1.5, 0); const dodecahedronMaterial = new THREE.MeshStandardMaterial({ color: "#ff0054", }); const dodecahedron = new THREE.Mesh(dodecahedronGeometry, dodecahedronMaterial); dodecahedron.position.z = -3; scene.add(dodecahedron); // Create a plane for a floor const planeGeometry = new THREE.PlaneGeometry(30, 30, 1, 1); const planeMaterial = new THREE.MeshStandardMaterial({ color: "#f7ede2" }); 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 // Render the scene renderer.render(scene, camera); } // Start the animation loop animate();