lrsorrenti / three-js

Three JS Learning Course by Sean Bradley

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,

1. Setting up the development environment and installing TypeScript

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

3. Install the Threejs Course Boilerplate, in case you didn't manually create it in part 2.

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

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

What you’ll learn:

• Learn the Basics of Threejs with many emonstrations 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

Are there any course requirements or prerequisites?

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

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