Tutorialspoint

Three.js and TypeScript

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

  Sean Bradley

   Development, Game Development, 3D Game Development

  Language - English

   Published on 10/2020

0
  • Course Preview
    01:54
    Preview
  • Introduction
    01:27
    Preview
  • Setup Development Environment
    02:03
    Preview
  • Install TypeScript
    00:35
  • Build Your First TypeScript File
    05:28
    Preview
  • Type Annotations
    04:21
  • Interfaces and Type Declarations
    07:43
  • Classes
    04:16
  • Run it in the Browser
    01:45
  • Begin Creating the Three.js Project
    04:07
  • Add the Initial Scripts
    02:58
  • Server Side Dependency Imports
    07:51
  • Client Side Dependency Imports
    08:56
  • Importing Three.js Modules
    04:59
  • Automate Compilation with TSC Watch, Nodemon and Concurrently
    08:09
  • Install the Three.js Typescript Boilerplate
    02:02
  • Scene, Camera and Renderer
    17:42
  • Animation Loop
    09:20
  • Stats Panel
    06:45
  • Dat GUI Panel
    07:54
  • Object3D
    07:37
  • Geometries
    15:44
  • 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
  • Displacement Map
    04:18
    Preview
  • Material Repeat and Center
    03:52
    Preview
  • 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
  • Spot Lights
    02:09
    Preview
  • Spot Light Shadow
    05:55
  • Directional Light Shadow
    02:29
  • Orbit Controls
    10:14
  • Trackball Controls
    05:05
  • Pointerlock Controls
    05:53
  • Drag Controls
    03:12
  • Transform Controls
    02:22
  • Using Multiple Controls in the Same Scene
    03:40
  • OBJ Model Loader
    10:52
  • MTL Loader
    08:11
  • GLTF Loader
    12:30
  • DRACO Loader
    04:54
  • FBX Loader
    08:17
  • FBX Animations
    14:51
  • GLTF Animations
    05:16
  • Raycaster
    24:39
  • Using tween.js
    15:20
  • Using tween.js and the THREE.AnimationMixer
    18:23
  • 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
  • Extra Tasks
    21:54
  • Converting JavaScript Threejs Examples to TypeScript Projects
  • Troubleshooting

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

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
0
Course Rating
0%
0%
0%
0%
0%

    Feedbacks (0)

  • No Feedbacks Yet..!

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy.