Three.js and TypeScript | Sean Bradley | Skillshare

Three.js and TypeScript

Sean Bradley, Course Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
74 Lessons (8h 19m)
    • 1. Threejs and TypeScript Introduction

      1:54
    • 2. How to do this course

      1:27
    • 3. Setup Development Environment

      2:03
    • 4. Install TypeScript

      0:35
    • 5. Build Your First TypeScript File

      5:28
    • 6. Type Annotations

      4:21
    • 7. Interfaces and Type Declarations

      7:43
    • 8. Classes

      4:16
    • 9. Run it in the Browser

      1:45
    • 10. Begin Creating the Three.js Project

      4:07
    • 11. Add the Initial Scripts

      2:58
    • 12. Server Side Dependency Imports

      7:51
    • 13. Client Side Dependency Imports

      8:56
    • 14. Importing Three.js Modules

      4:59
    • 15. TSC Watch, Nodemon and Concurrently

      8:09
    • 16. Install the Three.js Typescript Boilerplate

      2:02
    • 17. Scene, Camera and Renderer

      17:42
    • 18. Animation Loop

      9:20
    • 19. Stats Panel

      6:44
    • 20. Threejs dat gui

      7:54
    • 21. Object3D

      7:37
    • 22. Threejs geometries

      15:44
    • 23. Materials

      11:25
    • 24. MeshBasicMaterial

      10:02
    • 25. MeshNormalMaterial

      3:05
    • 26. MeshLambertMaterial

      4:10
    • 27. MeshPhongMaterial

      3:17
    • 28. MeshStandardMaterial

      3:17
    • 29. MeshPhysicalMaterial

      2:36
    • 30. MeshMatcapMaterial

      3:26
    • 31. MeshToonMaterial

      4:11
    • 32. Specular Map

      4:56
    • 33. Roughness and Metalness Maps

      1:37
    • 34. Bump Map

      1:58
    • 35. Displacement Map

      4:18
    • 36. Material Repeat and Center

      3:52
    • 37. Texture Mipmaps

      6:09
    • 38. Custom Mipmaps

      2:46
    • 39. Anistropy

      2:16
    • 40. Lights

      1:09
    • 41. Ambient Light

      2:39
    • 42. Directional Light

      3:55
    • 43. Hemisphere Light

      1:55
    • 44. Point Light

      4:04
    • 45. Spot Light

      2:09
    • 46. Spot Light Shadow

      5:55
    • 47. Directional Light Shadow

      2:29
    • 48. Orbit Controls

      10:14
    • 49. Trackball Controls

      5:05
    • 50. Pointerlock Controls

      5:53
    • 51. Drag Controls

      3:12
    • 52. Transform Controls

      2:22
    • 53. Using Multiple Controls in Same Scene

      3:40
    • 54. OBJ Model Loader

      10:52
    • 55. MTL Loader

      8:11
    • 56. GLTF Loader

      12:30
    • 57. DRACO Loader

      4:54
    • 58. FBX Loader

      8:17
    • 59. FBX Animations

      14:51
    • 60. Threejs raycaster

      24:39
    • 61. Using tween.js

      15:20
    • 62. Using tween.js and the THREE. AnimationMixer

      18:23
    • 63. Physics with Cannon.js

      21:11
    • 64. The Cannon.js Debug Renderer

      18:30
    • 65. ConvexPolyhedrons and Compound Shapes

      19:00
    • 66. Deploying to Production

      3:19
    • 67. Create the Start Script

      3:20
    • 68. Provision a Cloud Server for Production

      2:47
    • 69. Deploy Files to the Server

      5:33
    • 70. Start the Games on the server

      6:10
    • 71. Install Nginx Proxy

      8:53
    • 72. Point a Domain Name

      2:29
    • 73. Add SSL

      6:18
    • 74. Converting JavaScript Threejs Examples to TypeScript Projects

      21:54
12 students are watching this class

About This Class

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 then by doing an optional TypeScript basics course for those who've never seen TypeScript before.

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