Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Data Science
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-12 15:52:16
30-Day Money-Back Guarantee

This course includes:

  • 9 hours on-demand video
  • 10 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Programming Languages Three.JS

Three.js and TypeScript

Learn Threejs, TypeScript and NodeJS to create interactive 3D content on the web.
Bestseller
Rating: 4.6 out of 54.6 (213 ratings)
1,384 students
Created by Sean Bradley
Last updated 1/2021
English
English [Auto]
30-Day Money-Back Guarantee

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

Course content

1 section • 76 lectures • 8h 55m total length

  • Preview01:27
  • Setup Development Environment
    02:03
  • Install TypeScript
    00:35
  • Build Your First TypeScript File
    05:28
  • 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
    08:44
  • Module Specifiers Versus Relative Import References
    21:29
  • 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
  • Preview04:18
  • Preview03:52
  • 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
  • Preview02:09
  • 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
  • Custom GLTF Animations
    11: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
  • Converting JavaScript Threejs Examples to TypeScript Projects
    21:54

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

The course is in 4 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.

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


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

Featured review

Atul Meshram
Atul Meshram
31 courses
7 reviews
Rating: 5.0 out of 510 months ago
This is a perfect starter-kit for Three.JS and TypeScript is a cherry on the cake! This is what I was looking for in various other ThreeJS tutorials. Sean Bradley has focused most of the basic core components of Three.JS Especially the availed boilerplate is perfect for all kinds of Three.JS apps.

Instructor

Sean Bradley
Software and Networking Engineer for 20 Years
Sean Bradley
  • 4.5 Instructor Rating
  • 1,913 Reviews
  • 17,112 Students
  • 8 Courses

Hello, I'm Sean.

For over 20 years I have been an IT engineer building and managing real time, low latency, high availability, asynchronous, multi threaded, remotely managed, fully automated, monitored solutions in the education, aeronautical, banking, drone, gaming and telecommunications industries.

I have also created and written hundreds of Open Source GitHub Repositories, Medium Articles and YouTube video tutorials.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.