Three.js and TypeScript

person icon Sean Bradley

Three.js and TypeScript

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

updated on icon Updated on Sep, 2023

language icon Language - English

person icon Sean Bradley

architecture icon Development,Game Development,3D Game Development


30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 19,000+ top Tutorialspoint courses anytime, anywhere.

Course 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.



What will you learn in this course:

  • 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


What are the prerequisites for this course?

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


Check out the detailed breakdown of what’s inside the course

Three.Js And TypeScript
77 Lectures
  • play icon Course Preview 01:54 01:54
  • play icon Introduction 01:27 01:27
  • play icon Setup Development Environment 02:03 02:03
  • play icon Install TypeScript 00:35 00:35
  • play icon Build Your First TypeScript File 05:28 05:28
  • play icon Type Annotations 04:21 04:21
  • play icon Interfaces and Type Declarations 07:43 07:43
  • play icon Classes 04:16 04:16
  • play icon Run it in the Browser 01:45 01:45
  • play icon Begin Creating the Three.js Project 04:07 04:07
  • play icon Add the Initial Scripts 02:58 02:58
  • play icon Server Side Dependency Imports 07:51 07:51
  • play icon Client Side Dependency Imports 08:56 08:56
  • play icon Importing Three.js Modules 04:59 04:59
  • play icon Automate Compilation with TSC Watch, Nodemon and Concurrently 08:09 08:09
  • play icon Install the Three.js Typescript Boilerplate 02:02 02:02
  • play icon Scene, Camera and Renderer 17:42 17:42
  • play icon Animation Loop 09:20 09:20
  • play icon Stats Panel 06:45 06:45
  • play icon Dat GUI Panel 07:54 07:54
  • play icon Object3D 07:37 07:37
  • play icon Geometries 15:44 15:44
  • play icon Material 11:25 11:25
  • play icon MeshBasicMaterial 10:02 10:02
  • play icon MeshNormalMaterial 03:05 03:05
  • play icon MeshLambertMaterial 04:10 04:10
  • play icon MeshPhongMaterial 03:17 03:17
  • play icon MeshStandardMaterial 03:17 03:17
  • play icon MeshPhysicalMaterial 02:36 02:36
  • play icon MeshMatcapMaterial 03:26 03:26
  • play icon MeshToonMaterial 04:11 04:11
  • play icon Specular Map 04:56 04:56
  • play icon Roughness and Metalness Maps 01:37 01:37
  • play icon Bump Map 01:58 01:58
  • play icon Displacement Map 04:18 04:18
  • play icon Material Repeat and Center 03:52 03:52
  • play icon Texture Mipmaps 06:09 06:09
  • play icon Custom Mipmaps 02:46 02:46
  • play icon Anistropic Filtering 02:16 02:16
  • play icon Lights 01:09 01:09
  • play icon Ambient Light 02:39 02:39
  • play icon Directional Light 03:55 03:55
  • play icon Hemisphere Light 01:55 01:55
  • play icon Point Light 04:04 04:04
  • play icon Spot Lights 02:09 02:09
  • play icon Spot Light Shadow 05:55 05:55
  • play icon Directional Light Shadow 02:29 02:29
  • play icon Orbit Controls 10:14 10:14
  • play icon Trackball Controls 05:05 05:05
  • play icon Pointerlock Controls 05:53 05:53
  • play icon Drag Controls 03:12 03:12
  • play icon Transform Controls 02:22 02:22
  • play icon Using Multiple Controls in the Same Scene 03:40 03:40
  • play icon OBJ Model Loader 10:52 10:52
  • play icon MTL Loader 08:11 08:11
  • play icon GLTF Loader 12:30 12:30
  • play icon DRACO Loader 04:54 04:54
  • play icon FBX Loader 08:17 08:17
  • play icon FBX Animations 14:51 14:51
  • play icon GLTF Animations 05:16 05:16
  • play icon Raycaster 24:39 24:39
  • play icon Using tween.js 15:20 15:20
  • play icon Using tween.js and the THREE.AnimationMixer 18:23 18:23
  • play icon Physics with Cannon.js 21:11 21:11
  • play icon The Cannon.js Debug Renderer 18:30 18:30
  • play icon ConvexPolyhedrons and Compound Shapes 19:00 19:00
  • play icon Deploying to Production 03:19 03:19
  • play icon Create the Start Script 03:20 03:20
  • play icon Provision a Cloud Server for Production 02:47 02:47
  • play icon Deploy Files to the Server 05:33 05:33
  • play icon Start the Games on the server 06:10 06:10
  • play icon Install Nginx Proxy 08:53 08:53
  • play icon Point a Domain Name 02:29 02:29
  • play icon Add SSL 06:18 06:18
  • play icon Extra Tasks 21:54 21:54
  • play icon Converting JavaScript Threejs Examples to TypeScript Projects
  • play icon Troubleshooting

Instructor Details

Sean Bradley

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.

Course Certificate

User your certification to make a career change or to advance in your current career. Salaries are among the highest in the world.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
People having fun around a laptop

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
People having fun around a laptop

Talk to us