❤️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!😂
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);
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
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.
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
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!
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.
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!
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
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 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!
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.🙏🏽
I'm a baby just starting out in javascript so i'm not gonna watch this yet BUT holy Moly those website examples are out-of-this-world!!! I can't imagine making a website so amazing.
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.)
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.
Seriously! I was just thinking the same thing... I ran into an unbelievable video game tutorial and had the itch to want to learn how to build video games with javascript.
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!😂
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!
more 3js please Sensei....will absolutely love a full in depth, full of examples 3js tutorial series...thanks!
And today I was reading a lot of three.js related articles!! This is just awesome
12 years after creating my first 3D object in 3D Software I learn how to do it in a browser #Epic! Thank you! ♥
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
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.
This definitely made me wanna play with JS and front-end stuff. After seeing Bruno's gamified site, I am sold!
Thank GOD for you man. THREE JS is so hard to get rolling .
This gives me a chance to learn something new in the way I like 👍 💯
He laughs everytime he says "balls", other than that he is quite awesome!
same
Big Black Balls
SuS
Delet this!
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
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!
Awesome Gray. Lots of love . Most awaited video playlist to be announced by you. It's finally here. You're the best
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!
beautiful course and a beautiful majesty
the best introduction to three.js ever
Yes! Another new revolutionary JS framework!!!
I just sign-up to Bruno's Three.js Journey course! Thank you Gary for the link!!!!
Thank you very much for sharing knowledge. Please bring more content about ThreeJS
Stunning! How cool that it is! I am about to fall in love with Three JS. Thanks for your great tutorial!
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.
Just what we need... Another frontend framework! Yay!
Love the end result, definitely worth a subscribe
This is awesome mate! please continue doing videos about threejs💗💗💗💗💗
Hey, just wanted to appreciate all your work and all that information that your share. Big thanks
Kudos on Bruno, animation king!
this tutorial is really helpful, love the way you explain things. looking forward to more three.js tutorials from you!
This is soo cool! I really appreciate this. Can't wait to make some 3D models in blender and use them on my website.
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
One word - BRILLIANT.
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
Three.JS is just mind blowing
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 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 can't thank you enough for all that your videos teach me.
After watching this video I updated the material browser in the docs so it's easier to see what roughness and metalness do 👍
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.🙏🏽
Just got Bruno's course using your code. Thanks! I have a cool project idea that I wanna create using three.js! 🤗
this was very exciting I really want to learn three js now ^^
thank you very much for your content
Thank you so much for your tutorial, I learn a lot from this channel. so I'm a newbie to this world!
Yess ! Thank you for this tutorial !
For the first time on programming tutorial I really literally smashed the like button. I am in.
Simon's course and website is legit!
How fascinating it is. Great work
Your are the Edward Norton of the dev world!
sick guitar and amp too along with the tutorial!
Great video. Explains basic concepts and shows that it's not that extra mysterious and hard
After watching that I feel exciting to learn three.js
Wow... So detailed. You explained it very well.
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
That’s super cool!
Excellent introduction! Thanks!
I'm a baby just starting out in javascript so i'm not gonna watch this yet BUT holy Moly those website examples are out-of-this-world!!! I can't imagine making a website so amazing.
is the Normal Map Generator not working for anyone else? I load in the provided photo and nothing happens
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
Great Video Finally Completed
Great tutorial. Very well explained. I always love your tutorials. Keep up the great work.
Excellent way of explanations.. make more videos on 3JS.
This looks amazing can’t wait to learn this
What really would nice too, would be a video with three.js + something like blender :D
Amazing course! I learnt a lot from this.
adding interactivity - I feel i m having a deja vu
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 ^^
Well explained... Thanks for the tutorial 🙏🏾
yes that's a great day
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.
him: getting started with three js
also him: run some command i dont even know how he open it
So grateful for this! Thank you
Wow, nice kemper!
I loved it, keep them coming!
Thank you youtube recommendation!
OMG THANK YOU VERY MUCH, THIS IS SO FUN
Super exciting!!
Please make more project, we love this
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.
Detailed!!!! I love this video. Thanks
More data visualization with 3d.js and THREE.js.
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.
I did not know you could make movies in JavaScript, pretty cool.
JCU - Javascript Cinematic Universe
You can but you gotta be good in making 3d objects to import for ThreeJs which is very hard.
Thanks very much, your THREE.js tutorials are very good
I thoroughly enjoyed this!! Thank you :)
Just what I needed! Thanks.
I’m HYPED!
A huge Thanks! So Neat and Clear
awesome, awesome indeed! Thank you!
Epic thanks again Gary! such a legend and an inspiration.
thank you garry,you are my ıdol on this path
Its like you heard my preyers and made new video about this😅
Seriously! I was just thinking the same thing... I ran into an unbelievable video game tutorial and had the itch to want to learn how to build video games with javascript.
LOVE IT!!!! take my money !!!
Love the Marshall stack in the background! When are you going to jam out for us?!?
LoveLoveLove this channel. looking forward to more
Really nice stuff! Thanks a lot!
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
Can you explain? How you made this starter ?
This is soo awesome I really wanna to say thank you ❤️
Perfect sound, video and passion - thx a lot
new tech again.. damn so cool !!
worth subscribing