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

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 will guide you from the basics to advanced techniques, empowering you to create breathtaking 3D experiences on the web. Once you complete this crash course, keep learning by taking Jesse's complete Three.js Bootcamp Course. Whether you aim to become a Web Developer, Game Developer, VR Developer, or 3D Artist, this course can help you stand out and give you a key skill to achieving 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 & CSS Crash Course For Beginners: https://youtu.be/0kS3M8a6kP8 🕕 Three.js Explained in 2 Minutes: https://youtu.be/ZHZh6S9b6DY?si=9IRf1d8OuDLds3Eo ========= 📚 Course Guide: 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 ========= ⏰ Timestamps: 00:00 Introduction 02:13 Three.js Examples 07:29 Wait...What is Three.js? 16:25 Prerequisite Knowledge 19:54 Three.js Documentation 22:58 Hacking the Example 28:54 Three.js Fundamentals 36:57 Installing Vite 42:30 Three.js Setup 48:46 Scene 54:30 Camera 59:49 Renderer 1:04:47 Starter Pack 1:09:56 FOV 1:14:01 Near and Far 1:20:03 Orbit Controls 1:25:02 Renderloop 1:32:53 Orthographic Camera 1:39:05 Other Controls 1:42:07 Resizing 1:53:36 Antialiasing - The Problem 1:56:00 Antialiasing - The Solution 1:59:37 Antialiasing - The Solution Implementation 2:03:37 Starter Pack 2:04:42 Transforming Position 2:12:03 Vector 3 2:19:56 Transforming Scale 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 Primitives 3:22:57 Materials vs. Textures 3:26:57 Material Types 3:31:29 Mesh Basic Material 3:47:05 Mesh Lambert and Mesh Phong Materials 3:57:25 Mesh Standard and Mesh Physical Materials 4:07:16 Setup 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 Height Map 5:07:36 AO Map 5:15:21 Putting it All Together! 5:19:34 Introduction 5:20:42 Planning Our Project 5:23:45 Adding Meshes 5:31:55 Planetary Orbit 5:44:42 Planet Array 5:49:48 Adding Materials 5:53:51 Automating Mesh Generation 6:07:21 Animating the Planet Array 6:20:01 Final Touches! 6:30:34 Final 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 building immersive, interactive 3D browser experiences ◾ Anyone who wants to gain a complete and practical understanding of the Three.js JavaScript library ◾ You want a step-by-step guide to learn how to code using Three.js and get hired as a Three.js Developer ◾ Developers that want to dive into the world of 3D design ◾ Students who are frustrated with their current progress with all of the beginner Three.js tutorials out there that don't go beyond the basics and don't give you real-world practice or skills you need to actually get hired ◾ You want to learn Three.js from someone with real-world experience ========= Graduates of Zero To Mastery are now working at Google, Tesla, NVIDIA, Amazon, Apple, IBM, JP Morgan, Meta, NASA, Shopify + other top companies. Many are also working as top-rated Freelancers getting paid $1,000s while working remotely around the world. 🎓 Here are just a few of them: https://zerotomastery.io/testimonials This can be you. ========= Become a Top 10% 3D Developer 👉 https://zerotomastery.io/courses/learn-three-js/ #zerotomastery #threejs
169, 777   |   1 год. назад  |   6, 099 - 0
 

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

Скачайте изображение (превью) выбрав качество


320x180 480x360 640x480 1280x720

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 will guide you from the basics to advanced techniques, empowering you to create breathtaking 3D experiences on the web.

Once you complete this crash course, keep learning by taking Jesse's complete Three.js Bootcamp Course. Whether you aim to become a Web Developer, Game Developer, VR Developer, or 3D Artist, this course can help you stand out and give you a key skill to achieving your career goals.

🎨 Full Three.js Bootcamp Course:
🤑 Use code: YTTHREE10 to get 10% OFF (for life!)

=========

💻 Free HTML & CSS Crash Course For Beginners:
🕕 Three.js Explained in 2 Minutes:

=========

