Use code YTTHREE10 for 10% OFF Jesse’s Full Three.js Bootcamp or a Zero To Mastery Academy membership, giving you access to this course and 100+ others! zerotomastery.io/courses/learn-three-js/
4:27:17 No need to remember the direction of rotation you can use the right hand rule for right handed coordinate system. So a positive rotation around X is from Y to Z hence a negative rotation moves Z to Y
The order of the vertices is counter clockwise unless you provide an index buffer. Your example works because you have a single triangle and so any order would work here. The order is important to calculate face normals etc.
Fantastic course. I love Three JS and your teaching style has massively helped my understanding of behind the scenes of Three JS. I have checked ZTM's website long before this crash course appeared here on YT. Unfortunately there is no option just to buy 1 course only. If there was and the full course was available for a one off payment I would gladly pay for it. I bought Bruno Simon's Three JS Journey course and simply love it. I'm getting the same buzz with your Three JS course. Any chance to purchase this course at ZTM as an individual course?
Hello, I like the way you are explaining stuff, excellent tutorial. I am interested if you are addressing, in your full course, how to implement the Three.js elements and animations with the other elements on the page? Thx
Hey, you can see everything Jesse covers in the complete Three.js bootcamp course by clicking the link below 👇 zerotomastery.io/courses/learn-three-js/
Is there a JS course you recommend taking before getting into this? I’m a complete beginner trying to understand how much I need to know before getting my hands into your tutorial. Thank you!
Yes of course! If you are brand new to Javascript, I recommend checking out our Complete Web Dev Course. It will teach you everything you need to know about full-stack development, including Javascript! zerotomastery.io/courses/coding-bootcamp/
We don't have a tutorial for Jesse's Ramen Portfolio in the course, however you will learn the principles and techniques needed to complete it yourself. That way you can confidently build any 3D project in the future. Hope this helped 😊
anyone who purchases the whole course pls let me know cause i want to know about the other topics they teach in this course also i am planning to purcahse 3js course so which one is better this one or the sheriyans 3Js course ? one more thing this tutorial is very helpfull for me to get the knowledge of fundamentail topics of 3Js thank you sir for this amazing course love form INDIA
real cool, well explained but hey, you really did not add many of the links you said you will through out the video (the camera and renderloop starter, the link to the threejs github package...) am I missing it?
Hello @ZeroToMastery, I am a product designer with knowledge of HTML and CSS. I would like to expand my skills to develop my designs without limitations, and I'm particularly interested in using 3D to enhance them. I’m considering learning JS and ThreeJS to achieve this, but I have little programming experience. Do you think learning JS and then ThreeJS is a good path for my goals? Should I also learn some 3D modeling?
Yes, learning JavaScript first, then moving on to Three.js, is a great path for adding 3D to your designs. You don’t need to master 3D modeling unless you want custom assets; you can use pre-made models with Three.js. Good luck!
Was working fine until about 1½ hours into the course, can anyone help with this error: [vite] error while updating dependencies: Error: Build failed with 3 errors: node_modules/three/examples/jsm/objects/SkyMesh.js:5:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial" node_modules/three/examples/jsm/objects/Water2Mesh.js:4:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial" node_modules/three/examples/jsm/objects/WaterMesh.js:4:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial"
@@ZeroToMastery Here is the complete error: 11:00:44 a.m. [vite] error while updating dependencies: Error: Build failed with 3 errors: node_modules/three/examples/jsm/objects/SkyMesh.js:5:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial" node_modules/three/examples/jsm/objects/Water2Mesh.js:4:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial" node_modules/three/examples/jsm/objects/WaterMesh.js:4:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial" at failureErrorWithLog (C:\MyDrive\Craft-Bilt\threejscourse\camera_and_renderloop_starter ode_modules\esbuild\lib\main.js:1472:15) at C:\MyDrive\Craft-Bilt\threejscourse\camera_and_renderloop_starter ode_modules\esbuild\lib\main.js:945:25 at C:\MyDrive\Craft-Bilt\threejscourse\camera_and_renderloop_starter ode_modules\esbuild\lib\main.js:1353:9 at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
I had issues with this one as well but found the solution in the tweakpane docs. Instead of addInput use addBinding and place the input in a object named PARAMS: const PARAMS = { shininess: 90, }; pane.addBinding(PARAMS, "shininess", { min: 0, max: 100, step: 1 });
![Node.js 101 Crash Course: Learn Node.js (6 HOURS!) + Build Your First Project [2025]](http://i.ytimg.com/vi/fUJ3ULyyA-Y/mqdefault.jpg)
![Node.js 101 Crash Course: Learn Node.js (6 HOURS!) + Build Your First Project [2025]](/img/tr.png)
Use code YTTHREE10 for 10% OFF Jesse’s Full Three.js Bootcamp or a Zero To Mastery Academy membership, giving you access to this course and 100+ others!
zerotomastery.io/courses/learn-three-js/
PS I encounter this problem in the mesh starter file.
Folks.🤓🤓🤓...this is all that you need for three.js
first ever detailed video on threejs, there is so much clutered video but this is proper , thank you for that
Glad it was helpful!
aaaand it's a crash course which is 6hr+ long. Also, just imagine how much time would take for the actual course
If you're having difficulties in first 2 hrs, work on your JS skills first. Mainly OOPs, window object and basic event handling.
4:27:17 No need to remember the direction of rotation you can use the right hand rule for right handed coordinate system. So a positive rotation around X is from Y to Z hence a negative rotation moves Z to Y
Nothing like a timestamp deep into the video to tell me this is gonna be good.
Thanks a lot for the video, I didn't know how to start at Three.js now it's clear and I really like it!
Glad it was helpful!
Great content bro , This is the only three js video that atleast clears the basics and has some projects
We appreciate that!
The order of the vertices is counter clockwise unless you provide an index buffer. Your example works because you have a single triangle and so any order would work here. The order is important to calculate face normals etc.
Finally a resource for threejs❤
Thank you for this. You are incredible at explaining how to use this library and I'm excited to work with it in my development
Glad it was helpful!
must needed video for three js❤❤
Hope you enjoyed it!
i was into learning CAD and threejs looks interesting for 3d models and gaming. thanks for the information
Happy to help!
We want blender zero to mastery video by jessi please. ❤❤❤❤
Wooowwww mind blowing 🤯
Wonderful Coarse for beginners I wish I can give more likes you deserve more than 100 likes per person
Thank You!
i think this is the best three.js tutorial on youtube ... by the way you really like to say actuall a lot huh!😅😅😅😅😅😅😅😅
Thanks 😅
Amazing course😊
Thanks! 😃
This is Lit🔥
Thank you, guys! realy cool!
Our pleasure!
wow, amazing course, wait the next videos
Excellent!!!!!!
46:52 npm install three
54:26 Adding scene
Best one waiting bro
Enjoy 🙂
Best course
This is Great....wow
It is so detailed.
Wauting fir next three js project
Fantastic course. I love Three JS and your teaching style has massively helped my understanding of behind the scenes of Three JS. I have checked ZTM's website long before this crash course appeared here on YT. Unfortunately there is no option just to buy 1 course only. If there was and the full course was available for a one off payment I would gladly pay for it. I bought Bruno Simon's Three JS Journey course and simply love it. I'm getting the same buzz with your Three JS course. Any chance to purchase this course at ZTM as an individual course?
Hey great news! The course is now available for purchase: zerotomastery.io/courses/learn-three-js/
Águila desde la cuna 😉🦅#clubamerica
Thank you
Hello, I like the way you are explaining stuff, excellent tutorial. I am interested if you are addressing, in your full course, how to implement the Three.js elements and animations with the other elements on the page? Thx
Hey, you can see everything Jesse covers in the complete Three.js bootcamp course by clicking the link below 👇
zerotomastery.io/courses/learn-three-js/
@@ZeroToMastery started the course, currently finishing shadows :D
@4:31:22 how can you move the object with the window as the mouse moves along with it, like a pan effect?How can I achieve it?
Very very nice tutorial. How to add orbit path line?
Is there a JS course you recommend taking before getting into this? I’m a complete beginner trying to understand how much I need to know before getting my hands into your tutorial. Thank you!
Yes of course! If you are brand new to Javascript, I recommend checking out our Complete Web Dev Course. It will teach you everything you need to know about full-stack development, including Javascript!
zerotomastery.io/courses/coding-bootcamp/
Great course. Just an FYI as a Mathematician I must correct your pronunciation of Euler. It is pronounced as Oiler not Youler.
this is good.. my question is if I join the course can I get there the full RAMEN portfolio tutorial there?
We don't have a tutorial for Jesse's Ramen Portfolio in the course, however you will learn the principles and techniques needed to complete it yourself.
That way you can confidently build any 3D project in the future. Hope this helped 😊
GREAT
where did the pane came from? 😂 I've even rewatched thinking i missed it lol
1:52:55 / 6:31:56
hey how did you add // to a bunch of command in one click?
anyone who purchases the whole course pls let me know cause i want to know about the other topics they teach in this course also i am planning to purcahse 3js course so which one is better this one or the sheriyans 3Js course ?
one more thing this tutorial is very helpfull for me to get the knowledge of fundamentail topics of 3Js thank you sir for this amazing course love form INDIA
Hey, you can check out the entire course curriculum by clicking the link below👇
zerotomastery.io/courses/learn-three-js/
@@ZeroToMastery thank you very much 😁😁 sir for the reply
Wow😊
real cool, well explained but hey, you really did not add many of the links you said you will through out the video (the camera and renderloop starter, the link to the threejs github package...) am I missing it?
You will find everything you need to complete this crash course in the description. Under the course guide and GitHub repository. 🙂
Trying to learn react three fiber.. wondering if this is essentially a prerequisite
Before jumping into React Three Fiber you need to have a solid foundation in React as well as Three.js
Hope this helps 🙂
Hello @ZeroToMastery,
I am a product designer with knowledge of HTML and CSS. I would like to expand my skills to develop my designs without limitations, and I'm particularly interested in using 3D to enhance them. I’m considering learning JS and ThreeJS to achieve this, but I have little programming experience. Do you think learning JS and then ThreeJS is a good path for my goals? Should I also learn some 3D modeling?
Yes, learning JavaScript first, then moving on to Three.js, is a great path for adding 3D to your designs. You don’t need to master 3D modeling unless you want custom assets; you can use pre-made models with Three.js.
Good luck!
Vgood🎉
Thanks
where can i find the starter file package?
In the description!
now we need a react three fiber
5:25:00
5:45:00
hey, i cant find the starter pack link, could someone please provide it to me
Hey, it's in the description under 'Course Guide' and 'Github Repository'. Hope this helpes
@@ZeroToMastery got it ! amazing course btw, helped a lot !
where is the starter pack mentioned in the video?
is it the github?
Everything you need to complete the crash course is in the course handbook and GitHub repository.
@@ZeroToMastery okay then I am about to complete the course thanks for the awesome content
6:15:26 how do you even comment like that!?
I love you
where is the starter pack link?
In the description! 🙂
@@ZeroToMastery I still can't find it
where to download the starter pack
Link in the description 🙂
is the starter pack in the github repository?
All the resources you will need for this crash course are in the course guide and GitHub repository, which can be found in the description!
Where is the starter pack zip?
In the description!
where is the zip file of starter pack???
In the description! 🙂
didn't you talk about raycasting?
Hii, Can you create ludo game using three js ?
Yes, totally possible!
@@ZeroToMasteryThank you.please, upload the video
getting issue with addInput
Uncaught TypeError: pane.addInput is not a function
i clone ur repo did npm i
ok pane.addBinding worked
Walter white:(jesse)someone cooked here😂
En español!!!!
Was working fine until about 1½ hours into the course, can anyone help with this error:
[vite] error while updating dependencies:
Error: Build failed with 3 errors:
node_modules/three/examples/jsm/objects/SkyMesh.js:5:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial"
node_modules/three/examples/jsm/objects/Water2Mesh.js:4:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial"
node_modules/three/examples/jsm/objects/WaterMesh.js:4:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial"
Hey, could you provide a timestamp to where you are finding this issue?
@@ZeroToMastery Here is the complete error:
11:00:44 a.m. [vite] error while updating dependencies:
Error: Build failed with 3 errors:
node_modules/three/examples/jsm/objects/SkyMesh.js:5:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial"
node_modules/three/examples/jsm/objects/Water2Mesh.js:4:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial"
node_modules/three/examples/jsm/objects/WaterMesh.js:4:1: ERROR: No matching export in "node_modules/three/build/three.module.js" for import "NodeMaterial"
at failureErrorWithLog (C:\MyDrive\Craft-Bilt\threejscourse\camera_and_renderloop_starter
ode_modules\esbuild\lib\main.js:1472:15)
at C:\MyDrive\Craft-Bilt\threejscourse\camera_and_renderloop_starter
ode_modules\esbuild\lib\main.js:945:25
at C:\MyDrive\Craft-Bilt\threejscourse\camera_and_renderloop_starter
ode_modules\esbuild\lib\main.js:1353:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
I don't know why I can not comment.
We see you! 🙂
🤣 Why you would do this to such a nice car XD
😅
pane.addInput - show some error how to fix it?
its pane.addBinding now!
I had issues with this one as well but found the solution in the tweakpane docs.
Instead of addInput use addBinding and place the input in a object named PARAMS:
const PARAMS = {
shininess: 90,
};
pane.addBinding(PARAMS, "shininess", { min: 0, max: 100, step: 1 });