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

HemisphereLight

Today, we’re going to explore a lighting technique that mimics the natural beauty of the sky and ground: the . Imagine standing in a lush meadow at sunrise. The sky above is a soft blue, while the ground beneath you glows with a warm, golden hue. This is the magic of HemisphereLight—it creates a gentle, ambient glow that feels natural and harmonious. Let’s dive in and learn how to use it to elevate your 3D scenes!

What is a ?

In the real world, light doesn’t just come from a single source like the sun or a lamp. It bounces off surfaces, creating a soft, diffused glow that fills the environment. A in simulates this effect by blending two colors: one for the sky and one for the ground. It’s perfect for creating natural-looking outdoor scenes or adding a subtle ambient glow to indoor environments.

Here’s a real-life example: Picture yourself on a beach at dusk. The sky is a deep blue, while the sand reflects a warm orange tone. Together, these colors create a serene, balanced atmosphere. In , a can recreate this effect, giving your scenes a natural and immersive feel.

Why Use a ?

is a fantastic tool for:

Creating natural outdoor lighting: Simulate the soft glow of the sky and ground.
Adding ambient illumination: Fill your scene with a gentle, diffused light that complements other light sources.
Enhancing realism: Mimic the way light interacts with the environment in the real world.

How to Create a in

Let’s get started! Here’s how you can add a to your scene:

Step 1: Set Up Your Scene

As always, we need a scene, a camera, and a renderer. If you’re new to , this is the foundation of any project.

Step 2: Add a

Now, let’s create the . You’ll need to specify two colors: one for the sky and one for the ground.

// Hemisphere light with sky and ground colors
const hemisphereLight = new THREE.HemisphereLight(0x00d5ff, 0xff00ea, 2); // Sky color, ground color, intensity
scene.add(hemisphereLight);

Sky Color: The first parameter represents the color of the sky. Here, we’re using a light blue.
Ground Color: The second parameter represents the color of the ground.
Intensity: The third parameter controls how bright the light is. You can adjust this to suit your scene.

Okay, also has a helper .

Official Docs

Let’s add a

Customizing Your

Now that you’ve added a basic , let’s explore some ways to customize it:

Change the Colors: Experiment with different sky and ground colors to set the mood. For example, a deep purple sky (0x800080) and a dark green ground (0x006400) can create a mystical forest vibe.
Adjust the Intensity: Increase the intensity for a brighter glow or decrease it for a subtler effect.
Combine with Other Lights: works beautifully with other lights like DirectionalLight or PointLight to create more complex lighting setups.

Real-Life Applications of

Let’s connect this to real-world scenarios:

Outdoor Scenes: Use to simulate the natural lighting of a sunny day, a cloudy sky, or a sunset.
Indoor Scenes: Add a soft ambient glow to rooms with large windows or open spaces.
Fantasy Worlds: Create magical environments with unusual sky and ground colors, like a glowing purple sky and a shimmering gold ground.

Conclusion

Congratulations! You’ve just unlocked the power of in . By mastering this tool, you can create natural, immersive lighting that brings your 3D scenes to life. Whether you’re crafting a serene landscape, a cozy room, or a fantastical world, HemisphereLight is your go-to for achieving a balanced and harmonious glow.

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 GUI from "lil-gui"; // Scene const scene = new THREE.Scene(); // Camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 100 ); camera.position.set(0, 2, 6); scene.add(camera); // Renderer const canvas = document.querySelector("canvas.world"); const renderer = new THREE.WebGLRenderer({ canvas }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Controls const controls = new OrbitControls(camera, renderer.domElement); // Hemisphere Light const hemisphereLight = new THREE.HemisphereLight(0x00d5ff, 0xff00ea, 2); scene.add(hemisphereLight); // Helper const hemiHelper = new THREE.HemisphereLightHelper(hemisphereLight, 2); scene.add(hemiHelper); // Ambient Light (optional fill) const ambient = new THREE.AmbientLight(0xffffff, 0.2); scene.add(ambient); // Material const material = new THREE.MeshStandardMaterial({ color: "#ffffff", roughness: 0.4, metalness: 0.3, }); // Geometries const sphere = new THREE.Mesh(new THREE.SphereGeometry(1, 32, 32), material); sphere.position.x = -2; const cube = new THREE.Mesh(new THREE.BoxGeometry(1.5, 1.5, 1.5), material); cube.position.x = 2; const plane = new THREE.Mesh( new THREE.PlaneGeometry(30, 30), new THREE.MeshStandardMaterial({ color: "#999", roughness: 0.8 }) ); plane.rotation.x = -Math.PI / 2; plane.position.y = -1; scene.add(sphere, cube, plane); // === GUI === const config = { skyColor: "#00d5ff", groundColor: "#ff00ea", intensity: 2, showHelper: true, }; const gui = new GUI(); gui.addColor(config, "skyColor").onChange((val) => { hemisphereLight.color.set(val); }); gui.addColor(config, "groundColor").onChange((val) => { hemisphereLight.groundColor.set(val); }); gui.add(config, "intensity", 0, 5, 0.1).onChange((val) => { hemisphereLight.intensity = val; }); gui.add(config, "showHelper").onChange((val) => { hemiHelper.visible = val; }); // Animate function animate() { requestAnimationFrame(animate); cube.rotation.y += 0.005; sphere.rotation.y -= 0.005; controls.update(); renderer.render(scene, camera); } animate();