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
Orthographic Camera
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
Ambient Occlusion 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

Setting Up Three.js — Your First Step into 3D Web

The rest of this lesson is waiting.
Join JS Mastery Pro to unlock it.

Vanilla Three.js Course

$300

Buy the Course Only

Lifetime access to this course

Build advanced web app

Certificate of completion included

Great for focused learners who just want this course

Get Full Access

$149 /month

Monthly PlanYearly Plan

Lock in a year & save—2 months free!

Subscribe to JS Mastery

Access all courses + exclusive projects with Adrian

New lessons & tools added regularly

Join thousands of devs leveling up globally

Practice with our Mock AI Interviewer & ace your next job interview

30-day money-back guarantee / 7 days guarantee on membership

The rest of this lesson is waiting.Join JS Mastery Pro to unlock it.

Vanilla Three.js Course

Get Full Access

The rest of this lesson is waiting.
Join JS Mastery Pro to unlock it.