Threejs and TypeScript

Learn Threejs, TypeScript and NodeJS to create interactive 3D content on the web.
Threejs and TypeScript
File Size :
15.50 GB
Total length :
9h 24m

Category

Instructor

Sean Bradley

Language

Last update

4/2023

Ratings

4.4/5

Threejs and TypeScript

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

Threejs and TypeScript

Requirements

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

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 Webpack and NodeJS.The course is in 5 main sections,Setting up the development environment and installing TypeScriptCreate 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.Install the Threejs Course Boilerplate, in case you didn’t manually create it in part 2.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.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. Thanks for taking part in my course, and I will see you there.Sean

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Setup Development Environment

Lecture 3 Install TypeScript

Lecture 4 Begin Creating the Three.js Project

Lecture 5 Add the Initial Scripts

Lecture 6 Setting up the WebPack Dev Server

Lecture 7 Importing Three.js Modules

Lecture 8 Install the Three.js Typescript Boilerplate

Lecture 9 Scene, Camera and Renderer

Lecture 10 Animation Loop

Lecture 11 Stats Panel

Lecture 12 Dat GUI Panel

Lecture 13 Object3D

Lecture 14 Object3D Hierarchy

Lecture 15 Geometries

Lecture 16 Material

Lecture 17 MeshBasicMaterial

Lecture 18 MeshNormalMaterial

Lecture 19 MeshLambertMaterial

Lecture 20 MeshPhongMaterial

Lecture 21 MeshStandardMaterial

Lecture 22 MeshPhysicalMaterial

Lecture 23 MeshMatcapMaterial

Lecture 24 MeshToonMaterial

Lecture 25 Specular Map

Lecture 26 Roughness and Metalness Maps

Lecture 27 Bumpmap

Lecture 28 Normalmap

Lecture 29 Displacement Map

Lecture 30 Material Repeat and Center

Lecture 31 Texture Mipmaps

Lecture 32 Custom Mipmaps

Lecture 33 Anisotropic Filtering

Lecture 34 Lights

Lecture 35 Ambient Light

Lecture 36 Directional Light

Lecture 37 Hemisphere Light

Lecture 38 Point Light

Lecture 39 Spot Light

Lecture 40 Spot Light Shadow

Lecture 41 Directional Light Shadow

Lecture 42 Orbit Controls

Lecture 43 Trackball Controls

Lecture 44 Pointerlock Controls

Lecture 45 Drag Controls

Lecture 46 Transform Controls

Lecture 47 Using Multiple Controls in the Same Scene

Lecture 48 OBJ Model Loader

Lecture 49 MTL Loader

Lecture 50 GLTF Loader

Lecture 51 DRACO Loader

Lecture 52 Textured GLTF

Lecture 53 FBX Loader

Lecture 54 FBX Animations

Lecture 55 GLTF Animations

Lecture 56 Custom GLTF Animations

Lecture 57 Raycaster

Lecture 58 Raycaster Collision Detection

Lecture 59 Raycaster Mouse Picking

Lecture 60 Raycaster Measurements

Lecture 61 Using tween.js

Lecture 62 Using tween.js and the THREE. AnimationMixer

Lecture 63 Vector3 Lerp

Lecture 64 Physics with Cannon.js

Lecture 65 The Cannon.js Debug Renderer

Lecture 66 Trimeshes, ConvexPolyhedrons and Compound Shapes

Lecture 67 Deploying to Production

Lecture 68 Setup a Webpack Production Configuration

Lecture 69 Host Using GitHub Pages

Lecture 70 Host Using GitLab Pages

Lecture 71 Host Using an Nginx server

Lecture 72 Point a Domain Name

Lecture 73 Add SSL

Lecture 74 Server-side functionality with Nodejs and Express

Lecture 75 Socket.IO with Node.js, Express and Webpack

Lecture 76 Setup Nginx as a Reverse Proxy

Lecture 77 The Ballgame

Lecture 78 Converting JavaScript Threejs Examples to TypeScript Projects

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

Course Information:

Udemy | English | 9h 24m | 15.50 GB
Created by: Sean Bradley

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top