Three.js and TypeScript

Learn Threejs, TypeScript and NodeJS to create interactive 3D content on the web.

4.68 (2002 reviews)

Udemy

platform

English

language

Programming Languages

What you will learn

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

Course Gallery

Three.js and TypeScript – Screenshot 1 — Screenshot 1 – Three.js and TypeScript

Three.js and TypeScript – Screenshot 2 — Screenshot 2 – Three.js and TypeScript

Three.js and TypeScript – Screenshot 3 — Screenshot 3 – Three.js and TypeScript

Three.js and TypeScript – Screenshot 4 — Screenshot 4 – Three.js and TypeScript

History

Students

Price

Rating & Reviews

Comidoc Review

Our Verdict

This extensive Three.js & TypeScript course offers depth and substance, despite minor drawbacks related to course maintenance and teaching methods—ideal for beginners hungry to learn the intricacies of 3D web content development.

What We Liked

Comprehensive coverage of Three.js basics with numerous practical examples
Includes guidance on setting up a development environment using VSCode, Git, NodeJS, TypeScript and VIte
Detailed explanation of essential concepts such as Three.js Scene, Camera, Renderer, Animation loop, Stats panel and Object3D base class
Dives deep into Geometries, ranging from Box and Sphere to TorusKnot, as well as various materials
Hands-on experience with lighting, shadows, Orbit, Trackball and Pointerlock controls, loaders like GLTF, DRACO, OBJ and Texture, and Raycaster

Potential Drawbacks

Several users point out the course's lack of alignment with Three.js 0.150+, requiring code tweaks
Instructor's heavy reliance on keyboard shortcuts might be challenging to follow along for some users
Low volume voice and frequent use of Windows operating system may distract or inconvenience certain learners
Overemphasis on copying/pasting code in a few instances affects hands-on learning experience
Video documentation style rather than tutorial format might not resonate with those looking for a project-based learning experience