Three.js and TypeScript
Created by Sean Bradley, Last Updated 29-Oct-2020, Language:English
Three.js and TypeScript
Learn Threejs, TypeScript and NodeJS to create interactive 3D content on the web.
Created by Sean Bradley, Last Updated 29-Oct-2020, Language:English
What Will I Get ?
- 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.
- 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
- The Raycaster and how to use it for mouse picking 3D objects in the scene
- Mipmaps, Custom Mipmaps and Anistropic Filtering
- Physics with Cannonjs
- The Cannonjs Debug Renderer
- Understanding ConvexPolyhedrons versus Compound Shapes for Collision Detection
- Constructive Solid Geometry
- Provision, Deploy and Start our Threejs Projects to a Production server
- 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
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 5 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.
5. Deployment to Production.
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
Course Content
-
Three.Js And TypeScript
75 Lectures 08:24:15-
Course Preview
Preview00:01:54 -
Introduction
Preview00:01:27 -
Setup Development Environment
Preview00:02:03 -
Install TypeScript
00:00:35 -
Build Your First TypeScript File
Preview00:05:28 -
Type Annotations
00:04:21 -
Interfaces and Type Declarations
00:07:43 -
Classes
00:04:16 -
Run it in the Browser
00:01:45 -
Begin Creating the Three.js Project
00:04:07 -
Add the Initial Scripts
00:02:58 -
Server Side Dependency Imports
00:07:51 -
Client Side Dependency Imports
00:08:56 -
Importing Three.js Modules
00:04:59 -
Automate Compilation with TSC Watch, Nodemon and Concurrently
00:08:09 -
Install the Three.js Typescript Boilerplate
00:02:02 -
Scene, Camera and Renderer
00:17:42 -
Animation Loop
00:09:20 -
Stats Panel
00:06:45 -
Dat GUI Panel
00:07:54 -
Object3D
00:07:37 -
Geometries
00:15:44 -
Material
00:11:25 -
MeshBasicMaterial
00:10:02 -
MeshNormalMaterial
00:03:05 -
MeshLambertMaterial
00:04:10 -
MeshPhongMaterial
00:03:17 -
MeshStandardMaterial
00:03:17 -
MeshPhysicalMaterial
00:02:36 -
MeshMatcapMaterial
00:03:26 -
MeshToonMaterial
00:04:11 -
Specular Map
00:04:56 -
Roughness and Metalness Maps
00:01:37 -
Bump Map
00:01:58 -
Displacement Map
Preview00:04:18 -
Material Repeat and Center
Preview00:03:52 -
Texture Mipmaps
00:06:09 -
Custom Mipmaps
00:02:46 -
Anistropic Filtering
00:02:16 -
Lights
00:01:09 -
Ambient Light
00:02:39 -
Directional Light
00:03:55 -
Hemisphere Light
00:01:55 -
Point Light
00:04:04 -
Spot Lights
Preview00:02:09 -
Spot Light Shadow
00:05:55 -
Directional Light Shadow
00:02:29 -
Orbit Controls
00:10:14 -
Trackball Controls
00:05:05 -
Pointerlock Controls
00:05:53 -
Drag Controls
00:03:12 -
Transform Controls
00:02:22 -
Using Multiple Controls in the Same Scene
00:03:40 -
OBJ Model Loader
00:10:52 -
MTL Loader
00:08:11 -
GLTF Loader
00:12:30 -
DRACO Loader
00:04:54 -
FBX Loader
00:08:17 -
FBX Animations
00:14:51 -
GLTF Animations
00:05:16 -
Raycaster
00:24:39 -
Using tween.js
00:15:20 -
Using tween.js and the THREE.AnimationMixer
00:18:23 -
Physics with Cannon.js
00:21:11 -
The Cannon.js Debug Renderer
00:18:30 -
ConvexPolyhedrons and Compound Shapes
00:19:00 -
Deploying to Production
00:03:19 -
Create the Start Script
00:03:20 -
Provision a Cloud Server for Production
00:02:47 -
Deploy Files to the Server
00:05:33 -
Start the Games on the server
00:06:10 -
Install Nginx Proxy
00:08:53 -
Point a Domain Name
00:02:29 -
Add SSL
00:06:18 -
Extra Tasks
00:21:54
-

Sean Bradley
Software and Networking Engineer for 20 Years
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.