Three.js and TypeScript

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

Created by: Sean Bradley
Software and Networking Engineer for 20 Years

What Will I 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

Requirements

• A Computer that you can install VSCode, Git and NodeJS
• A desire to code 3D web applications in Threejs and TypeScript

Target audience

• People interested in learning Threejs
• People interested in learning TypeScript
• People interested in creating interactive 3D applications, games or visualisations on the web