Three.js and TypeScript
Learn Threejs, TypeScript and NodeJS to create interactive 3D content on the web.
Category:
Tags:
CourseLearnTutorial
Do you know a Resource we should add?Submit a new Resource!
Three.js Boilerplates
Three.js Boilerplates
Check out our collection of Three.js Boilerplates & React Three Fiber [R3F] Boilerplates.
From simple to complex, we have you covered.
Links
Newsletter
Stay Updated with Three.js Resources!
- Weekly curated Three.js resources and tool
- Early access to new tools and boilerplates
No spam, unsubscribe at any time.
Description
- 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