Skip to content
Three.js Tutorials
Example 1
Initializing search
Three.js Tutorials
Home
Introduction
Setup Development Environment
Create Course Boilerplate
Install Three.js and @three/types
Importing Three.js Modules
Stats Panel
Dat GUI
Three.js Course Boilerplate
Scene
Camera
Renderer
Animation Loop
Object3D
Object3D Hierarchy
Geometries
Updating THREE.Geometry to THREE.BufferGeometry
Materials
Common Materials
lil-gui
Lights
Shadows
Environment Maps
Loading Assets
Loading Multiple Assets
GLTF Loader
Raycaster
OrbitControls
Lerp
JEasings
GLTF Animations
DRACO Loader
Physics with Rapier
Rapier Debug Renderer
PointerLockControls
Rapier ImpulseJoint Motors
Obstacle Course Game - Part 1
Obstacle Course Game - Part 2
Download Progress Indicator
Using Import Maps
Deploying to Production
Host using GitHub Pages
Host using GitLab Pages
Provision a Cloud Server
Install Nginx
Deploy Files to Server
Point Domain name
Add SSL
Three.js Examples
Three.js Examples
Reflector
CubeCamera Reflections
CubeCamera Refractions
DisplacementMap with Shadow
Raycast to a Displacement Map
Raycast to a SkinnedMesh
JEasing OrbitControls
JEasing Chain
ConvexObjectBreaker
Constructive Solid Geometry
Collision Detection using OBB
RNG
Bouncing Dice
Bender
CSG glTF
Engraving
Cascaded Shadow Maps
LOD
Car Physics
Helicopter Physics
Finger Physics
Point to Point Constraints
Animate on Scroll
FFT
Sharing Animation Clips
Gerstner Water Shader
Glass Transmission
Convex Geometry to CANNON.Trimesh
Kick Boxing
Random Puncher
Globe
Centre of Gravity
Transparent Shadow
Soft Shadows
Follow Cam
JEasing Material Properties
Lerp Material Properties
Land on a Square
Fly Earth
Draw a Displacement Map
Infinity Roller
Straight Car
Earings
Threejs TypeScript Boilerplate Branches
Threejs TypeScript Boilerplate Branches
SocketIO
Cannon
Webcam
Constellations
Ballgame
Annotations
CSG
WebXR
SSR
StatsVR
StatsVR
StatsVR
Example 1
Example 2
Example 3
Example 4
TeleportVR
TeleportVR
TeleportVR
Example 1
Example 1
Table of contents
Comments
Other Courses
Zabbix
Grafana
Prometheus
React Three Fiber
Threejs and TypeScript
SocketIO and TypeScript
Sweet Home 3D
Design Patterns Python
Design Patterns TypeScript
Course Coupon Codes
Programming Books
Design Patterns in Python
Kindle Edition
Paperback
Design Patterns in TypeScript
Kindle Edition
Paperback
Example 2
Example 3
Example 4
GrabVR
GrabVR
GrabVR
Example 1
Example 2
ButtonVR
ButtonVR
ButtonVR
Example 1
Example 2
Troubleshooting
Consulting
2023 Course Content
2023 Course Content
Install TypeScript
Create the Course Boilerplate
Add the Initial Scripts
Setting up the Webpack Dev Server
Importing Three.js Modules
Three.js Typescript Boilerplate
Scene, Camera and Renderer
Animation Loop
Stats Panel
Dat GUI
Object3D
Object3D Hierarchy
Geometries
Materials
MeshBasicMaterial
MeshNormalMaterial
MeshLambertMaterial
MeshPhongMaterial
MeshStandardMaterial
MeshPhysicalMaterial
MeshMatcapMaterial
MeshToonMaterial
SpecularMap
RoughnessMap and MetalnessMap
BumpMap
NormalMap
DisplacementMap
DisplacementMap with NormalMap
Material Repeat and Center
Texture Mipmaps
Custom Mipmaps
Anisotropic Filtering
Ambient Light
Directional Light
Hemisphere Light
Point Light
Spot Light
Spot Light Shadow
Directional Light Shadow
OrbitControls
TrackballControls
PointerLockControls
DragControls
TransformControls
Multiple Controls Example
OBJ Model Loader
MTL Loader
GLTF Model Loader
DRACO Loader
Textured GLTF
PLY Loader
STL Loader
FBX Loader
FBX Animations
GLTF Animations
GLTF Custom Animations
DragControls with GLTF Animations
TransformControls with GLTF Animations
Raycaster
Raycaster Collision Detection
Raycaster Mouse Picking
Raycaster Measurements
Vector3
Vector3 Lerp
tween.js
Using tween.js with the AnimationMixer
Physics with Cannon
Cannon Debug Renderer
Trimeshes, ConvexPolyhedrons and Compound Shapes
Deploying to Production
Setup a Webpack Production Configuration
Host using GitHub Pages
Host using GitLab Pages
Host using an Nginx Server
Point Domain name
Add SSL
Server-side functionality with Node.js and Express
Socket.IO with Node.js, Express and Webpack
Setup Nginx as a Reverse Proxy
The Ballgame
Table of contents
Comments
Other Courses
Zabbix
Grafana
Prometheus
React Three Fiber
Threejs and TypeScript
SocketIO and TypeScript
Sweet Home 3D
Design Patterns Python
Design Patterns TypeScript
Course Coupon Codes
Programming Books
Design Patterns in Python
Kindle Edition
Paperback
Design Patterns in TypeScript
Kindle Edition
Paperback
TeleportVR - Example 1
Basic TeleportVR setup for WebVR and Threejs projects.
<>
Comments