Three.js and TypeScript

Three.js and TypeScript

https://www.skillshare.com/classes/Three.js-and-TypeScript/160295947/projects

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 the Object3d base class, with its Rotation, Position and Scale transformation matrices,

We learn about the inbuilt Three.js geometries such as the Box, Sphere, Icosahedron, Plane, TorusKnot many more,

We learn about the Materials such as the Basic, Normal, Lambert, Phong, Standard, Physical, Matcap, Toon, Shader and Depth,

We learn about Specular, Roughness and Metalness maps,

We learn about Bumpmaps and Displacement maps,

We learn about manipulating UV coordinates to affect the appearance of the materials and displacement maps,

We learn about lighting such at the Ambient, Directional, Hemisphere, Point and Spot Lights,

We learn about Shadows, and how to achieve perspective verses orthographic shadow affects,

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.

---------------------

Project Description

All lessons have a corresponding page I've created, that you can access for free at https://sbcode.net/threejs



All code additions are outlined and highlighted in the above documentation link and can be easily copied and pasted into your own development environment. You should watch the lesson in conjunction with the related page.



There are 4 main sections in this course,



Set up the Development Environment and Install TypeScript

Do a quick Introductory Course on TypeScript suitable for Beginners, which is optional and useful only if you've never done TypeScript before.

Create the Three.js master project template with the client HTML and the NodeJS server that we will use for all the examples in the course.

Install the Threejs Course Boilerplate (If you didn't already create it in part 3) and continue with main course content with demonstrations and code examples.

Since this course is written in TypeScript, sections 2 and 3 contain very useful information that will help you to understand the additional TypeScript syntax and concepts I use throughout this course much better and make your IDE a much more advanced tool for quickly writing robust and type safe Threejs code.



Each lesson, introduces a new concept building on from the last so be sure not to skip lessons.



You are encouraged to experiment after each lesson, by changing parameters, adding and/or deleting functionality to understand the threejs concepts better.



At the end of the course, you will have your own ideas on what you'd like to see as far as design or extra functionality,



If you create an original game or animation, I am absolutely interested in seeing it, so please post your screengrabs, or links.



Attached Resource Files



Extract these zips into you projects ./dist/client/img folder



material-textures.zip contains assets used in the MeshBasicMaterial video

matcap-textures.zip contains assets used in the MeshMatcapMaterieal video

gradientMaps.zip contains assets used in the MeshToonMaterial Video

material-textures2.zip contains assets used in the Specular Map video

material-textures3.zip contains assets used in the Bump Map video

material-textures4.zip contains assets used in the Displacement Map video

Extract these zips into you projects ./dist/client/models folder



models1.zip contains assets used in the OBJ Model Loader video

models2.zip contains assets used in the MTL Loader video

models3.zip contains assets used in the GLTF Loader Video

models4.zip contains assets used in the DRACO Loader Video