Three.js and TypeScript

Name: Three.js and TypeScript
Rating: 4.5 (383 reviews)

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

Bestseller

(383 ratings)

2,594 students

Created by Sean Bradley

Last updated 7/2021

English

English [Auto]

30-Day Money-Back Guarantee

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
Create a Threejs project using NPM and package json
Learn about Webpack, NodeJS, Express 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 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

Curated for the Udemy Business collection

1 section • 74 lectures • 8h 35m total length

Preview01:08
Preview02:13
Install TypeScript
01:22
Begin Creating the Three.js Project
06:59
Add the Initial Scripts
06:06
Setting up the WebPack Dev Server
09:39
Importing Three.js Modules
03:16
Install the Three.js Typescript Boilerplate
03:13
Scene, Camera and Renderer
20:55
Animation Loop
07:38
Stats Panel
05:18
Dat GUI Panel
08:17
Object3D
10:03
Object3D Hierarchy
09:09
Geometries
13:48
Material
11:25
MeshBasicMaterial
10:02
MeshNormalMaterial
03:05
MeshLambertMaterial
04:10
MeshPhongMaterial
03:17
MeshStandardMaterial
03:17
MeshPhysicalMaterial
02:36
MeshMatcapMaterial
03:26
MeshToonMaterial
04:11
Specular Map
04:56
Roughness and Metalness Maps
01:37
Bump Map
01:58
Preview04:18
Preview03:52
Texture Mipmaps
06:09
Custom Mipmaps
02:46
Anistropic Filtering
02:16
Lights
01:09
Ambient Light
02:39
Directional Light
03:55
Hemisphere Light
01:55
Point Light
04:04
Preview02:09
Spot Light Shadow
05:55
Directional Light Shadow
02:29
Orbit Controls
13:33
Trackball Controls
03:43
Pointerlock Controls
07:51
Drag Controls
04:10
Transform Controls
02:48
Using Multiple Controls in the Same Scene
03:32
OBJ Model Loader
15:59
MTL Loader
15:07
GLTF Loader
13:17
DRACO Loader
08:17
Textured GLTF
06:05
FBX Loader
06:31
FBX Animations
14:29
GLTF Animations
05:37
Custom GLTF Animations
10:55
Raycaster
23:33
Raycaster Collision Detection
04:46
Raycaster Mouse Picking
09:13
Raycaster Measurements
09:37
Using tween.js
10:52
Using tween.js and the THREE. AnimationMixer
14:44
Vector3 Lerp
05:23
Course Update Notice
01:02
Physics with Cannon.js
21:11
The Cannon.js Debug Renderer
18:30
ConvexPolyhedrons and Compound Shapes
19:00
Deploying to Production
03:19
Create the Start Script
03:20
Provision a Cloud Server for Production
02:47
Deploy Files to the Server
05:33
Start the Games on the server
06:10
Install Nginx Proxy
08:53
Point a Domain Name
02:29
Add SSL
06:18

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 Webpack and NodeJS.

The course is in 5 main sections,

Setting up the development environment and installing TypeScript
Create a Three.js boilerplate project. This section is optional, you can install a pre-built boilerplate in part 3 instead, but building it manually from the ground up will give you a very good understanding of the aspects involved in creating a new Three.js project from scratch.
Install the Threejs Course Boilerplate, in case you didn't manually create it in part 2.
Learn all about the many aspects of Three.js from the core up to using it in more advanced examples and involving other third party libraries.
Deploying to Production. We will look at several different options that you have for hosting your Threejs projects publicly on the internet.

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. Links to the documentation are in the resources along side each video.

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 more accurately and 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

31 courses

8 reviews

a year ago

This is a perfect starter-kit for Three.JS and TypeScript is a cherry on the cake! This is what I was looking for in various other ThreeJS tutorials. Sean Bradley has focused most of the basic core components of Three.JS Especially the availed boilerplate is perfect for all kinds of Three.JS apps.

Sean Bradley

Software and Networking Engineer for 20 Years

4.5 Instructor Rating
3,042 Reviews
24,472 Students
10 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.