📚 Course Guide:
👨‍💻 Github Repository:
👍 Subscribe for more free tutorials and exclusive content:

=========

⏰ Timestamps:

00:00 Introduction
02:13 Three.js Examples
07:29 Wait...What is Three.js?
16:25 Prerequisite Knowledge
19:54 Three.js Documentation
22:58 Hacking the Example
28:54 Three.js Fundamentals
36:57 Installing Vite
42:30 Three.js Setup
48:46 Scene
54:30 Camera
59:49 Renderer
1:04:47 Starter Pack
1:09:56 FOV
1:14:01 Near and Far
1:20:03 Orbit Controls
1:25:02 Renderloop
1:32:53 Orthographic Camera
1:39:05 Other Controls
1:42:07 Resizing
1:53:36 Antialiasing - The Problem
1:56:00 Antialiasing - The Solution
1:59:37 Antialiasing - The Solution Implementation
2:03:37 Starter Pack
2:04:42 Transforming Position
2:12:03 Vector 3
2:19:56 Transforming Scale
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 Primitives
3:22:57 Materials vs. Textures
3:26:57 Material Types
3:31:29 Mesh Basic Material
3:47:05 Mesh Lambert and Mesh Phong Materials
3:57:25 Mesh Standard and Mesh Physical Materials
4:07:16 Setup
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 Height Map
5:07:36 AO Map
5:15:21 Putting it All Together!
5:19:34 Introduction
5:20:42 Planning Our Project
5:23:45 Adding Meshes
5:31:55 Planetary Orbit
5:44:42 Planet Array
5:49:48 Adding Materials
5:53:51 Automating Mesh Generation
6:07:21 Animating the Planet Array
6:20:01 Final Touches!
6:30:34 Final Words

=========

💥 Who is this Three.js course for?



◾ JavaScript Developers who want to take their skills to the next level by building immersive, interactive 3D browser experiences
◾ Anyone who wants to gain a complete and practical understanding of the Three.js JavaScript library
◾ You want a step-by-step guide to learn how to code using Three.js and get hired as a Three.js Developer
◾ Developers that want to dive into the world of 3D design
◾ Students who are frustrated with their current progress with all of the beginner Three.js tutorials out there that don't go beyond the basics and don't give you real-world practice or skills you need to actually get hired
◾ You want to learn Three.js from someone with real-world experience


=========

Graduates of Zero To Mastery are now working at Google, Tesla, NVIDIA, Amazon, Apple, IBM, JP Morgan, Meta, NASA, Shopify + other top companies.

Many are also working as top-rated Freelancers getting paid $1,000s while working remotely around the world.

🎓 Here are just a few of them:

This can be you.

=========

Become a Top 10% 3D Developer 👉

#zerotomastery #threejs


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!)" передвинте ползунок вправо



Покажите вашим друзьям, добавьте в соцсети

Ссылка на страницу с видео:

 

Ссылка HTML на страницу с видео:

 

Код для вставки плеера:


  • Комментарии

Комментарии ФБ


Уважаемые друзья!

Источником всего видеоконтента, в том числе проигрывающегося на страницах ресурса ruslar.me, является сторонний видео ресурс, а именно общедоступный видеохостинг YouTube.com, предоставляющий открытый доступ к своему видеоконтенту (используя открытую и общедоступную технологию video API3 youtube.com)!

Проблемы с авторскими правами

Если вам принадлежат авторские права на данное видео, которое было загружено без вашего согласия на YouTube.com, перейдите на страницу этого видео сайта YouTube.com , нажмите на ссылку под проигрывателем Ещё -> "Пожаловаться" -> "Нарушение моих прав" и в выпадающем меню, выбирите, что именно нарушается и нажмите кнопку "Отправить".



Неприемлемый контент

Чтобы сообщить о неприемлемом видео, перейдите на YouTube, нажмите на ссылку под проигрывателем Ещё -> "Пожаловаться" и выберите в "Сообщить о нарушении" что именно вас не устраивает в этом видео. Подробнее о наших правилах читайте в Условиях использования.