Three.js and TypeScript
What you'll learn
- Learn the Basics of Threejs with many demonstrations and example code
- Setup a Development Environment using VSCode, Git and NodeJS
- Install TypeScript
- Do a TypeScript mini course learning about Types, Interfaces, Classes and see it run in NodeJS and in the browser.
- Create a Threejs project using NPM and package json
- Import the Threejs libraries into our TypeScript code and serve via our NodeJS server
- Learn about NodeJS, Express and serving ES6 modules to the browser clients.
- Set up NodeJS to auto recompile and generate project code upon changes
- 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 and Dat 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, Lambert, Phong, Standard, Physical, Matcap and other materials
- Learn about the highlighting options with the SpecularMap, RoughnessMap and MetalnessMap
- Learn about the Bumpmap and Displacement Maps
- Learn about modifying the texture and displacement map UVs using the material options.
- Learn about lighting using the Ambient, Directional, Hemisphere, Point and Spot lights.
- Mipmaps, Custom Mipmaps and Anistropic Filtering
- 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 the model loaders such as the OBJ, MTL, GLTF, DRACO and more
- Import third party FBX and glTF/glB animations
- Create Custom Animations and Export From Blender As glTF/glB
- Use Raycaster and how to use it for mouse picking 3D objects in the scene,
- Physics with Cannonjs
- The Cannonjs Debug Renderer
- Understanding ConvexPolyhedrons versus Compound Shapes for Collision Detection
- Provision, Deploy and Start our Threejs Projects to a Production server
- Install Nginx Proxy, Point a Domain Name and Install SSL
- Using Module Specifiers with Webpack Versus Relative Import References
- And many more very useful examples of Threejs
Course content
- Preview01:27
- 02:03Setup Development Environment
- 00:35Install TypeScript
- 05:28Build Your First TypeScript File
- 04:21Type Annotations
- 07:43Interfaces and Type Declarations
- 04:16Classes
- 01:45Run it in the Browser
- 04:07Begin Creating the Three.js Project
- 02:58Add the Initial Scripts
- 07:51Server Side Dependency Imports
- 08:56Client Side Dependency Imports
- 04:59Importing Three.js Modules
- 08:09Automate Compilation with TSC Watch, Nodemon and Concurrently
- 02:02Install the Three.js Typescript Boilerplate
- 17:42Scene, Camera and Renderer
- 09:20Animation Loop
- 06:45Stats Panel
- 08:44Dat GUI Panel
- 21:29Module Specifiers Versus Relative Import References
- 07:37Object3D
- 15:44Geometries
- 11:25Material
- 10:02MeshBasicMaterial
- 03:05MeshNormalMaterial
- 04:10MeshLambertMaterial
- 03:17MeshPhongMaterial
- 03:17MeshStandardMaterial
- 02:36MeshPhysicalMaterial
- 03:26MeshMatcapMaterial
- 04:11MeshToonMaterial
- 04:56Specular Map
- 01:37Roughness and Metalness Maps
- 01:58Bump Map
- Preview04:18
- Preview03:52
- 06:09Texture Mipmaps
- 02:46Custom Mipmaps
- 02:16Anistropic Filtering
- 01:09Lights
- 02:39Ambient Light
- 03:55Directional Light
- 01:55Hemisphere Light
- 04:04Point Light
- Preview02:09
- 05:55Spot Light Shadow
- 02:29Directional Light Shadow
- 10:14Orbit Controls
- 05:05Trackball Controls
- 05:53Pointerlock Controls
- 03:12Drag Controls
- 02:22Transform Controls
- 03:40Using Multiple Controls in the Same Scene
- 10:52OBJ Model Loader
- 08:11MTL Loader
- 12:30GLTF Loader
- 04:54DRACO Loader
- 08:17FBX Loader
- 14:51FBX Animations
- 05:16GLTF Animations
- 11:16Custom GLTF Animations
- 24:39Raycaster
- 15:20Using tween.js
- 18:23Using tween.js and the THREE. AnimationMixer
- 21:11Physics with Cannon.js
- 18:30The Cannon.js Debug Renderer
- 19:00ConvexPolyhedrons and Compound Shapes
- 03:19Deploying to Production
- 03:20Create the Start Script
- 02:47Provision a Cloud Server for Production
- 05:33Deploy Files to the Server
- 06:10Start the Games on the server
- 08:53Install Nginx Proxy
- 02:29Point a Domain Name
- 06:18Add SSL
- 21:54Converting JavaScript Threejs Examples to TypeScript Projects
Requirements
- A Computer that you can install VSCode, Git and NodeJS
- A desire to code 3D web applications in Threejs and TypeScript
Description
Welcome to my course on Three.js and Typescript.
In this course we will learn all about Three.js, write it in TypeScript, and also write a HTML client and server component using NodeJS.
The course is in 4 main sections,
1. Setting up the development environment and installing TypeScript
2. An quick introduction course to TypeScript suitable for Beginners
3. Creating the three.js master project template with the client HTML and the NodeJS server
4. The main threejs course content with demonstrations and code examples.
If you have experience with TypeScript, then you can skip part 2.
At the beginning of part 4, I also provide a pre created copy of the project template that was created in part 3. So you can also bypass section 3 in case you want to get straight into the details of Threejs.
Since this course is written in TypeScript, section 2 and 3 contain very useful information that will help you to understand the additional TypeScript syntax and concepts I use throughout this course.
All code is provided in the accompanying documentation so that you can easily copy and paste, in case you don't want to pause the video and copy from the screen.
TypeScript introduces type safety in our code which makes it much more robust and gives the IDE extra tools such as intellisence that we can use to help us find and understand the available Threejs properties and methods and code much faster.
Thanks for taking part in my course, and I will see you there.
Sean
Who this course is for:
- People interested in learning Threejs
- People interested in learning TypeScript
- People interested in creating interactive 3D applications, games or visualisations on the web
- People who want to learn enough about Threejs, TypeScript and NodeJS for it to be useful
Featured review
![Atul Meshram](data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"%3E%3C/svg%3E){kind=avatar}
Instructor
- 4.5 Instructor Rating
- 1,913 Reviews
- 17,112 Students
- 8 Courses
Hello, I'm Sean.
For over 20 years I have been an IT engineer building and managing real time, low latency, high availability, asynchronous, multi threaded, remotely managed, fully automated, monitored solutions in the education, aeronautical, banking, drone, gaming and telecommunications industries.
I have also created and written hundreds of Open Source GitHub Repositories, Medium Articles and YouTube video tutorials.