❤️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.
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!
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.)
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
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.
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’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!
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
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)
@@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.
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 ?
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.
The tutorial is awesome. But my GUI doesn´t work. It shows correctly every property, but I can not control any values... I´ve checked the code many times. I will appreciate any help...
@@nozimmukhitdinov7879I fixed mine. I played too much with the code and set canvas property "z-index" to 1. That was my issue. Gui is visible, but you can´t control it.
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.🙏🏽
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.
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!
Hey, I made this exact website following the tutorial, but I don't know anything about npm or node, I want to show the site I created to my friend with netlify, how can I do that? Or like if I want to run this design in my localhost and add php to it. Actually my question is, how can I run this html page without npm run dev?
I guess it is the same error: Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at BulkUpdateDecorator.hashFactory (C:\Users\tobia\Code\treejs ode_modules\webpack\lib\util\createHash.js:144:18) at BulkUpdateDecorator.update (C:\Users\tobia\Code\treejs ode_modules\webpack\lib\util\createHash.js:46:50) at OriginalSource.updateHash (C:\Users\tobia\Code\treejs ode_modules\webpack ode_modules\webpack-sources\lib\OriginalSource.js:104:8) at NormalModule._initBuildHash (C:\Users\tobia\Code\treejs ode_modules\webpack\lib\NormalModule.js:753:17) at handleParseResult (C:\Users\tobia\Code\treejs ode_modules\webpack\lib\NormalModule.js:817:10) at C:\Users\tobia\Code\treejs ode_modules\webpack\lib\NormalModule.js:908:4 at processResult (C:\Users\tobia\Code\treejs ode_modules\webpack\lib\NormalModule.js:640:11) at C:\Users\tobia\Code\treejs ode_modules\webpack\lib\NormalModule.js:692:5 { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' I haven't tried it yet, but it seams like we need an older version of node.jf stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported
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.
Did you figure this out? Me to !! I know his path is wrong but this issue is deeper than this, and sorting through comments finding all of us asking the same question - I find it extremely irritating and wrong of him to upload this damn video with an error like this - specifically the pathname of the texture which I caught but that doesnt fix the damn issue... pathname in the video he types as 'texture/normalmap.png' yet the actual image is nested within STATIC/texture/normallmap.png' or whatever - wtf is up
@@unrecited const textureLoader = new THREE.TextureLoader() ... the T is capped after "THREE." That was an issue I was having. After I fixed that the fil path worked in const normalTexture = textureLoader.load('/textures/NormalMap.png')
What do you think this is? did you even watch it? It could have been more beginner I supposed but this is definitely a step BEYOND the absolute basics you can learn by actually reading the documentation ... smh
hooking up the js with the visual studio code terminal needed much more detail. commands dont work for me like a normal cmd, for instance cd 'file' isn't working while cd.. and other commands do work. also, the help file is vague and online support is vague.
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!
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
And today I was reading a lot of three.js related articles!! This is just awesome
Super video! I applauded for $2.00 👏
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.
12 years after creating my first 3D object in 3D Software I learn how to do it in a browser #Epic! Thank you! ♥
This definitely made me wanna play with JS and front-end stuff. After seeing Bruno's gamified site, I am sold!
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!
Super video! I applauded for ₹40.00 👏
more 3js please Sensei....will absolutely love a full in depth, full of examples 3js tutorial series...thanks!
Awesome Gray. Lots of love . Most awaited video playlist to be announced by you. It's finally here. You're the best
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'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
Thank GOD for you man. THREE JS is so hard to get rolling .
He laughs everytime he says "balls", other than that he is quite awesome!
same
Big Black Balls
SuS
Delet this!
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!
This gives me a chance to learn something new in the way I like 👍 💯
I just sign-up to Bruno's Three.js Journey course! Thank you Gary for the link!!!!
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.
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
Thanks!
in this i want new text should be displayed while scrolling.....how to achieve this?
is the Normal Map Generator not working for anyone else? I load in the provided photo and nothing happens
Stunning! How cool that it is! I am about to fall in love with Three JS. Thanks for your great tutorial!
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
the best introduction to three.js ever
Yes! Another new revolutionary JS framework!!!
Hello ,will you be able to do a recent video working with Three.js ?
this tutorial is really helpful, love the way you explain things. looking forward to more three.js tutorials from 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
Love the end result, definitely worth a subscribe
Thank you very much for sharing knowledge. Please bring more content about ThreeJS
This is soo cool! I really appreciate this. Can't wait to make some 3D models in blender and use them on my website.
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
Hey, just wanted to appreciate all your work and all that information that your share. Big thanks
beautiful course and a beautiful majesty
Just what we need... Another frontend framework! Yay!
Can you explain? How you made this starter ?
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)
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.
For the first time on programming tutorial I really literally smashed the like button. I am in.
This is awesome mate! please continue doing videos about threejs💗💗💗💗💗
huge difficulties with the old version of node files in webpack
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!
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.
I can't thank you enough for all that your videos teach me.
what is the eventlistener for mobile?
hi sir I made this example but I don't know how to publish on my website link
this was very exciting I really want to learn three js now ^^
thank you very much for your content
Yess ! Thank you for this tutorial !
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
Three.JS is just mind blowing
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.
The tutorial is awesome. But my GUI doesn´t work. It shows correctly every property, but I can not control any values... I´ve checked the code many times. I will appreciate any help...
same bro, did you find anything?
yo, i found the solution. In //Debug change "conts gui" to "var gui".
it should help
@@nozimmukhitdinov7879I fixed mine. I played too much with the code and set canvas property "z-index" to 1. That was my issue. Gui is visible, but you can´t control it.
Gary, can you please make a video about how to import animated gltf file ?
Kudos on Bruno, animation king!
Just got Bruno's course using your code. Thanks! I have a cool project idea that I wanna create using three.js! 🤗
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.🙏🏽
Thank you so much for your tutorial, I learn a lot from this channel. so I'm a newbie to this world!
i just came from learning 3D, mostly in Blender, is this kinda like a 'Blender' in the browser?
One word - BRILLIANT.
Does anyone know why the html tag is used rather than pointing to the three.js module?
The GUI panel falls behind the canvas... what should I do
Amazing course! I learnt a lot from this.
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.
at the end when i try to go with my mouse on the screen the sphere dissapare
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
How can I upload the project to github pages? I just uploeaded files and html file don't take any css or js modification
I'm the first. Now give me my medal.
Great tutorial. Very well explained. I always love your tutorials. Keep up the great work.
How fascinating it is. Great work
how can i import GLTF by using your install way?
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!
How come there is no reference to script.js in the index.html yet it still works?
Well explained... Thanks for the tutorial 🙏🏾
Your are the Edward Norton of the dev world!
Simon's course and website is legit!
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
Hey, I made this exact website following the tutorial, but I don't know anything about npm or node, I want to show the site I created to my friend with netlify, how can I do that? Or like if I want to run this design in my localhost and add php to it. Actually my question is, how can I run this html page without npm run dev?
that wont be possible we need to start the server by using the command npm run dev as node is a server side language
Wow... So detailed. You explained it very well.
no one has build issue? if i done to build it with the order "npm run build", texture which I adapted to an object surface is gone suddenly
him: getting started with three js
also him: run some command i dont even know how he open it
when i run npm run dev as instructed at 5:31 it doesn't open a window and start a server. Is there any solution to that please?
I guess it is the same error:
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at BulkUpdateDecorator.hashFactory (C:\Users\tobia\Code\treejs
ode_modules\webpack\lib\util\createHash.js:144:18)
at BulkUpdateDecorator.update (C:\Users\tobia\Code\treejs
ode_modules\webpack\lib\util\createHash.js:46:50)
at OriginalSource.updateHash (C:\Users\tobia\Code\treejs
ode_modules\webpack
ode_modules\webpack-sources\lib\OriginalSource.js:104:8)
at NormalModule._initBuildHash (C:\Users\tobia\Code\treejs
ode_modules\webpack\lib\NormalModule.js:753:17)
at handleParseResult (C:\Users\tobia\Code\treejs
ode_modules\webpack\lib\NormalModule.js:817:10)
at C:\Users\tobia\Code\treejs
ode_modules\webpack\lib\NormalModule.js:908:4
at processResult (C:\Users\tobia\Code\treejs
ode_modules\webpack\lib\NormalModule.js:640:11)
at C:\Users\tobia\Code\treejs
ode_modules\webpack\lib\NormalModule.js:692:5 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
I haven't tried it yet, but it seams like we need an older version of node.jf
stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported
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.
what is the key word to search for the background material that you want to generate into normal map?
I made a project using this starter pack, but why can't i push it to gethub ?!
tnx man its awesome, but i cant find the normal map image link!!!!
Did anyone run into an issue trying to connect the texture loader (26:10). I could not seem to get it at all...
Did you figure this out? Me to !! I know his path is wrong but this issue is deeper than this, and sorting through comments finding all of us asking the same question - I find it extremely irritating and wrong of him to upload this damn video with an error like this - specifically the pathname of the texture which I caught but that doesnt fix the damn issue... pathname in the video he types as 'texture/normalmap.png' yet the actual image is nested within STATIC/texture/normallmap.png' or whatever - wtf is up
@@unrecited const textureLoader = new THREE.TextureLoader()
... the T is capped after "THREE." That was an issue I was having. After I fixed that the fil path worked in
const normalTexture = textureLoader.load('/textures/NormalMap.png')
Can you please make a full tutorial from beginning to advance? Proper tutorial
What do you think this is? did you even watch it? It could have been more beginner I supposed but this is definitely a step BEYOND the absolute basics you can learn by actually reading the documentation ... smh
Can you make a video on loading a 3d model form sketchFab and use it in our project
sick guitar and amp too along with the tutorial!
hooking up the js with the visual studio code terminal needed much more detail. commands dont work for me like a normal cmd, for instance cd 'file' isn't working while cd.. and other commands do work. also, the help file is vague and online support is vague.
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 ^^
Help! After material.normalMap = normalTexture;
Open my ball and it is just a black circle.
Double-checked everything
try changing the path of the png file to just '/textures/NormalMap.png' instead of '../static/textures/NormalMap.png'
I thoroughly enjoyed this!! Thank you :)
I’m HYPED!
Great video. Explains basic concepts and shows that it's not that extra mysterious and hard
Excellent introduction! Thanks!