Three.js 101 Crash Course: Beginner's Guide to 3D Web Design (7 HOURS!)

Three.js 101 Crash Course: Beginner's Guide to 3D Web Design (7 HOURS!)

HomeZero To MasteryThree.js 101 Crash Course: Beginner's Guide to 3D Web Design (7 HOURS!)
Three.js 101 Crash Course: Beginner's Guide to 3D Web Design (7 HOURS!)
ChannelPublish DateThumbnail & View CountDownload Video
Channel AvatarPublish Date not found Thumbnail
0 Views
Dive into the world of 3D web development with our comprehensive 7-hour Three.js crash course.

Taught by industry expert Jesse Zhou, this course takes you from basics to advanced techniques, empowering you to create stunning 3D experiences on the web.

Once you've completed this crash course, you can continue learning by taking Jesse's complete Three.js bootcamp course. Whether you want to become a web developer, game developer, VR developer, or 3D artist, this course can help you stand out from the crowd and give you a key skill to achieve your career goals.

Full Three.js Bootcamp Course: https://zerotomastery.io/courses/learn-three-js/
Use code: YTTHREE10 to get 10% off (for life!)

Free HTML and CSS crash course for beginners: https://youtu.be/0kS3M8a6kP8
Three.js explained in 2 minutes: https://youtu.be/ZHZh6S9b6DY?si9IRf1d8OuDLds3Eo

Course Handbook: https://robust-samba-34f.notion.site/Three-js-Bootcamp-Handbook-60ab898ec8684ce1b45d916fdd82e4c5
‍ Github repository: https://github.com/enderh3art/ztm-threejs-bootcamp
Subscribe for more free tutorials and exclusive content: https://links.zerotomastery.io/youtube

Time stamp:

00:00 Introduction
02:13 Three.js examples
07:29 Wait a minute… what is Three.js?
16:25 Previous knowledge
19:54 Three.js documentation
22:58 Hacking the example
28:54 Three.js basics
36:57 Install Vite
42:30 Three.js setup
48:46 Scene
54:30 Camera
59:49 Renderers
1:04:47 Starter package
1:09:56 Field of view
1:14:01 Near and far
1:20:03 Orbit control
1:25:02 Render loop
1:32:53 Orthographic camera
1:39:05 Other controls
1:42:07 Resize
1:53:36 Antialiasing – The problem
1:56:00 Antialiasing – The solution
1:59:37 Antialiasing – The solution implementation
2:03:37 Starter package
2:04:42 Position change
2:12:03 Vector 3
2:19:56 Scale change
2:22:35 Scene hierarchy
2:29:08 Rotation – Part 1
2:31:10 Rotation – Part 2
2:45:53 Animating meshes – Part 1
2:48:04 Animating meshes – Part 2
2:52:35 Other animations
2:58:12 Introduction
3:02:55 Buffer geometry
3:15:43 Basic elements
3:22:57 Materials vs. textures
3:26:57 Material types
3:31:29 Mesh base material
3:47:05 Mesh Lambert and Mesh Phong materials
3:57:25 Mesh Standard and Mesh Physical Materials
4:07:16 Structure
4:18:25 Loading a texture
4:25:32 Repeating texture
4:36:06 Texture offset
4:40:03 UV maps – Part 1
4:45:13 UV mapping – part 2
4:50:31 PBR maps
5:00:03 Normal map
5:04:36 Elevation map
5:07:36 AO map
5:15:21 Put it all together!
5:19:34 Introduction
5:20:42 Planning our project
5:23:45 Add meshes
5:31:55 Planetary orbit
5:44:42 Planetary Array
5:49:48 Add materials
5:53:51 Automating mesh generation
6:07:21 Animation of the planetary array
6:20:01 Final touches!
6:30:34 Closing words

Who is this Three.js course for?

https://zerotomastery.io/courses/learn-three-js/

JavaScript developers who want to take their skills to the next level by creating immersive, interactive 3D browser experiences
Anyone who wants to gain a comprehensive and practical understanding of the Three.js JavaScript library
You want a step-by-step guide to learn programming with Three.js and get hired as a Three.js developer
Developers who want to delve into the world of 3D design
Students who are dissatisfied with their current progress because there are so many Three.js tutorials for beginners that don't go beyond the basics and don't give you any hands-on experience or skills you need to actually get hired
You want to learn Three.js from someone with practical experience

Zero To Mastery graduates now work at Google, Tesla, NVIDIA, Amazon, Apple, IBM, JP Morgan, Meta, NASA, Shopify and other top companies.

Many also work as top-notch freelancers, earning thousands of dollars while working from anywhere in the world.

Here are just a few of them: https://zerotomastery.io/testimonials

You can be.

Become one of the top 10% 3D developers https://zerotomastery.io/courses/learn-three-js/

#zerotomastery #threejs

Please take the opportunity to connect with your friends and family and share this video with them if you find it useful.