Three.js Crash Course For Beginners | Create This Awesome 3D Website!
Vložit
- čas přidán 8. 12. 2022
- BLACK FRIDAY SALE 40% OFF ALL COURSES 🔥🔥🔥
developedbyed.com/
USE COUPON: BF40
Today we are going to learn how to use Three.js, which is a library on top of webgl that allows you to create immersive 3D Websites with just a few lines of code. This is a beginner tutorial on how to learn Three.js starting from absolute scratch. This will be a potential series where we dive deeper into Three.js but also learning how to model with blender.
🛴 Follow me on:
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#coding - Věda a technologie
Definitely keen on making a series out of this, hopefully progressing into making full blown 3D Websites. Let me know if you are interested 🔥🔥
Black Friday sale is still on so make sure you get it before Christmas 🚀
Absolutely
Make it free
It would be extremely beneficial in learning Three JS, Ed. Thank you for making this video.
Such a massive YES!!!, youtube series or a course, doesn't matter .. CAN"T WAIT! I have been looking for this for so long...
Yeah I will purchase your course if you made something focused on 3d
Thank you so much, it was great to follow along with the tutorial.
I will point out some things that happened to me in hopes it could help someone :)
1. I don't know why but for me, the PointLight didn't work at the values (0xffffff, 1, 100), I couldn't see the sphere at all everything was black. I had to put the intensity at 70 instead: new THREE.PointLight(0xffffff, 70, 100, 1.7);
2. In the "mouse animation colorrr" you can simply do r: rgb[0], as you mentioned, the problem is when working with graphics libraries like THREE.js and animation libraries like GSAP, the function expects normalized values for colors [0-1]. If you don't multiply by 255 and just use Math.round((e.pageX / sizes.width)) you can use them directly, no need for that extra variable newColor.
life saver, thanks a lot!
same for me, this issue have to be explained, if someone knows... (thank you @LeeMandM)
You can replace 0xffffff to 0xFFFFFF its just the maj who disturb the js
it helped me thank u!
Helpful. I had the same situation. Thanks
Just awesome explanation. Not unlike other youtubers who write a predetermined code on their console, you do errors and explain them nicely. Best webdev youtuber rn.
man you're my new favourite youtuber, never heard someone swearing and sneezing during a code tutorial, it makes it so real
Your casual attitute and ease of approach makes this the perfect tutorial. I usually cant connect with tutorials but this was perfect. Well done.
Wow, this video was absolutely amazing! I loved the attention to detail and the clear explanations provided throughout. The best part for me was watching as things got broken and then fixes were suggested to get them working properly again. This approach really helps to tackle frequent issues head-on and learn how to debug them effectively. The ability to render things out exactly how we want on the canvas is crucial, and this video showed just how to do that. Thank you for sharing such a fantastic tutorial!
This was amazing. Easy to follow, easy to understand the concepts. I started learning THREEJS and this video was a godsend to start. 100% would watch more, from basics to more advanced stuff. Great content as always.
I think more blender and three JS Tutorials would be kindly appreciated 😊
YES! Make a series of this! Great job as always!
It's a real pleasure to learn with you. Your positive tone, calm pace and explanations makes it really enjoyable. Thanks a lot
This tutorial is the first time I am trying three js. Everything went super smooth. Very nice tutorial. I only had one issue, and that was at the very beginning, but that was all my fault because I went into three js site to try and get started in there first. That was a mistake, since everything I needed to do got explained by you...soooo..yeah! Awesome job!
wow! usually i dont comment or like youtube videos, but damn you made fall in love with threejs as this was my first video about it, so thank you so much, this video is insane please do more like this
So neatly explained, I thought it's very difficult to create 3D objects but now I understand it's not that hard. Thank you for the good explanation!!
As soon as I saw this on my feed, I clicked faster than I've ever done. ThreeJS is something I've always wanted to learn
it would be awesome to have a Tuto that show what we need to instal ( like vanilla Js , node JS.... ) for the very beginer , thank you
I was literally waiting for this, you are so timely
I'm working now with three.js and this is an amazing new video from u coming
This is a great crash course. Thanks Ed. Please keep it coming, more tutorials on Three
Super helpful video as someone diving into threejs. Would love to see more!
Thanks for this awesome tutorial Ed, this one should have a million views already. Thanks for sharing value 💙
I'm really grateful for this tutorial. The way you explain is so easy to follow along. Because of your tailwind tutorial, it's my go-to for styling, and in a few months time, I'll be back to say the same thing on three.js.
Thanks for all you do
Amazing tutorial, awesome explanation! Thanks for everything, Ed! Wish u the best..
One of the best teaching styles. Loves it.))) Thanks a whole bunch. ))
I can't watch 20min+ study video in one go but, in this i don't know where time go, and this is my first video on threejs its awesome thank you🍨
I have already liked the video before watching because I know you won't disappoint and you didn't.
i was disappointed... it was only around 40min. long.... we need more of this good stuff 😄😄😄
@@kolavithonduraski5031 🤣🤣🤣... Yeah
thank you! been looking for threejs tutorial and yours come with the perfect timing. this tutorial is the best one I've seen so far
Great crash course! would you like to do some sort of series about how canvas works and maybe webgl? because i think it's kind hard to find this kind of resources, would be very helpful
Questions can come in⬆️⬆️
Thank you so much for this tutorial. I really enjoyed you style of teaching. You are very clear easy to follow along and you don't hide code or techniques. You are indeed one of the best teachers on here. Please continue to make more videos. I am new to three js. If you knnow how to do the water reflection rendering please consider making videos on the subject.
Can’t wait to implement this to my nav and and footer on my portfolio. Might do some 3d effects on the next one.
Another banger dev tutorial!
Great job 👍, but I didn't understand how you created vite project at the beginning. I don't know the framework whether it's vanilla or react. Thanks 😊.
Thank you so much 🥰, was waiting for a 3js tutorial and now planning to watch this after my end semester exams ✨🙌🏻
Questions can come in⬆️⬆️
Thanks Bro! Extremely Helpful!!
thank you. there is nothing to say about the video because it is best of the best. Please make a video using three js with react or next js as well.
Awesome, works like a charm
Please do more of ThreeJS videos. Thank You in advance.
great video, much better explanation than other videos.
Great vid! Thanks for making it.
The rgb values in mesh.material.color range from 0 to 1 where 0 is 0 and 1 is 255. So using rbg array directly will work if u jst keep the division and don't multiply it by 255. If anyone has difficulty visualising it, i suggest to go console log mesh.material.color object. The reason three.Color works is because it also convers to rgb values ranging between 0 n 1.
hey ed, glad you're doing good bud, keep going!
Waited for this for very long time
Great tutorial! thanks for sharing.
An extremely helpfull tutorial. thanks!
Just done with this amazing thing and I love this ,❤❤
Thank you
Thank you, really helped me getting me started
Wonderful Tutorial again!, please more threejs content with blender
Questions can come in⬆️⬆️
thx for the great tutorial!!
Thanks, very useful video, i apreciate it so much, regards from Chile😃👋
Really enjoyed doing this super quick tutorial to dip my toes into three.js. I did feel some type of way whenever you didn't use a semicolon at the end of a line though. I know, I know, JS doesn't care about terminators but my pettiness couldn't handle it lol
Hey I just learnt that you can pass the color directly if the values are between 0 and 1 which is what THREE.Color does it converts the rgb values to a value between 0 and 1.
Code:
const rgb = {
r: Math.round(e.clientX / dimensions.width),
g: Math.round(e.clientY / dimensions.height),
b: 0.6,
};
gsap.to(mesh.material.color, rgb);
I discovered this as well from their docs, but just to note, it works better if you remove the Math.round :)
That's really amazing.... thank you so much for the tutorial ...
Questions can come in⬆️⬆️
I understand what you're saying about the context of units being arbitrary at 12:25...
But in reality, I believe those units are in pixels (px) by default.
Please correct me if I'm wrong👍.
Thanks Ed for this amazing tutorial. Is there a way to add a moon texture on the sphere?
Oh wow, I was just needing this but with the planet Eath instead of a green ball
hey thanks for the tutorial , very much beginner friendly and could be consider for starting out in journey of learning 3js , wonderfully explained the procedure , functions thanks for this , although encountered bit troubleshooting specially at the pointLight and that's all , and again thanks for this brother
Thank you so much for this
well worth 43.50 min for my first Three.js video!
btw, wanna see the little puppy face too next time :) it's cute!
wow, you are just amazing 💯💯💯💯
You are amazing ed
That was a good course I have learned a lot.
Thank you so much 👍🏻❤️
You are amazing!!!
Ed looking even more "gorgeous" in that awesome Christmas sweater. 🎄 ⛄
Awww cheers!
Hey loved your background and your smily face at the beginning🌸🌸❣❣
Questions can come in⬆️⬆️
List style of get the fuck out caught me completly off guard. Cracked me up!
Cool, thank you.
the sphere is not visible, i tried all combinations of what is shown here, black screen is visible but no sphere and no camera, but they are apparently present in scene, checked by console log,
EDIT: the issue is of meshStandardMaterial, it is not working correctly but meshBasicMaterial is working ..
Basic material doesn't need light. But standard material needs light to show up, ,,, so that's must be causing the error , try adjusting the light
That's awesome!!!
please make more of this
This was a really helpful tutorial! I just got a quick question, how would you go about adding html content under the three.js elements?
Thank you so much! would you mind dropping a codepen for this? I can't tell if i have a bug in my code, or i simply ran the vite app wrong. Really love your stuff! thank you brotha
Questions can come in⬆️⬆️
Great video!
please make more videos on three.Js BTW great work 😇😇
you are GOAT in explaition🌹🌹
Full course please. From one Ed to another
Love the breakdown of using the native functionality, but how do you import 3D models in to use them?
WOW!
Thanks you
came in perfect timing
Love you dude
I am looking for a framework that can help animate a character based on the real time data feed like IoT or a sound or input text. Is this possible to do using three.js ? Or do I need to use some other animation engine? Can you suggest? Thanks so much in advance
I'm 40 seconds in, haven't learned a thing, but subbed for charisma alone.
Start completely from scratch, yet packages, files, githuh,etc. were already created in the file explorer before you started. Good job.
heyyy i was figuring out how to use vite here, do u know how to do it ? coz everytime i create a project with it , it asks to select a framework like react etc , but he doesnt seem to use any
Select vanilla, vanilla means without framework. @@rikawrites7104
I'm getting a problem here since yesterday. if someone is not seeing the green ball at all. increase the intensity of the pointlight at the second parameter (I used 100 and works well. don't know why)
thank you
thank you so much it was a big help!!
thank you so much for this! I spent an hour not knowing why my greenball wasn't showing
completely from scratch :D i doent even know what program you have open in the beginning
@32:14, you should to put `transform: translate(-50%, -50%) to position it correct, whether you're giving it `top: 75%` or `top: 25%`.
I think I will try this 😂
Lovely video, I'm curious is there a github repo for this project?
Perfect video
Please do more and our we can embed it into an exiting website...THANK YOOOOOOU
Questions can come in⬆️⬆️
I know this is from a bit ago but what theme are you using and what icons extension are you using? I like :D
well explained from scratch
AMAZING VIDEO
Is there a way to turn a sphere like this into a button, that when clicked zooms in and takes you to a different concept page
love the sweater
Can u try wave plotter example like ECG, Resp etc..
Love the simplicity 👏 I actually created some CZcams videos about Bruno Simon's portfolio project. Willing to help you with the full 3D website series if you need any help there :)
Questions can come in⬆️⬆️
I haven't coded much in javascript in a while. Just curious why you don't seem to use semicolons?
YES PLEASE
pls more video on three jss
Awsome Tutorial, Can I get the repo link for this?
Make more videos on there.js or lunch a course of it