Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial

Wow this adds a whole new dimension to my programming

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.

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

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 👍

*"It's guaranteed to get you a job, or your money back"*
... I paid nothing

Everyone's commenting at light speed, since we've been sitting here waiting for this for days!

This simple tutorial touches on so many different concepts in a non-trivial way. Well done! Excellent content.

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!

Best coding channel of all time

OMG YES! THIS IS LITERAL GOLD!

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 KRplus video. And that's how I ended up here.

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!

You're just a great learner and a teacher!
Hats off to you man, and not forgetting the developers behind three.js 👏

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, 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!

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)..

Dude it’s insane! Fast and clear explanation. Thanks for saving our time, cause this could easily be a one hour long video lol

Me eyes: "This looks amazing"
My brain: "R.i.p batteries"

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!

Probably the best ThreeJS video on KRplus.
Hat's off ❤️

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 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.

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.

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!

This is fantastic! Such great methodological explanations and examples!
Love it, thank you so much

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!

It is just incredible how you explain everything that you are doing.Great example,great tutorial!

This is a GREAT tutorial!
Full with useful info, skips the bs, and most importantly, not just reading the documentation site out loud

It's hard to go back to other youtube coding tutorials after getting use to this quality of content, keep it up man!

You are the ultimate king of tutorials. Thank you !

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.

there is no way to not love these videos man, thank you for you great work

Nice video bro. Been waiting for that!

Yes! Was waiting for this tutorial!!

I don't normally comment on tutorial videos but this was so, so excellent and concise, you earned yourself a subscriber for this content! Well done :D

This tut series are amazing,
Your teaching style has a fresh vibe.
The topic is amazing, creative in nature.
Cheers!

I was literally researching how to make a 3D website an hour ago, then I go to my subscriptions and see this. WHAT

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!

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!

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!

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

Waiting for full tutorial on Three.js with full demo!💥

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.

Love that short css-grid explanation a the end. So much better than the way we used to do it

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 :)

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.

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!

That’s awesome. Thanks for making such amazing videos and keeping them short and to the point.

When fireship makes a Tutorial on something it becomes official for me

Dude u litteraly juust raised a new path 4 me

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 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!!

Vite? At this point I'm going to have different tooling for every project I work on.

A truly masterpiece

This is one of the coolest tutorials on three js! I’m excited to get started!!!

This is the most awesome tutorial I have seen about Three.js. Thank you !

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!

YASSSSSS!!!!! THE BEST!!!!! 🔥🔥🔥

you have no idea how much this helped, I always reference you in my projects, thanks for being my sensei

the way u explained it was so smooth, love this

It was really interesting! I thought programming 3D animations more difficult, but now I think I should try it

People might need to do an `npm install` before the `npm run dev` at 2:48

This entire video was incredible. Using grid to make 12 equal columns blew my mind.

Dude this is exactly the tutorial ive been looking for, for so long. Thanks

1:12 ‘about as realistic as the official moon landings’
What’s that supposed to mean lol

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?

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!

This is crazy !!! Expained very well. Need more tutorials on this.

Welp, there goes my weekend.

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.

Great content my friend. Concise in information and extremely facile for learning. Keep up the good work!

I didn’t think I could be a bigger fan of this channel, and then you bring up Blender 💘

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...

Great tutorial, well explained. Question: where to host such a project? I'm assuming typical shared hosting doesn't support three.js ...?

ah... this content is gold. Not a second is wasted, and yet, it does not feel too fast, amazing

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.

"it doesn't look perfect but it's about as realistic as the official moon landz#&%" 😂😂

Awesome video! I've really missed the longer and more in depth content

I almost cannot believe how easy this seems to be...awesome!

I literally just learnt about this framework a few days ago, and was wondering if someone has a tutorial for it

“Beginner friendly” 😢

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.

So compact so informative...this literally explained a lot of complicated fundamental things for me. Thank you.

The moonlanding was real tho

14:58 how did you do that? The way you show the actual grid in vs code 😧

So much information in just 15 mins. This is awesome!!!!

What absolute beasts Jeff and the Three.Js guys are!! Incredible!!

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.

On No! Fireship is taking my job away :')

Love the sly moon landing jab!
Thanks for the great tutorial.

What's mindblowing is how concise you managed to make that :) ! My own introduction to threejs was a loooong and painful process.

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?

Hey! You're da Man! I have watched a lot of tutorials and this one is really appealing.
Here is what makes it work for me: You speak fast and video is really well edited - that helps to keep the pace fast and engaging! It is not boring for more advanced users and the novice can slow it down. You are adding "pop-up" explainers for some topics outside of the scope, which is awesome!
Job well done! p.s. I would like to work with you :)

Great channel! Waiting for this tutorial for so long. ❤️

I have a question. Must I install vite with react to use three.js?

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...

Yooo so nice you're so good at making tutorials!! Continue like that!!

I started reading about three js today and this your starter video arrives! ❤️

How do you exist

First