Course Highlights
  • Learn the Basics of Threejs with many demonstrations and example code
  • Setup a Development Environment using VSCode, Git and NodeJS
  • Install TypeScript
  • Create a Threejs project using NPM and package json
  • Learn about the VIte bundler and serving ES6 modules to the browser clients.
  • Create (or optionally Install) a Threejs TypeScript Boilerplate for use throughout the course
  • Learn about the Threejs Scene, Camera and Renderer
  • Learn about the Animation loop
  • Learn about the Stats, Dat GUI and lil-gui panels
  • Learn about Object3D base class, and the Rotation, Position, Scale, Visibility and Matrix properties
  • Learn about Geometries such as Box, Sphere, Icosahedron, Plane, TorusKnot and more
  • Learn about the Basic, Normal, Phong, Standard, Physical and other materials
  • Learn about PBR Roughness and Metalness
  • Learn about lighting using the Ambient, Directional, Point and Spot lights.
  • Learn about shadows using both the Perspective and Orthographic shadow cameras.
  • Learn about the Orbit, Trackball and Pointerlock mouse and touch interaction controls
  • Learn about loaders such as the GLTF, DRACO, OBJ, Texture, RGBE and more
  • Import third party glTF/glB animations
  • Animate using Lerp, JEasings and the Animation Mixer
  • Use Raycaster and how to use it for mouse picking 3D objects in the scene,
  • Physics with Rapier
  • The Rapier Debug Renderer
  • Understanding Shapes for Collision Detection
  • Provision, Deploy and Start our Threejs Projects to a Production server
  • Matching Blender Lighting and Environment Maps
  • Install Nginx Proxy, Point a Domain Name and Install SSL
  • And many more very useful examples of Threejs
Curriculum

45 Topics
Introduction - How To Do This Course
Setup Development Environment
Create Course Boilerplate
Install Three.js and @three/types
Importing Three.js Modules
Stats Panel
Dat GUI
Install Three.js Course Boilerplate
Scene
Camera
Renderer
Animation Loop
Object3D
Object3D Hierarchy
Geometries
Materials
Common Materials
lil-gui
Lights
Shadows
Environment Maps
Loading Assets
Loading Multiple Assets
GLTF Loader : Part 1
GLTF Loader : Part 2
Raycaster
Orbit Controls
Lerp
JEasings
GLTF Animations
GLTF DRACO
Physics with Rapier
Rapier Debug Renderer
PointerLockControls
Rapier ImpulseJoint Motors
Obstacle Course Game : Part 1
Obstacle Course Game : Part 2
Deploying to Production
Host Using GitHub Pages
Host Using GitLab Pages
Provision a Cloud Server for Production
Install Nginx
Deploy Files to Server
Point Domain name
Add SSL

  Write a Review

Three.js and TypeScript

Go to Paid Course