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