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/
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?
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 😊
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/
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
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.
Great content bro , This is the only three js video that atleast clears the basics and has some projects
We appreciate that!
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!
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!
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.
must needed video for three js❤❤
Hope you enjoyed it!
We want blender zero to mastery video by jessi please. ❤❤❤❤
Finally a resource for threejs❤
i was into learning CAD and threejs looks interesting for 3d models and gaming. thanks for the information
Happy to help!
Wauting fir next three js project
@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?
Thank you, guys! realy cool!
Our pleasure!
Wonderful Coarse for beginners I wish I can give more likes you deserve more than 100 likes per person
Thank You!
46:52 npm install three
54:26 Adding scene
Amazing course😊
Thanks! 😃
Wooowwww mind blowing 🤯
wow, amazing course, wait the next videos
Excellent!!!!!!
i think this is the best three.js tutorial on youtube ... by the way you really like to say actuall a lot huh!😅😅😅😅😅😅😅😅
Thanks 😅
This is Lit🔥
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/
Best one waiting bro
Enjoy 🙂
It is so detailed.
This is Great....wow
Best 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/
@@ZeroToMastery started the course, currently finishing shadows :D
Thank you
Águila desde la cuna 😉🦅#clubamerica
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. 🙂
If you're having difficulties in first 2 hrs, work on your JS skills first. Mainly OOPs, window object and basic event handling.
Great course. Just an FYI as a Mathematician I must correct your pronunciation of Euler. It is pronounced as Oiler not Youler.
hey how did you add // to a bunch of command in one click?
Very very nice tutorial. How to add orbit path line?
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 😊
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 !
GREAT
Wow😊
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 🙂
1:52:55 / 6:31:56
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
now we need a react three fiber
where is the starter pack link?
In the description! 🙂
@@ZeroToMastery I still can't find 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!
getting issue with addInput
Uncaught TypeError: pane.addInput is not a function
i clone ur repo did npm i
ok pane.addBinding worked
Vgood🎉
Thanks
Where is the starter pack zip?
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 zip file of starter pack???
In the description! 🙂
where to download the starter pack
Link in the description 🙂
5:25:00
5:45:00
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 love you
Hii, Can you create ludo game using three js ?
Yes, totally possible!
@@ZeroToMasteryThank you.please, upload the video
didn't you talk about raycasting?
I don't know why I can not comment.
We see you! 🙂
En español!!!!
Walter white:(jesse)someone cooked here😂
🤣 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 });