You’re the only guy that I slow the speed down instead of speeding it. in all my career as a developer, in my opinion, you're more productive than all I know. thank you a lot
I rarely comment on any videos on youtube, but Jeff, the comprehensive yet compressed way of teaching things, like you do here, is more than awesome. it's so amazing. i am speechless. i really want to say thank you for your effort to contribute to the dev community in that way.
Just a quick two suggestions: 1) The texture loader can be instantiated once and used over and over no need to create a new one and load each time. 2) A way to bump performance for the stars, since the geometry and material don't change for each of the 200 stars, only the position, take them out of the function so your page isn't instantiating a new geometry/material each call, just use the already created objects 👍
About 2) im thinking if he may go further to create a 4dimentional Website where you have a slider in your 3D World to change the perspective & make more Informations visible (similar to 4D Toys but with changing content instead of changing geometrys) that would really put a new dimension into coding 😜
2 роки тому
Yeah, f.e. when using vueJS. Instantiate the scene, renderer, camera and other utilities as globals so that you save on memory. Then bind them in the correct vue component and this way you can also use sub-components to do stuff with the same scene. Would be better if there was a vue-plugin, but I’m not sure there is one yet.
random generation of stars 10:00 doesnot work properly on my side. Though it generates the stars but it messes with the torus geometry. Torus is taking the same color as the star and is not rotating, + also gets random position due to stars.
I tried three 50 minute videos and they couldn’t even get the damn program installed on my computer. In 15 minutes you have me making 3D objects that I can play with. You’re the man.
I was happily typing away at work when Github Copilot suddenly suggested I add code to create a button. The code suggestion also happened to include an onClick URL to a UA-cam video. And that's how I ended up here.
Pro tip: if you change addStar() so that the geometry and material are initialised outside the loop and shared by all of them, it’ll be more efficient. Even more efficient, you can merge a bunch of geometries so you just have one mesh for all of the stars, and you save a bunch of draw calls and matrix math on the cpu.
I was getting started on a new project, and i almost decided to code it all with webgl from scratch until this video popped up, i didn't even know three.js existed, thank you for saving me a lot of time 🙏
I work as a developer/sw engineer. Your cahnnel alone made me jump 5 steps ahead in no time. Thanks to you I am not only interested in coding more, I am eager to discover new technologies and possibilities in my work and hobby.
the fact that as someone who is fairly new to programming I understood this whole thing, speaks a lot to you explaining abilities!! Awseome content! I"ll try it out this weekend, thank you!
The surface off the moon is in fact still smooth (the vertices have not changed), the normal map just modifies how the Moon is lit by the shader, you would need some sort of vertex displacement, for actual bumps
Man it is so good that you offer the github repo for your videos. Thanks! That way I don't have to write every step and it is possible to grab the concepts much faster, just doing some changes to the code, testing stuff. Also the fast pace of the video is very good. I usually watch tutorials at 2x, not yours. Your video I may actually play more than once to get all the details. Good job!
@@SilverishKitten I don’t think that’s their point. Obviously you should learn concepts before copy pasting from GitHub repos but we don’t know if he/she did that
i was getting bored with the staticness of these two dimensional pages I was limited to. This blew my mind and I can't get over how simple it is to add some straightforward javascript to really bring the page to life. Thank you for putting this together!!
This tutorial got me started with web animation, thanks for putting this out! Now I'm building with react and three-fiber, and it's all because I watched this video!
Trust me if my mom wasn't here I would have gave a standing ovation to your method of teaching, hats of to you jeff! thanks for making me your new subscriber I'm lucky one.
God! Your videos are on another level.. I've been leeching your videos for a while now but I had to comment - I think this is the near-perfect way to explain "code"... I can see the real-world applications, get inspired from all the possibilities, pick up computer science concepts as well as jot down what coding keywords I need to deep dive into... I'm not kidding but you've literally inspired me to pickup front-end dev (I'm currently an utter noob)..
one of the most awesome tutorial that I have ever seen. introducing concepts one by one and show the difference step by step. this is the correct way to illustrate something that seems complex to the beginner. this video taught me a lot not just the code. thansk!
Wow thank you so much for this. I am about to finish my web dev course in college and this gave me such a wider view of whats possible in web development! Gives me something to do during summer!
Couple of things here for people who struggle, like me. 1. Make sure you cd into your project's directory (you just created with your project's name) before you try to run commands like "npm run dev" 2. Odds are you'll need to install Express if you haven't yet. Go ahead and "npm install express"
I've been eyeing on threejs since the last few weeks for building my portfolio. The first 3 minutes of your video already gave me 2 ideas I can work on. Thanks a lot for this, It's golden!
I saw this like a week ago and I said I need to follow along this tutorial. Everything worked flawlessly, thanks for introducing me to this world of 3D rendering stuff on browsers. Thanks!
I wish I had your video 5 years ago when I started learning Threejs. I could have saved 2 weeks of my life not banging my head on the wall that how these things worked.
The actual way to do this is record the 3D as a video and advance through the video with scroll. Why? - browser compatibility - no realtime rendering (compatibility with low spec devices) This is great if you want to code an online game, for which the user would understand a decent pc is required. But for a website meant to be opened by anyone... Imagine a recruiter opening your website on their 4GB ram i3 Windows 8 computer, they start lagging, they can't scroll because of lag, etc. Wouldn't be a pleasant experience. Hence you render the animation in advance, record it and put it in the background. Autoplay off, on scroll show next frame of the video. Note: this is not something that I invented, it's what popular websites (that require compatibility) use for fancier graphics. If all you wanna add to your website is something like a globe, it's probably alright, just beware that making a nice 3d scene might be too heavy for some of your visitors to handle.
I wonder if this really is a problem nowadays. I've been doing some stuff with the google 3d-viewer component and have not really had problems with cheap phones etc.
I began rethinking my life decisions then had an existential crisis that this is more easier than I thought in three.js then I lost braincells because it didn't feel complex anyone who can relate? seriously you are if not the best one of the best programing youtubers
This might be weird, but I love how you use emojis throughout the video! Most tutorials seem too formal and don't really spark interest in the subject but the bright colours, emojis and (especially) your narration make the video all the more fun and interesting! Been subscribed for long, can't wait to see you hit a million subs soon :)
@@avatr7109 A lot of older programmers feel like it has to be completely formal or else its not worth their time. You can easily spot these individuals because they will say things like "zoomer moment"
Gotta say, your ability to take complex topics and consistently break them down to their fundamental pieces, is uncanny. And we're getting this for free.
After watching other videos and reading documentation I couldn't wrap my head around Three.js I wanted to ditch it but this video popped up. This was very comprehensive and most importantly very well structured.Thank you.
Getting into this space as newbie, this tutorial lights me up with 😀infinite possibilities of creating/customizing stunning, fluid apps in D3 js. Thanks so much!
Amazing tutorial. I kinda went a bit overboard though and I spent a day rewriting Sebastian Lague's planet gen code to work with ThreeJS (pretty much only kept the methods for combining noise). Ended up having to learn glsl to make it work using a ShaderMaterial.
L l. L. Mmmm mmmmmmm/mmmmmm m. I. Öl oo. Öl l l. Lmm/mmmmmm n ooookoook ooookoook kmkkm/. Mmmmmmknlkkkkkkk. N. Kmkko l k o lol. I lol kkl OK kk OK. OK k l Oooooo9oooo oo oookooko I ooookoook k oo onooll ooonn9ooooo. Oo ooookoook and then I opened it to 0o9o9 ooooooooo9o9oo9ooo9999999 to make a good friend 0o9o9 Oooooo9oooo. Mm mmmom/. Mmmm/nnnnnmm0nnoo. O0 0 II ooo{oooooooo{oooo{{of oooooool. {{oooooo9o9oo9ooo9999999 nooooooo9o0o0okolooooooooioooo9olooo. Oooooo9oooo N no o. Poo. I. Poo {x9x69. 599m 5fk6f f6o t. Of Mo.. I o m fkfxtf. Zoom in oxft 6.oofkf6fktof.?!!. do..! Ox659. X. 5. 5otxof I. 5 of96fkkxmf o9fp6 9m5x.9x9.66o. Fkf o5fot. Fooxofkffofu. Click Click Click Click OK. Click This ist of. Kf.. F. on. on of. F.? Kfk. F.. It. CT.?! Tkxot9. T9f9 o6mffktk6kkf96. Too 6k from f9ckf mf96m96mcx9c9tofkfofoko. Okf I. I. Co.! Co. I. On ock. I. Co. Gott... Oof9. Fk59. C5l5ofk95kf9 95l!!!.?. 9!.?.
You can improve the moon with something called triplanar mapping, which basically takes an image for the x, y, z planes and projects them on the sphere. When you blur the edges you can get a really nice texture.
@@mrmelon54 He meant the footage of the moon landing cause it is low quality, not the landing itself. It should be obvious cause we talk about rendering in this video.
for people having issues, you may need to multiply the intensity of the light sources by math.pi. In my case, I had to tone up the point light by like 1000 for some reason.
@@lxhan893 Depends on your goals and values. On my website, I want my clients to use as little resources as possible without compromising on aesthetics too much. Some rather have all the gimmicks and eye candy instead.
idk what's happening but i cant follow half of the instructions here without something going wrong - Node JS isnt working as shown, the TextureLoader command is not recognizing the image path - perhaps this tutorial needs an update?
Tip for people learning for the first time, start with gsap. Animate text and divs. It will help you understand alot of things before jumping to 3rd rendering
Nevermind, I got it now, I had to run npm init vite@latest, then cd to the project folder, then run npm install, then npm install three, and everything is working wonderfully now. Phew! Hope this helps anyone that tries to do this and is as green as I am
You've got magical tendency to post a video about topics I was 🤔 about (threejs AND putting together a portfolio website). Never thought of combining both but you might be onto something!
window.onresize = () => { location.reload(); }; Added this listener at the begin of the main.js because resizing the window, the canvas keep the original size given at the draw moment. A pro of the resize listener is that it keeps the amount of scroll done till the moment you resize.
14:58 how did you do that? The way you show the actual grid in vs code 😧
3 роки тому+5
Mozilla Firefox has great visual feedback in the developer's tools. Check that out, you will find the grid helpers there. Don't know how to do it in vscode though.
Firefox developer tools allows you to highlight grid and flexbox. You can find it on the far right when you focus on an element that has `display: flex or grid`.
Wow, just wow! Thank you so much for this tutorial. You made threejs so easy to follow, with the basics and its variables and possibilities, and how to apply it to a website, and all in just over 15 min. Thank you very much!
Whoa that's just outstanding! I've never thought something like that is possible to do in simple programming, it's completely impressive! That's some incredible ability to learn here.
does it affect performance on the site in any way when navigating/scrolling? I was talking to a friend today about using ThreeJS and GLSL in a future project, and not sure how many models you can render on screen at a time with ThreeJS before it slows down visibly. Would love to know performance comparison of a site with and without rendered objects.
Hey man! I have a quick question for ya! When I deployed my Portfolio based on this on gh-pages and Vercel, they both won't load the styles, nor animations... any ideas on why this may be? I'm not sure if Vite is causing issues of some sort, but it seems to be having issues with routing despite my project having an identical structure to yours. Otherwise it returns with a 404...
Wow this adds a whole new dimension to my programming
🤣🤣🤣
Hehe a "z" one
See what you did there
Duuuude
@@somerandomguy2892 use linux
You’re the only guy that I slow the speed down instead of speeding it. in all my career as a developer, in my opinion, you're more productive than all I know. thank you a lot
+111
He is just a bloody showoff he doesn't teach he just shows off his own skillset, biggest tool in the industry.
@@emonymph6911 ikr
Ah yes.. slow down.. sure... *sweats in 2x speed*
@@emonymph6911 That's what a teacher does, dufus 🤪🤪
I rarely comment on any videos on youtube, but Jeff, the comprehensive yet compressed way of teaching things, like you do here, is more than awesome. it's so amazing. i am speechless. i really want to say thank you for your effort to contribute to the dev community in that way.
6
+1
jeff who?
@@iAbhijeetShukla dude the guy providing all that stuff is Jeff..
@@tobiasstiller8221 thanks
Just a quick two suggestions:
1) The texture loader can be instantiated once and used over and over no need to create a new one and load each time.
2) A way to bump performance for the stars, since the geometry and material don't change for each of the 200 stars, only the position, take them out of the function so your page isn't instantiating a new geometry/material each call, just use the already created objects 👍
Can you give more details about the first suggestion how to do it
Proxy geometry basically?
About 2) im thinking if he may go further to create a 4dimentional Website where you have a slider in your 3D World to change the perspective & make more Informations visible (similar to 4D Toys but with changing content instead of changing geometrys) that would really put a new dimension into coding 😜
Yeah, f.e. when using vueJS.
Instantiate the scene, renderer, camera and other utilities as globals so that you save on memory. Then bind them in the correct vue component and this way you can also use sub-components to do stuff with the same scene.
Would be better if there was a vue-plugin, but I’m not sure there is one yet.
random generation of stars 10:00 doesnot work properly on my side. Though it generates the stars but it messes with the torus geometry. Torus is taking the same color as the star and is not rotating, + also gets random position due to stars.
I tried three 50 minute videos and they couldn’t even get the damn program installed on my computer. In 15 minutes you have me making 3D objects that I can play with. You’re the man.
I was happily typing away at work when Github Copilot suddenly suggested I add code to create a button. The code suggestion also happened to include an onClick URL to a UA-cam video. And that's how I ended up here.
*"It's guaranteed to get you a job, or your money back"*
... I paid nothing
That's why I can offer this amazing deal
I paid attention.
That's exactly what you'll get back. Nothing😂
@@Fireship Just take my money man
We all love you so much
Pro tip: if you change addStar() so that the geometry and material are initialised outside the loop and shared by all of them, it’ll be more efficient. Even more efficient, you can merge a bunch of geometries so you just have one mesh for all of the stars, and you save a bunch of draw calls and matrix math on the cpu.
I'll keep it in mind
Everyone's commenting at light speed, since we've been sitting here waiting for this for days!
So true man!
I've been meeting with pro members all month, content frequency will increase in June
I come here by accident ,
@@Fireship Sounds awesome! I didn't mean it as an insult at all - your content is definitely worth the wait!
I was getting started on a new project, and i almost decided to code it all with webgl from scratch until this video popped up, i didn't even know three.js existed, thank you for saving me a lot of time 🙏
Best coding channel of all time
I work as a developer/sw engineer. Your cahnnel alone made me jump 5 steps ahead in no time. Thanks to you I am not only interested in coding more, I am eager to discover new technologies and possibilities in my work and hobby.
This simple tutorial touches on so many different concepts in a non-trivial way. Well done! Excellent content.
the fact that as someone who is fairly new to programming I understood this whole thing, speaks a lot to you explaining abilities!!
Awseome content! I"ll try it out this weekend, thank you!
The surface off the moon is in fact still smooth (the vertices have not changed), the normal map just modifies how the Moon is lit by the shader, you would need some sort of vertex displacement, for actual bumps
This entire video was incredible. Using grid to make 12 equal columns blew my mind.
Man it is so good that you offer the github repo for your videos. Thanks! That way I don't have to write every step and it is possible to grab the concepts much faster, just doing some changes to the code, testing stuff. Also the fast pace of the video is very good. I usually watch tutorials at 2x, not yours. Your video I may actually play more than once to get all the details. Good job!
That's definitely not how you learn to code efficiently lol
@@SilverishKitten I don’t think that’s their point. Obviously you should learn concepts before copy pasting from GitHub repos but we don’t know if he/she did that
i was getting bored with the staticness of these two dimensional pages I was limited to. This blew my mind and I can't get over how simple it is to add some straightforward javascript to really bring the page to life. Thank you for putting this together!!
It's hard to go back to other youtube coding tutorials after getting use to this quality of content, keep it up man!
this is facts tho. sets my expectations far too high for any other content
This tutorial got me started with web animation, thanks for putting this out! Now I'm building with react and three-fiber, and it's all because I watched this video!
Probably the best ThreeJS video on UA-cam.
Hat's off ❤️
Trust me if my mom wasn't here I would have gave a standing ovation to your method of teaching, hats of to you jeff! thanks for making me your new subscriber I'm lucky one.
God! Your videos are on another level.. I've been leeching your videos for a while now but I had to comment - I think this is the near-perfect way to explain "code"... I can see the real-world applications, get inspired from all the possibilities, pick up computer science concepts as well as jot down what coding keywords I need to deep dive into... I'm not kidding but you've literally inspired me to pickup front-end dev (I'm currently an utter noob)..
I rarely go out anymore during the weekends. Not because of Covid but because of this channel.
Love these videos! Keep up the good work!
OMG YES! THIS IS LITERAL GOLD!
You used the word "literal" figuratively... my brain-compiler just exploded.
It's amazing how much content there is in a sixteen-minute video.
one of the most awesome tutorial that I have ever seen. introducing concepts one by one and show the difference step by step. this is the correct way to illustrate something that seems complex to the beginner. this video taught me a lot not just the code. thansk!
ah... this content is gold. Not a second is wasted, and yet, it does not feel too fast, amazing
Wow thank you so much for this. I am about to finish my web dev course in college and this gave me such a wider view of whats possible in web development! Gives me something to do during summer!
Cna this get us a job
as a game dev(for almost 3 years)
this was easy
nice explanation btw
You're just a great learner and a teacher!
Hats off to you man, and not forgetting the developers behind three.js 👏
Couple of things here for people who struggle, like me.
1. Make sure you cd into your project's directory (you just created with your project's name) before you try to run commands like "npm run dev"
2. Odds are you'll need to install Express if you haven't yet. Go ahead and "npm install express"
Thank you!
I was literally researching how to make a 3D website an hour ago, then I go to my subscriptions and see this. WHAT
I've been eyeing on threejs since the last few weeks for building my portfolio. The first 3 minutes of your video already gave me 2 ideas I can work on. Thanks a lot for this, It's golden!
Waiting for full tutorial on Three.js with full demo!💥
I didn’t think I could be a bigger fan of this channel, and then you bring up Blender 💘
I saw this like a week ago and I said I need to follow along this tutorial. Everything worked flawlessly, thanks for introducing me to this world of 3D rendering stuff on browsers. Thanks!
I wish I had your video 5 years ago when I started learning Threejs. I could have saved 2 weeks of my life not banging my head on the wall that how these things worked.
The actual way to do this is record the 3D as a video and advance through the video with scroll. Why?
- browser compatibility
- no realtime rendering (compatibility with low spec devices)
This is great if you want to code an online game, for which the user would understand a decent pc is required. But for a website meant to be opened by anyone... Imagine a recruiter opening your website on their 4GB ram i3 Windows 8 computer, they start lagging, they can't scroll because of lag, etc. Wouldn't be a pleasant experience.
Hence you render the animation in advance, record it and put it in the background. Autoplay off, on scroll show next frame of the video.
Note: this is not something that I invented, it's what popular websites (that require compatibility) use for fancier graphics. If all you wanna add to your website is something like a globe, it's probably alright, just beware that making a nice 3d scene might be too heavy for some of your visitors to handle.
I wonder if this really is a problem nowadays. I've been doing some stuff with the google 3d-viewer component and have not really had problems with cheap phones etc.
This is how i think too
I began rethinking my life decisions then had an existential crisis that this is more easier than I thought in three.js then I lost braincells because it didn't feel complex anyone who can relate?
seriously you are if not the best one of the best programing youtubers
This might be weird, but I love how you use emojis throughout the video! Most tutorials seem too formal and don't really spark interest in the subject but the bright colours, emojis and (especially) your narration make the video all the more fun and interesting! Been subscribed for long, can't wait to see you hit a million subs soon :)
why would be that weird
*STAND BY YOUR CHOICE*
zoomer moment
@@avatr7109 A lot of older programmers feel like it has to be completely formal or else its not worth their time.
You can easily spot these individuals because they will say things like "zoomer moment"
Gotta say, your ability to take complex topics and consistently break them down to their fundamental pieces, is uncanny.
And we're getting this for free.
Vite? At this point I'm going to have different tooling for every project I work on.
After watching other videos and reading documentation I couldn't wrap my head around Three.js I wanted to ditch it but this video popped up. This was very comprehensive and most importantly very well structured.Thank you.
Wow, amazing! I just finished the role tutorial, and it so satisfying to complete it as easy as you made look! Thank you so much, cheers from Brazil!
vc teve algum problema para rodar o three.js n estou conseguindo rodar o codigo
Getting into this space as newbie, this tutorial lights me up with 😀infinite possibilities of creating/customizing stunning, fluid apps in D3 js. Thanks so much!
When fireship makes a Tutorial on something it becomes official for me
Shit man, was working with Blender like a million years ago when I was still a child, now grown up this is blowing my freaking mind.
Amazing tutorial. I kinda went a bit overboard though and I spent a day rewriting Sebastian Lague's planet gen code to work with ThreeJS (pretty much only kept the methods for combining noise). Ended up having to learn glsl to make it work using a ShaderMaterial.
understanding 3d never felt better
Dude it’s insane! Fast and clear explanation. Thanks for saving our time, cause this could easily be a one hour long video lol
Love that short css-grid explanation a the end. So much better than the way we used to do it
People might need to do an `npm install` before the `npm run dev` at 2:48
I made it but i got an error anyways, that the "dev" script is missing
you have no idea how much this helped, I always reference you in my projects, thanks for being my sensei
Nice video bro. Been waiting for that!
Wow I've seen super complex examples of people making spinning toruses from scratch I can't believe how simple three.js makes it
It was really interesting! I thought programming 3D animations more difficult, but now I think I should try it
L l. L. Mmmm mmmmmmm/mmmmmm m. I. Öl oo. Öl l l. Lmm/mmmmmm n ooookoook ooookoook kmkkm/. Mmmmmmknlkkkkkkk. N. Kmkko l k o lol. I lol kkl OK kk OK. OK k l Oooooo9oooo oo oookooko I ooookoook k oo onooll ooonn9ooooo. Oo ooookoook and then I opened it to 0o9o9 ooooooooo9o9oo9ooo9999999 to make a good friend 0o9o9 Oooooo9oooo. Mm mmmom/. Mmmm/nnnnnmm0nnoo. O0 0 II ooo{oooooooo{oooo{{of oooooool. {{oooooo9o9oo9ooo9999999 nooooooo9o0o0okolooooooooioooo9olooo. Oooooo9oooo N no o. Poo. I. Poo {x9x69. 599m 5fk6f f6o t. Of Mo.. I o m fkfxtf. Zoom in oxft 6.oofkf6fktof.?!!. do..! Ox659. X. 5. 5otxof I. 5 of96fkkxmf o9fp6 9m5x.9x9.66o. Fkf o5fot. Fooxofkffofu. Click Click Click Click OK. Click This ist of. Kf.. F. on. on of. F.? Kfk. F.. It. CT.?! Tkxot9. T9f9 o6mffktk6kkf96. Too 6k from f9ckf mf96m96mcx9c9tofkfofoko. Okf I. I. Co.! Co. I. On ock. I. Co. Gott... Oof9. Fk59. C5l5ofk95kf9 95l!!!.?. 9!.?.
Momomm{mm mooooommm{
Oomo{m
Kmmömmmmmm{{kkk
Kmmömmmmmm{{kkkk
this is great for those jobs on Handshake that require a portfolio in addition to your resume and cover letter
You can improve the moon with something called triplanar mapping, which basically takes an image for the x, y, z planes and projects them on the sphere. When you blur the edges you can get a really nice texture.
"its about as realistic as the moon landings"
me: but the moon landings were real?
@@mrmelon54 or was it? Hmmmmmmm
@@mrmelon54 That sentence got me too... bruh
@@mrmelon54 He meant the footage of the moon landing cause it is low quality, not the landing itself. It should be obvious cause we talk about rendering in this video.
You have a way of moving through things much quicker than other three.js tutorials, but for some reason it makes so much more sense.
1:12 ‘about as realistic as the official moon landings’
What’s that supposed to mean lol
Glad I'm not the only one who noticed that!
Dont tell me this guy is a conspiracist
@@matisowagm he's joking lol
from joke to joke the truth peeks out
1:09
Finally, a video that is not slowly killing me...
Very nice tutorial! It's interesting to feel it so natural when you have been doing 3D game dev before with something like Godot.
Thanks man!
That's me.
This is the first thing I've seen that excites me about front end
This is fantastic! Such great methodological explanations and examples!
Love it, thank you so much
for people having issues, you may need to multiply the intensity of the light sources by math.pi. In my case, I had to tone up the point light by like 1000 for some reason.
Me eyes: "This looks amazing"
My brain: "R.i.p batteries"
and possibly cpu/gpu meltdown too
Indeed. Nothing worse than a website that makes your laptop go VROOOOOOM
So this wouldn’t be a good idea?
@@lxhan893 Depends on your goals and values.
On my website, I want my clients to use as little resources as possible without compromising on aesthetics too much.
Some rather have all the gimmicks and eye candy instead.
What absolute beasts Jeff and the Three.Js guys are!! Incredible!!
idk what's happening but i cant follow half of the instructions here without something going wrong - Node JS isnt working as shown, the TextureLoader command is not recognizing the image path - perhaps this tutorial needs an update?
Tip for people learning for the first time, start with gsap. Animate text and divs. It will help you understand alot of things before jumping to 3rd rendering
I'm going to do as you say thanks
I feel like I just watched the whole donut tutorial from BlenderGuru in a .zip file format.
My goodness! Finally someone who can teach this properly!
@@leimichiama2lose I did. I forgot how I solved it.
Yes! Was waiting for this tutorial!!
thank you so much man! Could not stop messing around with THREE.js for the past 4 hours xD
Welp, there goes my weekend.
Me too. Coder compulsiveness is itching again😅
Nevermind, I got it now, I had to run npm init vite@latest, then cd to the project folder, then run npm install, then npm install three, and everything is working wonderfully now. Phew! Hope this helps anyone that tries to do this and is as green as I am
Hit the subscribe button and smash like button he is really genious person ...if u can't learn anything that's not a problem but hid idea is cool...
Im just sitting here after watching the whole ass 15 min without even blinking and be like "Wow...". I am speechless. Great video!
The moonlanding was real tho
You've got magical tendency to post a video about topics I was 🤔 about (threejs AND putting together a portfolio website). Never thought of combining both but you might be onto something!
On No! Fireship is taking my job away :')
window.onresize = () => {
location.reload();
};
Added this listener at the begin of the main.js because resizing the window, the canvas keep the original size given at the draw moment.
A pro of the resize listener is that it keeps the amount of scroll done till the moment you resize.
14:58 how did you do that? The way you show the actual grid in vs code 😧
Mozilla Firefox has great visual feedback in the developer's tools. Check that out, you will find the grid helpers there.
Don't know how to do it in vscode though.
leaving this here in case anyone replies with how lol
Could be wrong but I'm pretty sure that's added in post
Firefox developer tools allows you to highlight grid and flexbox. You can find it on the far right when you focus on an element that has `display: flex or grid`.
Damn there are many people making tutorials but this guy is talented
I literally just learnt about this framework a few days ago, and was wondering if someone has a tutorial for it
I dont know wich is more mindblowing, the portfolio or the video itself!!!
Wow, just wow! Thank you so much for this tutorial. You made threejs so easy to follow, with the basics and its variables and possibilities, and how to apply it to a website, and all in just over 15 min. Thank you very much!
“Beginner friendly” 😢
😂
This was good
It is beginner friendly what do you mean? You have to understand basic concepts like objects and classes and you're all set?
I’m 8 weeks into a computer graphics course at my university. This sums up 80% of what we’ve learned so far. It’s awesome but very basic stuff
Whoa that's just outstanding! I've never thought something like that is possible to do in simple programming, it's completely impressive! That's some incredible ability to learn here.
Great tutorial, well explained. Question: where to host such a project? I'm assuming typical shared hosting doesn't support three.js ...?
as long as the host supports a javascript website, you can use threejs. I use github pages to host my threejs website with react.
@@red.46 thank you
@@red.46 how do you do this? I have spent hours and hours trying to figure it out, if you could help I would really appreciate it!
when running npm run dev, i get an error saying that vite cannot be found and worker_threads module cannot
be found. Any one have a solution?
same problem :/
i might have found the answer, after running:
npm init @vitejs/app
You just run these 3 commands:
cd (name of your project)
npm install
npm run dev
@@ricasfbp thanks a lot!
@@ricasfbp This fixed my issue and I was able to run "npm run dev" successfully
you are amazing Jeff, i got addicted to Firebase because of you and now i will be addicted to threejs haha
I have a question. Must I install vite with react to use three.js?
No
Vite is optional
You don't need react. Vite is just an easy way to setup a project with NPM and hot module replacement, but it's not necessary.
Ok thankyou. 🙏
But if you want to use react then there is package called react three fiber which is awesome
well, I was using position: relative/absolute/fixed, but the way u r usinggrid for item placement is more easy and efficient. Thank you!
does it affect performance on the site in any way when navigating/scrolling? I was talking to a friend today about using ThreeJS and GLSL in a future project, and not sure how many models you can render on screen at a time with ThreeJS before it slows down visibly. Would love to know performance comparison of a site with and without rendered objects.
Depends on the power of the clients machine id assume
Fireship videos are so awesome, it's unbelievable. Everything is on point, no second is wasted.
It reminds me of Railscasts videos from Ryan Bates.
How do you exist
the way u explained it was so smooth, love this
Hey man! I have a quick question for ya! When I deployed my Portfolio based on this on gh-pages and Vercel, they both won't load the styles, nor animations... any ideas on why this may be? I'm not sure if Vite is causing issues of some sort, but it seems to be having issues with routing despite my project having an identical structure to yours. Otherwise it returns with a 404...
This is a GREAT tutorial!
Full with useful info, skips the bs, and most importantly, not just reading the documentation site out loud