Three.js and TypeScript

About Course

Welcome to my course on Three.js and Typescript.

Three.js is a JavaScript library that allows developers to create exciting and very visual interactive 3D content on the internet.

TypeScript introduces static type checking, which means you can explicitly define the types of variables, function parameters, and return values. This catches potential errors during development, making your code more robust and reliable.

TypeScript also integrates well with modern IDEs and offers intelligent code hinting and autocompletion.

Threejs has become a hugely valuable resource on the internet and provides millions of possibilities, however many new learners struggle in their early stages while trying to de-cypher the huge amount of resources on the internet.

So this is where this course will help you. It will guide you first with the essential basics of using Threejs and its related addons library, and as the course progresses, each now concept will build on the previous, and become increasingly more sophisticated, so that you understand the problem that each new concept was designed to solve.

So, at the end, you would have covered many of the requirements to understand how to build your own Threejs projects and also understand the official examples better. This is so you can confidently continue on your own to build much more complex applications in the future.

All the code demonstrated in the videos, is provided in this accompanying documentation, that you can access for free online, so that you can easily copy and paste and participate alongside the videos.

So, if you know that you like coding, you like seeing it work for yourself, and you like to experiment, and have millions of ideas that you want to explore, then this course is for you.

There is much to learn, but in the end you would have developed the techniques required to build your own Threejs projects and participate more effectively in the 3D developer community.

Thanks for taking part in my course, and I hope to see you there.

Sean

Learn the Basics of Threejs with many demonstrations 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 the VIte bundler 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, Dat GUI and lil-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, Phong, Standard, Physical and other materials
Learn about PBR Roughness and Metalness
Learn about lighting using the Ambient, Directional, 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 loaders such as the GLTF, DRACO, OBJ, Texture, RGBE and more
Import third party glTF/glB animations
Animate using Lerp, JEasings and the Animation Mixer
Use Raycaster and how to use it for mouse picking 3D objects in the scene,
Physics with Rapier
The Rapier Debug Renderer
Understanding Shapes for Collision Detection
Provision, Deploy and Start our Threejs Projects to a Production server
Matching Blender Lighting and Environment Maps
Install Nginx Proxy, Point a Domain Name and Install SSL
And many more very useful examples of Threejs

Course Content

1 – Introduction

001 – Introduction.mp4

00:00
002 – Setup Development Environment.mp4

00:00
003 – Install TypeScript.mp4

00:00
004 – Begin Creating the Threejs Project.mp4

00:00
005 – Add the Initial Scripts.mp4

00:00
006 – Setting up the WebPack Dev Server.mp4

00:00
007 – Importing Threejs Modules.mp4

00:00
008 – Install the Threejs Typescript Boilerplate.mp4

00:00
009 – Scene Camera and Renderer.mp4

00:00
010 – Animation Loop.mp4

00:00
011 – Stats Panel.mp4

00:00
012 – Dat GUI Panel.mp4

00:00
013 – Object3D.mp4

00:00
014 – Object3D Hierarchy.mp4

00:00
015 – Geometries.mp4

00:00
016 – Material.mp4

00:00
017 – MeshBasicMaterial.mp4

00:00
018 – MeshNormalMaterial.mp4

00:00
019 – MeshLambertMaterial.mp4

00:00
020 – MeshPhongMaterial.mp4

00:00
021 – MeshStandardMaterial.mp4

00:00
022 – MeshPhysicalMaterial.mp4

00:00
023 – MeshMatcapMaterial English.srt

00:00
024 – MeshToonMaterial.mp4

00:00
025 – Specular Map.mp4

00:00
026 – Roughness and Metalness Maps.mp4

00:00
027 – Bumpmap.mp4

00:00
028 – Normalmap.mp4

00:00
029 – Displacement Map.mp4

00:00
030 – Material Repeat and Center.mp4

00:00
031 – Texture Mipmaps.mp4

00:00
032 – Custom Mipmaps.mp4

00:00
033 – Anisotropic Filtering.mp4

00:00
034 – Lights.mp4

00:00
035 – Ambient Light.mp4

00:00
036 – Directional Light.mp4

00:00
037 – Hemisphere Light.mp4

00:00
038 – Point Light.mp4

00:00
039 – Spot Light.mp4

00:00
040 – Spot Light Shadow.mp4

00:00
041 – Directional Light Shadow.mp4

00:00
042 – Orbit Controls.mp4

00:00
043 – Trackball Controls.mp4

00:00
044 – Pointerlock Controls.mp4

00:00
045 – Drag Controls.mp4

00:00
046 – Transform Controls.mp4

00:00
047 – Using Multiple Controls in the Same Scene.mp4

00:00
048 – OBJ Model Loader.mp4

00:00
049 – MTL Loader.mp4

00:00
050 – GLTF Loader.mp4

00:00
051 – DRACO Loader.mp4

