❤️mann! I have already bought Bruno's course, but it is too big to cover in less time.. I really wanted you or Traversy Media to pick this up!! Thanks a tonn for starting. Keep them coming!
I was looking for a course on this thanks, does he cover displacement mapping for image transitions? Good job explaining the essential for a project too.
@@krupeshanadkat635 I've just finished Bruno's course, take your time and alternate between videos and text transcripts. It's definitely worth the effort!
This is so awesome, thank you so much! Just a note to anyone following along, I found a bit of a confusing error: The section between 43:23 and 48:37 should have been removed (he codes it correctly after) -- looks mistake in the edit. To add animate START HERE: 48:37 (don't use the code at 43:23) Only found out after wasn't rendering and couldn't figure out why...
Man, this made me feel like I was dreaming or could not focus!😂 Finally, after completing the tutorial, I came to comment and check and found yours; thanks, man! I was so confused about what had happened there! For a moment, I wondered if I had mistakenly rewound the video!😂 Took me minutes to figure it out!😂
Gary, thanks for the nice tutorial. I remember when I was a beginner in JS and I decided to watch a couple of your videos about animations, since that moment I become better every day.
For anyone running into problems loading their normal map around 26:00, despite their code being correct; just import the normal map into your file, and then pass it through as a variable... e.g.: import NormalMap from "./textures/NormalMap.png"; const textureLoader = new THREE.TextureLoader(); const normalTexture = textureLoader.load(NormalMap);
Wow, I started your other newbie Three.js video from 2019 and got 10 minutes in when I had to break. When I got back you have a whole new video for 2021 up. Such luxury!
Thanks Simon, I've been looking for the right tutorials and training for three.js and I was able to use your code to get a discount. Much appreciated. Thanks for this video!
That was why I watched this course! When he mentioned that you cannot build games with three.js I was like "dangit, how did that car guy do it then" haha
Vanilla would be if you implemented this all using pure webgl in the canvas element, including all 3d model parsing, vertex position determination, etc etc stuff
I've modeling skill and also complete fullstack developer role. start with ruby and try learn deeply to js after metaprogramming. This time, Three js give me biggest change to increase my power of creativity into the next level of Website art. Thank you! I've subscribe you because your explanation are completely easy to understand.
Thank you so much for this tutorial and your other tutorials as well. Your tutorials have definitely given me a push to the right direction and have helped me understand three JS a lot more. Very intuitive and clear tuts.🙏🏽
wow the website with Bruno's course looks amazing. Very well organized information. Wish you success with sales (which is very likely looking at the content)
I’m enjoying this video and learning a lot! Thank you! Around 46:12 you have little editing snafu I think. It repeats a section about the “mousemove event listener”. Unless I’m trippin...you might want to edit that part out. Thanks again!
At about 55:55 (right before the phone rings) you added "sphere.position.z += .5 * (targetY - sphere.rotation.x)" inside of 'const tick'. When I do this it just fires with each tick, so it just flies off the screen almost immediately. How did you make it respond to the mouse movements? What did I miss? (And is there a 'final' version of the code that we could check against? Everything else is looking good.)
instead of doing weird second body css style in 54:06 we can body { overflow-x: hidden; } add overflow-x: hidden; to first block and place html { max-width: 100%; } in styles
I wanted to look at it for months, but was discouraged because of the time I would need to put in because of the trial and error. Definitely looking forward to the playlist!
i realized many people are having an issue with the texture loader , to solve this kindly change this textureLoader to this TextureLoader in all references, finally make sure you use this material.normalMap= normalTexture;. that should solve the issue.
on 30:10 maybe someone will have a problem like mine where i cannot make gui work properly my solution: In "//Debug" change "const gui" to "var gui" it should help
Watched this vid yesterday and decided to go through the course. You were complaining about THREE being in all caps and the camel case methods. Js methods has always been camel case and bruno very clearly mentioned that we can keep whatever variable we want in place of THREE. I am using T for practice purpose. I hope it helps people having difficulty with it. Just change the import statement.
When i try to load the page without live server the normalmap is not working. The sphere is rotating and the interactions are working too but the normalmap is not. Did anybody else have the same problem ?
Im having a lot of issues with this proyect. The sphere wasn't showing up, and then watching the documentation I realized I had to give values to the phiLength and the thetalength of the geometry, which is not specified in this tutorial. I can't get the light to work either, so Ill try to fix that next. I think it must be because of a different version of the library.
@@XbattlepopeX Did you figure it out? I notice theres no way his worked based on the path he shows in the video - the image is at path static/textures/normalmap.png but he types only texture/normalmap.png - mine wont load either actually everything breaks at this point and its killing me
i realized many people are having an issue with the texture loader , to solve this kindly change this textureLoader to this TextureLoader in all references, finally make sure you use this material.normalMap= normalTexture;. that should solve the issue.
I need help! Everything works just fine until i try to build it as an HTML file. I use npm run build for that. My normal map is not working anymore and it looks weird!!
It has to do with the fact that your trying to run the HTML file locally. Accessing your local file system gets blocked by your browser's CORS policy. Instead, using a local web server like Express should solve it.
Need HELP this is my error "npm: The term 'npm' is not recognized as a name of a cmdlet, function, script file, or executable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again."
Do I need to know a bunch of coding to jump into three.js? I know a bit of HTML, CSS, and C++ but only the super basic stuff. Never actually built much more than the generic stuff like lists and calculators.
Excited to learn more Three.js? Me too. Look out for more videos soon!
❤️mann! I have already bought Bruno's course, but it is too big to cover in less time.. I really wanted you or Traversy Media to pick this up!! Thanks a tonn for starting. Keep them coming!
I was looking for a course on this thanks, does he cover displacement mapping for image transitions? Good job explaining the essential for a project too.
awesome stuff! waiting for 1000 more
@@krupeshanadkat635 I've just finished Bruno's course, take your time and alternate between videos and text transcripts. It's definitely worth the effort!
can't wait 😍😍😍😍😍😍
This is so awesome, thank you so much!
Just a note to anyone following along, I found a bit of a confusing error:
The section between 43:23 and 48:37 should have been removed (he codes it correctly after) -- looks mistake in the edit.
To add animate START HERE: 48:37 (don't use the code at 43:23)
Only found out after wasn't rendering and couldn't figure out why...
Terimakasih 😊
Hey there, i just cant find the error. I cant figure the correct code
i think that the right code starts at 46:14
yeah, I thought I was having a deja vu :D
Man, this made me feel like I was dreaming or could not focus!😂 Finally, after completing the tutorial, I came to comment and check and found yours; thanks, man! I was so confused about what had happened there! For a moment, I wondered if I had mistakenly rewound the video!😂 Took me minutes to figure it out!😂
Gary, thanks for the nice tutorial. I remember when I was a beginner in JS and I decided to watch a couple of your videos about animations, since that moment I become better every day.
For anyone running into problems loading their normal map around 26:00, despite their code being correct; just import the normal map into your file, and then pass it through as a variable... e.g.:
import NormalMap from "./textures/NormalMap.png";
const textureLoader = new THREE.TextureLoader();
const normalTexture = textureLoader.load(NormalMap);
Thanks buddy, I was stuck at that part!
file location according to this video is '../static/textures/NormalMap.png'
Thx, that really helped and a good takeaway
Somehow for me, if I add the normal map and color the object turns black. But if I remove color, I can see the texture. Any solution??
Thank you so much!
This definitely made me wanna play with JS and front-end stuff. After seeing Bruno's gamified site, I am sold!
And today I was reading a lot of three.js related articles!! This is just awesome
Wow, I started your other newbie Three.js video from 2019 and got 10 minutes in when I had to break. When I got back you have a whole new video for 2021 up. Such luxury!
more 3js please Sensei....will absolutely love a full in depth, full of examples 3js tutorial series...thanks!
12 years after creating my first 3D object in 3D Software I learn how to do it in a browser #Epic! Thank you! ♥
Thanks Simon, I've been looking for the right tutorials and training for three.js and I was able to use your code to get a discount. Much appreciated. Thanks for this video!
Awesome Gray. Lots of love . Most awaited video playlist to be announced by you. It's finally here. You're the best
AS SOON AS YOU MENTIONED BRUNO I ALREADY KNEW IT, THAT WAS THE GUY WHO HAS A CAR MINIGAME IN HIS PORTFOLIO OH MY GOODNESS
That was why I watched this course! When he mentioned that you cannot build games with three.js I was like "dangit, how did that car guy do it then" haha
I'm beyond excited to learn three.js I know this is going to level me up as a vanilla js.
@Ayoub Bousetta I appreciate the reply brotha. 😏🤙
@Ayoub Bousetta dont you also call everything in threejs with js? Are modules not considered vanilla?
Vanilla would be if you implemented this all using pure webgl in the canvas element, including all 3d model parsing, vertex position determination, etc etc stuff
This gives me a chance to learn something new in the way I like 👍 💯
Thank GOD for you man. THREE JS is so hard to get rolling .
Stunning! How cool that it is! I am about to fall in love with Three JS. Thanks for your great tutorial!
He laughs everytime he says "balls", other than that he is quite awesome!
same
Big Black Balls
SuS
Delet this!
this tutorial is really helpful, love the way you explain things. looking forward to more three.js tutorials from you!
I just sign-up to Bruno's Three.js Journey course! Thank you Gary for the link!!!!
Hey, just wanted to appreciate all your work and all that information that your share. Big thanks
I've modeling skill and also complete fullstack developer role. start with ruby and try learn deeply to js after metaprogramming. This time, Three js give me biggest change to increase my power of creativity into the next level of Website art. Thank you! I've subscribe you because your explanation are completely easy to understand.
Thank you very much for sharing knowledge. Please bring more content about ThreeJS
Thank you so much for this tutorial and your other tutorials as well. Your tutorials have definitely given me a push to the right direction and have helped me understand three JS a lot more. Very intuitive and clear tuts.🙏🏽
wow the website with Bruno's course looks amazing. Very well organized information. Wish you success with sales (which is very likely looking at the content)
This is awesome mate! please continue doing videos about threejs💗💗💗💗💗
I’m enjoying this video and learning a lot! Thank you! Around 46:12 you have little editing snafu I think. It repeats a section about the “mousemove event listener”. Unless I’m trippin...you might want to edit that part out. Thanks again!
I think we have the same dealer
Love the end result, definitely worth a subscribe
in this i want new text should be displayed while scrolling.....how to achieve this?
Yes! Another new revolutionary JS framework!!!
This is soo cool! I really appreciate this. Can't wait to make some 3D models in blender and use them on my website.
At about 55:55 (right before the phone rings) you added "sphere.position.z += .5 * (targetY - sphere.rotation.x)" inside of 'const tick'. When I do this it just fires with each tick, so it just flies off the screen almost immediately. How did you make it respond to the mouse movements? What did I miss?
(And is there a 'final' version of the code that we could check against? Everything else is looking good.)
same here, the ball disappears as soon as I move the mouse... rotation.y works but x and z don't
Same here. As soon as i ad sphere.position the ball disapperas when i move the mouse. Have you found a solution?
@@mathias_411 no, sorry, I gave up.
I can't thank you enough for all that your videos teach me.
Thank you so much for your tutorial, I learn a lot from this channel. so I'm a newbie to this world!
beautiful course and a beautiful majesty
this was very exciting I really want to learn three js now ^^
thank you very much for your content
Just got Bruno's course using your code. Thanks! I have a cool project idea that I wanna create using three.js! 🤗
Just what we need... Another frontend framework! Yay!
For the first time on programming tutorial I really literally smashed the like button. I am in.
instead of doing weird second body css style in 54:06 we can
body {
overflow-x: hidden;
}
add overflow-x: hidden; to first block and place
html {
max-width: 100%;
}
in styles
Great tutorial. Very well explained. I always love your tutorials. Keep up the great work.
Great video. Explains basic concepts and shows that it's not that extra mysterious and hard
I wanted to look at it for months, but was discouraged because of the time I would need to put in because of the trial and error. Definitely looking forward to the playlist!
Three.JS is just mind blowing
is the Normal Map Generator not working for anyone else? I load in the provided photo and nothing happens
the best introduction to three.js ever
One word - BRILLIANT.
Yess ! Thank you for this tutorial !
Simon's course and website is legit!
Amazing course! I learnt a lot from this.
Can’t run all of your threejs projects I don’t if the packages are outdated or what I’ve been trying for hours, nothing seems to work.
How fascinating it is. Great work
Kudos on Bruno, animation king!
i realized many people are having an issue with the texture loader , to solve this kindly change this textureLoader to this TextureLoader in all references, finally make sure you use this material.normalMap= normalTexture;. that should solve the issue.
Well explained... Thanks for the tutorial 🙏🏾
Wow... So detailed. You explained it very well.
Thx alot, I extremely like three.js and I think it really makes any webpage look great.
Of course, that's entirely dependent on who's using it to do what. It can definitely make any web page look like garbage, too. 😂
@@DesignCourse you definitely need serious art skills to use it ^^
After watching this video I updated the material browser in the docs so it's easier to see what roughness and metalness do 👍
Thanks very much, your THREE.js tutorials are very good
So grateful for this! Thank you
on 30:10 maybe someone will have a problem like mine where i cannot make gui work properly
my solution:
In "//Debug" change "const gui" to "var gui"
it should help
sick guitar and amp too along with the tutorial!
I thoroughly enjoyed this!! Thank you :)
Excellent way of explanations.. make more videos on 3JS.
Excellent introduction! Thanks!
Epic thanks again Gary! such a legend and an inspiration.
Perfect sound, video and passion - thx a lot
Tip: You'll quickly need to run this code at startup (5:25) each time: npm run dev
Hi, when i run npm run dev as instructed it doesn't open a window and start a server. Is there any solution to that please?
@@thomasmclucas2545 try running npm install command before that
Bruno Simon was my dev teacher for 2 years... Bruno I'm sorry but I need this video to remember how to set up three js lol
This is soo awesome I really wanna to say thank you ❤️
This looks amazing can’t wait to learn this
Detailed!!!! I love this video. Thanks
I loved it, keep them coming!
A huge Thanks! So Neat and Clear
I’m HYPED!
Your are the Edward Norton of the dev world!
how could i view this site i just made just by clicking it the index html or something instead of having start that server each time
What really would nice too, would be a video with three.js + something like blender :D
Watched this vid yesterday and decided to go through the course. You were complaining about THREE being in all caps and the camel case methods. Js methods has always been camel case and bruno very clearly mentioned that we can keep whatever variable we want in place of THREE. I am using T for practice purpose. I hope it helps people having difficulty with it. Just change the import statement.
When i try to load the page without live server the normalmap is not working.
The sphere is rotating and the interactions are working too but the normalmap is not.
Did anybody else have the same problem ?
have you found the solution? I'm getting the same msg too!
Great Video Finally Completed
Just what I needed! Thanks.
thank you garry,you are my ıdol on this path
OMG THANK YOU VERY MUCH, THIS IS SO FUN
Hey, that was entertaining and "instructing". Well worth my time ! Thanks a lot !
i just came from learning 3D, mostly in Blender, is this kinda like a 'Blender' in the browser?
That’s super cool!
Im having a lot of issues with this proyect. The sphere wasn't showing up, and then watching the documentation I realized I had to give values to the phiLength and the thetalength of the geometry, which is not specified in this tutorial. I can't get the light to work either, so Ill try to fix that next. I think it must be because of a different version of the library.
Super exciting!!
There HAS to be an IDE or an engine like Unreal that can put these camera transitions together for you so you can keyframe them.
awesome, awesome indeed! Thank you!
LoveLoveLove this channel. looking forward to more
Does anyone have a problem building this? After running an npm run build, it builds the project but the final product doesnt load the texture
Has anyone figured this one out? Final product after npm run dev run doesnt use normalmap.
@@XbattlepopeX Did you figure it out? I notice theres no way his worked based on the path he shows in the video - the image is at path static/textures/normalmap.png but he types only texture/normalmap.png - mine wont load either actually everything breaks at this point and its killing me
@@unrecited something to do with web pack, I just remade it without using it
i realized many people are having an issue with the texture loader , to solve this kindly change this textureLoader to this TextureLoader in all references, finally make sure you use this material.normalMap= normalTexture;. that should solve the issue.
After watching that I feel exciting to learn three.js
Love the Marshall stack in the background! When are you going to jam out for us?!?
I need help! Everything works just fine until i try to build it as an HTML file. I use npm run build for that. My normal map is not working anymore and it looks weird!!
It has to do with the fact that your trying to run the HTML file locally. Accessing your local file system gets blocked by your browser's CORS policy. Instead, using a local web server like Express should solve it.
@@YannickvDijk yes I already know. Thanks anyway!
same
do you find a solution ?
@@QuentinRenaux bro you can't run it local. When you upload it to your hoster it will work fine. If you need more help let me know.
Hello ,will you be able to do a recent video working with Three.js ?
at 45:55 you repeated the same mousemove addeventlistener, was it a editing issue or is there something I am missing ?
definitely editing issue lol I noticed as well
Really nice stuff! Thanks a lot!
Need HELP this is my error "npm: The term 'npm' is not recognized as a name of a cmdlet, function, script file, or executable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again."
Do I need to know a bunch of coding to jump into three.js? I know a bit of HTML, CSS, and C++ but only the super basic stuff. Never actually built much more than the generic stuff like lists and calculators.