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

Vanilla Three.js Course

Creating Your First 3D Scene in Three.js

Welcome Back! Hey everyone! In this lesson, we’re going to create our first 3D scene together. By the end of this lesson, you’ll have a with a spinning . Sounds fun, right? Let’s jump in!

What Are We Building?

We’re going to create a simple 3D scene with a rotating cube. This might sound fancy, but trust me, it’s not as complicated as it seems. We’ll break it down step by step.

Why Start with a Cube?

A cube is one of the simplest 3D shapes, and it’s a great way to understand the basics of Three.js. Once you get this, you can create anything—, , even entire !

Understanding the Three.js Building Blocks Every project has three main parts:

Scene: This is like the stage where everything happens.
Camera: This is your viewpoint—it determines what you see.
Renderer: This is what draws everything on the screen.

Think of it like making a movie: The Scene is the set, the Camera is what you’re filming with, and the Renderer is the projector that shows the movie on the screen.

Setting Up the Scene

The scene is where all our 3D objects will live. Let’s create one and give it a pink background!

const scene = new THREE.Scene();  
scene.background = new THREE.Color("pink");

We’re creating a new scene and setting its background color to pink. Simple, right?

Adding a Camera

Why Do We Need a Camera ? --- Without a camera, we can’t see anything in our scene. It’s like having a movie set but no camera to film it. Let’s add one!

const camera = new THREE.PerspectiveCamera(  
  75,  
  window.innerWidth / window.innerHeight,  
  0.1,  
  1000  
);  
camera.position.z = 5;  
scene.add(camera);

We’re creating a camera and moving it back a bit so it’s not inside the cube. If we don’t move it, we won’t see anything because the camera will be inside the cube by default.

Setting Up the Renderer

What’s a Renderer ? --- The renderer is like the projector in a movie theater. It takes the and the and draws everything on the screen.

const renderer = new THREE.WebGLRenderer({  
  canvas: canvas,  
});  
renderer.setSize(window.innerWidth, window.innerHeight);  
document.body.appendChild(renderer.domElement);

We’re creating a renderer, setting its size to match the browser window, and adding it to the webpage. Now, everything we add to the scene will show up on the screen.

Adding a Cube

Creating the Cube --- Now for the fun part—let’s add a cube! Every 3D object in Three.js has two parts :

: The shape of the object (in this case, a cube).
: What the object looks like (we’ll make it magenta).

const geometry = new THREE.BoxGeometry();  
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });  
const cube = new THREE.Mesh(geometry, material);  
scene.add(cube);

We’re creating a cube, giving it a red color, and adding it to the scene. If you run the code now, you’ll see a red cube on a pink background!

Making the Cube Spin

A static cube is cool, but a spinning cube is even cooler! Let’s make it rotate.

function animate() {  
  requestAnimationFrame(animate);  
  cube.rotation.x += 0.01;  
  cube.rotation.y += 0.01;  
  renderer.render(scene, camera);  
}  

animate();

We’re creating a loop that updates the cube’s rotation every frame. This makes the cube spin smoothly. The function keeps the animation running efficiently.

Understanding 3D Space

The Coordinate System In Three.js, the 3D space works like this:

: Goes left and right.
: Goes up and down.
: Goes forward and backward.

The center of the screen is (0, 0, 0). This is where our cube is by default.

Don't worry, we will learn about Transformations with a whole module in the near future.

Why Does This Matter? Understanding this helps you position objects, move the camera, and create cool effects. For example, moving the camera back along the lets us see the cube.

Let’s quickly recap:

We created a scene and gave it a pink background.
We added a camera and moved it back so we can see the cube.
We set up a renderer to draw everything on the screen.
We created a cube, made it red, and added it to the scene.
We added an animation loop to make the cube spin.

And that’s it! You’ve just created your first 3D scene with . 🎉

Great job! You’ve just built your first 3D scene with a spinning cube. This is the foundation of everything you’ll do with Three.js. Play around with the code—try changing the cube’s , or . The more you experiment, the more you’ll learn!

If you have any questions or want to share what you’ve created, drop a comment below or join our Discord community. See you in the next lesson! 🚀

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