Skip to content
Three.js Tutorials
Example 2
Initializing search
Three.js Tutorials
Home
Introduction
Setup Development Environment
Install TypeScript
Begin Creating the Three.js Project
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
Updating THREE.Geometry to THREE.BufferGeometry
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
Lights
Ambient Light
Directional Light
Hemisphere Light
Point Light
Spot Light
Spot Light Shadow
Directional Light Shadow
DisplacementMap with 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
Reflector
CubeCamera Reflections
CubeCamera Refractions
Raycaster
Raycaster Collision Detection
Raycaster Mouse Picking
Raycaster Measurements
Raycast to a Displacement Map
Raycast to a SkinnedMesh
Using tween.js
Using tween.js with the AnimationMixer
Using tween.js with OrbitControls
Tween Chaining
Vector3
Vector3 Lerp
Physics with Cannon
Cannon Debug Renderer
Trimeshes, ConvexPolyhedrons and Compound Shapes
ConvexObjectBreaker
Constructive Solid Geometry
Collision Detection using OBB
Loading Multiple Assets
Download Progress Indicator
Using Import Maps
Three.js Examples
Three.js Examples
Glasses
RNG
Bouncing Dice
Bender
CSG glTF
Engraving
Shiny Refraction
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
Tween Material Properties
Lerp Material Properties
Land on a Square
Fly Earth
Draw a Displacement Map
Infinity Roller
Straight Car
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
Converting JavaScript Threejs Examples to TypeScript Projects
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 2
Example 3
Example 4
GrabVR
GrabVR
GrabVR
Example 1
Example 2
ButtonVR
ButtonVR
ButtonVR
Example 1
Example 2
Troubleshooting
Consulting
Other Courses
Zabbix
Grafana
Prometheus
React Three Fiber
Threejs and TypeScript
SocketIO and TypeScript
Blender Topological Earth
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
Three.js and TypeScript
Kindle Edition
Paperback
ButtonVR - Example 2
ButtonVR Keyboard Demo.