Three.js and TypeScript

Three.js and TypeScript

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 8.5 Hours | 11.8 GB

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

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.

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.
  • 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 Anistropoc Filtering
  • 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
  • And many more very useful examples of Threejs
Table of Contents

Introduction
1 Introduction
2 Setup Development Environment
3 Install TypeScript
4 Build Your First TypeScript File
5 Type Annotations
6 Interfaces and Type Declarations
7 Classes
8 Run it in the Browser
9 Begin Creating the Three.js Project
10 Add the Initial Scripts
11 Server Side Dependency Imports
12 Client Side Dependency Imports
13 Importing Three.js Modules
14 Automate Compilation with TSC Watch, Nodemon and Concurrently
15 Install the Three.js Typescript Boilerplate
16 Scene, Camera and Renderer
17 Animation Loop
18 Stats Panel
19 Dat GUI Panel
20 Object3D
21 Geometries
22 Material
23 MeshBasicMaterial
24 MeshNormalMaterial
25 MeshLambertMaterial
26 MeshPhongMaterial
27 MeshStandardMaterial
28 MeshPhysicalMaterial
29 MeshMatcapMaterial
30 MeshToonMaterial
31 Specular Map
32 Roughness and Metalness Maps
33 Bump Map
34 Displacement Map
35 Material Repeat and Center
36 Texture Mipmaps
37 Custom Mipmaps
38 Anistropic Filtering
39 Lights
40 Ambient Light
41 Directional Light
42 Hemisphere Light
43 Point Light
44 Spot Light
45 Spot Light Shadow
46 Directional Light Shadow
47 Orbit Controls
48 Trackball Controls
49 Pointerlock Controls
50 Drag Controls
51 Transform Controls
52 Using Multiple Controls in the Same Scene
53 OBJ Model Loader
54 MTL Loader
55 GLTF Loader
56 DRACO Loader
57 FBX Loader
58 FBX Animations
59 GLTF Animations
60 Raycaster
61 Using tween.js
62 Using tween.js and the THREE. AnimationMixer
63 Physics with Cannon.js
64 The Cannon.js Debug Renderer
65 ConvexPolyhedrons and Compound Shapes
66 Deploying to Production
67 Create the Start Script
68 Provision a Cloud Server for Production
69 Deploy Files to the Server
70 Start the Games on the server
71 Install Nginx Proxy
72 Point a Domain Name
73 Add SSL
74 Converting JavaScript Threejs Examples to TypeScript Projects