00:00
052 – Textured GLTF.mp4

00:00
053 – FBX Loader.mp4

00:00
054 – FBX Animations.mp4

00:00
055 – GLTF Animations.mp4

00:00
056 – Custom GLTF Animations.mp4

00:00
057 – Raycaster.mp4

00:00
058 – Raycaster Collision Detection.mp4

00:00
059 – Raycaster Mouse Picking.mp4

00:00
060 – Raycaster Measurements.mp4

00:00
061 – Using tweenjs.mp4

00:00
062 – Using tweenjs and the THREE AnimationMixer.mp4

00:00
063 – Vector3 Lerp.mp4

00:00
064 – Physics with Cannonjs.mp4

00:00
065 – The Cannonjs Debug Renderer.mp4

00:00
066 – Trimeshes ConvexPolyhedrons and Compound Shapes.mp4

00:00
067 – Deploying to Production.mp4

00:00
068 – Setup a Webpack Production Configuration.mp4

00:00
069 – Host Using GitHub Pages.mp4

00:00
070 – Host Using GitLab Pages.mp4

00:00
071 – Host Using an Nginx server.mp4

00:00
072 – Point a Domain Name.mp4

00:00
073 – Add SSL.mp4

00:00
074 – Serverside functionality with Nodejs and Express.mp4

00:00
075 – SocketIO with Nodejs Express and Webpack.mp4

00:00
076 – Setup Nginx as a Reverse Proxy.mp4

00:00
077 – The Ballgame.mp4

00:00
078 – Converting JavaScript Threejs Examples to TypeScript Projects.mp4

00:00

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

1 – Introduction

001 – Introduction.mp4

002 – Setup Development Environment.mp4

003 – Install TypeScript.mp4

004 – Begin Creating the Threejs Project.mp4

005 – Add the Initial Scripts.mp4

006 – Setting up the WebPack Dev Server.mp4

007 – Importing Threejs Modules.mp4

008 – Install the Threejs Typescript Boilerplate.mp4

009 – Scene Camera and Renderer.mp4

010 – Animation Loop.mp4

011 – Stats Panel.mp4

012 – Dat GUI Panel.mp4

013 – Object3D.mp4

014 – Object3D Hierarchy.mp4

015 – Geometries.mp4

016 – Material.mp4

017 – MeshBasicMaterial.mp4

018 – MeshNormalMaterial.mp4

019 – MeshLambertMaterial.mp4

020 – MeshPhongMaterial.mp4

021 – MeshStandardMaterial.mp4

022 – MeshPhysicalMaterial.mp4

023 – MeshMatcapMaterial English.srt

024 – MeshToonMaterial.mp4

025 – Specular Map.mp4

026 – Roughness and Metalness Maps.mp4

027 – Bumpmap.mp4

028 – Normalmap.mp4

029 – Displacement Map.mp4

030 – Material Repeat and Center.mp4

031 – Texture Mipmaps.mp4

032 – Custom Mipmaps.mp4

033 – Anisotropic Filtering.mp4

034 – Lights.mp4

035 – Ambient Light.mp4

036 – Directional Light.mp4

037 – Hemisphere Light.mp4

038 – Point Light.mp4

039 – Spot Light.mp4

040 – Spot Light Shadow.mp4

041 – Directional Light Shadow.mp4

042 – Orbit Controls.mp4

043 – Trackball Controls.mp4

044 – Pointerlock Controls.mp4

045 – Drag Controls.mp4

046 – Transform Controls.mp4

047 – Using Multiple Controls in the Same Scene.mp4

048 – OBJ Model Loader.mp4

049 – MTL Loader.mp4

050 – GLTF Loader.mp4

051 – DRACO Loader.mp4

052 – Textured GLTF.mp4

053 – FBX Loader.mp4

054 – FBX Animations.mp4

055 – GLTF Animations.mp4

056 – Custom GLTF Animations.mp4

057 – Raycaster.mp4

058 – Raycaster Collision Detection.mp4

059 – Raycaster Mouse Picking.mp4

060 – Raycaster Measurements.mp4

061 – Using tweenjs.mp4

062 – Using tweenjs and the THREE AnimationMixer.mp4

063 – Vector3 Lerp.mp4

064 – Physics with Cannonjs.mp4

065 – The Cannonjs Debug Renderer.mp4

066 – Trimeshes ConvexPolyhedrons and Compound Shapes.mp4

067 – Deploying to Production.mp4

068 – Setup a Webpack Production Configuration.mp4

069 – Host Using GitHub Pages.mp4

070 – Host Using GitLab Pages.mp4

071 – Host Using an Nginx server.mp4

072 – Point a Domain Name.mp4

073 – Add SSL.mp4

074 – Serverside functionality with Nodejs and Express.mp4

075 – SocketIO with Nodejs Express and Webpack.mp4

076 – Setup Nginx as a Reverse Proxy.mp4