Three.js and TypeScript

Welcome to my course on Three.js and Typescript.

Three.js is a cross-browser JavaScript library and Application Programming Interface used to create and display animated 3D computer graphics across the web in a browser.

In this course we will learn all about Three.js using demonstrations and sample code that you can download and experiment with on your own pc.

We start the course by setting up your development environment and installing TypeScript.

We then begin to create a Three.js boilerplate/template project that we can use throughout the remainder of the course, which will also give you exposure to Git, NPM, NodeJS, WebPack and is also generic enough that you will be able to use it in your own Three.js projects into the future.

We then move onto learning about the Three.js Scene, Camera and Renderer,
The Animation loop - when and how to use it,
Import the Stats and Dat.GUI panel tools, which are very useful when learning about Threejs,
We learn about,

• Object3d base class, with its Rotation, Position and Scale transformation matrices,
• Inbuilt Three.js geometries such as the Box, Sphere, Icosahedron, Plane, TorusKnot many more,
• Materials such as the Basic, Normal, Lambert, Phong, Standard, Physical, Matcap, Toon, Shader and Depth,
• Specular, Roughness and Metalness maps,
• Bumpmaps and Displacement maps,
• Manipulating UV coordinates to affect the appearance of the materials and displacement maps,
• Llighting such at the Ambient, Directional, Hemisphere, Point and Spot Lights,
• Shadows, and how to achieve perspective verses orthographic shadow affects,
• Raycaster, and how to use it for mouse picking 3d objects in the scene,
• The tween.js library to smoothly transition object properties such as camera lookat and object positions.
• Physics with Cannon.js and using the cannonDebugRenderer
• Understanding the different options for Cannon.js Physics Collisions.
• Provisioning and Deployment to a Production Server
• Setup Nginx Proxy, Domain Name and SSL
• Using Module Specifiers with Webpack Versus Relative Import References
• And many more useful examples of Three.js that you can copy and experiment with your side in order to understand Three.js at it's core much better.

At the end of the course, you will understand Three.js and also how to use TypeScript in order to write robust and type safe code much quicker. And then you can begin writing your own 3d games, applications and presentations which will be accessible from a browser and on the web.

So,
Thanks for taking part in my course and I will see you there.

• Threejs and TypeScript Introduction
• How to do this course
• Setup Development Environment
• Install TypeScript
• Begin Creating the Three.js Project
• Add the Initial Scripts
• Setting up the WebPack Dev Server
• Importing Three.js Modules
• Install the Three.js Typescript Boilerplate
• Scene, Camera and Renderer
• Animation Loop
• Stats Panel
• Dat.GUI Panel
• Object3D
• Object3D Hierarchy
• Threejs geometries
• Materials
• MeshBasicMaterial
• MeshNormalMaterial
• MeshLambertMaterial
• MeshPhongMaterial
• MeshStandardMaterial
• MeshPhysicalMaterial
• MeshMatcapMaterial
• MeshToonMaterial
• Specular Map
• Roughness and Metalness Maps
• Bumpmap
• Normalmap
• Displacement Map
• Material Repeat and Center
• Texture Mipmaps
• Custom Mipmaps
• Anistropy
• Lights
• Ambient Light
• Directional Light
• Hemisphere Light
• Point Light
• Spot Light
• Spot Light Shadow
• Directional Light Shadow
• Orbit Controls
• Trackball Controls
• Pointerlock Controls
• Drag Controls
• Transform Controls
• Using Multiple Controls in Same Scene
• OBJ Model Loader
• MTL Loader
• GLTF Loader
• DRACO Loader
• Textured GLTF
• FBX Loader
• FBX Animations
• GLTF Animations
• Custom GLTF Animations
• Raycaster
• Raycaster Collision Detection
• Raycaster Mouse Picking
• Raycaster Measurements
• Using tween.js
• Using tween.js and the THREE. AnimationMixer
• Vector3 Lerp
• Physics with Cannon.js
• The Cannon.js Debug Renderer
• Trimeshes, ConvexPolyhedrons and Compound Shapes
• Deploying to Production
• Setup a Webpack Production Configuration
• Host using GitHub Pages
• Host using GitLab Pages
• Host using an Nginx server
• Point a Domain Name
• Add SSL
• Server-Side Functionality with Nodejs and Express
• Socket.IO with Node.js, Express and Webpack
• Setup Nginx as a Reverse Proxy
• The Ballgame
• Converting JavaScript Threejs Examples to TypeScript Projects