Three.js Crash Course For Beginners | Create This Awesome 3D Website!
Вставка
- Опубліковано 2 жов 2024
- BLACK FRIDAY SALE 40% OFF ALL COURSES 🔥🔥🔥
developedbyed....
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/dev...
#coding
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
man you're my new favourite youtuber, never heard someone swearing and sneezing during a code tutorial, it makes it so real
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
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 :)
If the sphere is not showing, you should set THREE.PointLight(, 100, 100);
Looks like they updated something after the video was made.
Thank you 🥺
thanks so much bro couldn't work out why it was working
Thanks man how did that work?
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.
The reason why its black for you is because the light isnt strong enough. Use a higher value for the second parameter in your light, use a basic material or use a directional light
Thank you so much bro. It worked for me. I used 100.
But I have a question. How come the value "1" worked for Ed but not for me?
bro saved me so much time 🙏
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
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
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 😊.
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
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
Please do more of ThreeJS videos. Thank You in advance.
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.
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.
Why not for the third rgb colour not make ‘let b = x + y; if(b > 2) {b/=2} and assign b as third value this way when both red and green will be 255 blue will be 255 when you adjust red and green blue will be automatically adjusted for the third dimension you will definitely will have more colours but I don’t think you’ll have blue I will experiment with this, thank you for great video
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👍.
List style of get the fuck out caught me completly off guard. Cracked me up!
13:31 here we go we have our ball showing up on the screen 💀🍒
I think more blender and three JS Tutorials would be kindly appreciated 😊
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
And also check the proper index value for material
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
To sit in front of a white square in the middle of the night
A recipe for a serious headache
I followed up to 15 min and could not get the sphere to show up. I debugged a bit with chatGPT which added ambient lighting. But the sphere just looks like a 2d circle ...
I am an avid watcher of this channel. But no amount of love in the world is going to have me watch 45 minutes on how to make a ball 😅
If your ball is not easing in on refresh, remember to import gsap from 'gsap' 🤦♂
Hey can anyone help me out i am not able to achieve the last task. The sphere only changes into one color and doesn't change its color also I've been getting "rgb is unknown" on console... Can anybody help out?
i'm facing the same issue, it is due to maybe AddEventListener('mousedown'), i am getting false on variable or flag mouseDown,
Wonderful Tutorial again!, please more threejs content with blender
Questions can come in⬆️⬆️
import * as three from 'three';
//scene
const scene = new three.Scene();
//create our sphere
const geometry =new three.SphereGeometry(3,64,64);
const material = new three.MeshStandardMaterial({
color:"#00ff83",
})
//mesh is combination of geometery and material
const mesh = new three.Mesh(geometry,material);
scene.add(mesh)
//Lights
const light = new three.PointLight(0xffffff,1,100)
light.position.set(0,10,10)
scene.add(light)
//camera
/*
1. parameter - field of view -> how much this camera can see
dont go for more than 45 because it will start adding distortion after that
2. aspect ratio of camera
*/
const camera=new three.PerspectiveCamera(45, 800 / 600,0.1,100)
//not more than 100 and less than 0.1
camera.position.z=20
scene.add(camera)
//scene and camera are added but they are at the same position so what we are gonna do is
//move it back by
//renderer
const canvas = document.querySelector(".webgl");
const renderer = new three.WebGLRenderer({canvas})
//now define how big canvas is and where to render this thing out
renderer.setSize(800,600)
renderer.render(scene,camera)
why no output for this code
hey ed, glad you're doing good bud, keep going!
@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 😂
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
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⬆️⬆️
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
If the camera doesn't see an object, does that mean the object is not rendered?
Thanks Ed for this amazing tutorial. Is there a way to add a moon texture on the sphere?
Hey loved your background and your smily face at the beginning🌸🌸❣❣
Questions can come in⬆️⬆️
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⬆️⬆️
An extremely helpfull tutorial. thanks!
It was really hilarious when i waited for 15 mins just to see black screen on browser🤣🤣🤣
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
where is the github repo link to this video?
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🍨
So well explained, it felt like i i was solving a problem, what a great way of teaching.❤️❤️❤️🥰
another solution for the timeline 41 can be that
window.addEventListener('mousemove', (e) => {
if(mousedown){
rgb = [Math.round((e.pageX / sizes.width)*255)/255,
Math.round((e.pageY / sizes.height)*255)/255,
150/255,
]
// update colors
gsap.to(mesh.material.color, {
r: rgb[0],
g: rgb[1],
b: rgb[2],
duration: 0.2 // transition time
});
}
})
great video btw thnx for your effort
Tnx for tut.. I'm working already long time with blender.. make's the programing more understandable!
Please do more and our we can embed it into an exiting website...THANK YOOOOOOU
Questions can come in⬆️⬆️
pls more video on three jss
14:11 my sphere or square doesn't show up. i can actually see it in the black square but it's not green, more like a gray similar to black which makes it really hard to even notice that is there. why?
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!
Could you make a tutorial on spline js?? It looks really cool and feels like blender but much easier than blender.
Questions can come in⬆️⬆️
Make more videos on there.js or lunch a course of it
32:30 - bless you brother :D
I'm working now with three.js and this is an amazing new video from u coming
Vite (French word for "quick", pronounced /vit/, like "veet") 🤨
npm run dev -> results in -> npm ERR! Missing script: "dev"
I had this problem as well. The problem is that the current directory by default is the wrong folder. If you look inside your project folder, you'll see that there is another nested folder. That is the correct folder. In the terminal, set your current directory with the command "cd path/to/your/ProjectName/ProjectName"
17:42: "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec." - I've been battling with getting the browser to find/import files more with this tutorial than I have spent on the actual 3D rendering aspect of it!
you basically copy paste some code u prepared. better read the docs and dont waste time on this
Need more please like the car one
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
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
the effect discribed In this video " ua-cam.com/video/PIgQzkddVFg/v-deo.html "an annotation mark is added in gltf model in threejs,I have tried it by myselt but didn't get proper result .if you would try and make tutorial from very start to end or step by step for it , it woud be great full and thanx in advance
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!!
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
Facing error" uncaught reference error: require is not defined at Orbit controls.js" while importing orbit controls in js file ..my browser screen get blanked. Pls guide.
Mmm, so the z position of the camera. I assume the camera is pointing a direction by default, and that default direction is down. And the z is adjusting the height of a downward facing camera
.... it's so much easier now that I understand js object oriented 😭😭😭😭😭... Basics go all the way
Hi! I’m pretty new in this industry and I want to ask u What is the process of selling a website. I mean you’ve created for a client, but how we can actually sell it? What happends with files?
🌟DM for help/support👆
"because it's winter time bidge" lmao
12:25 ‐ I'm pretty sure it's always in meters, but centimeters is just a decimal of the meter (...techhhnically)
I'm 40 seconds in, haven't learned a thing, but subbed for charisma alone.
great video! Unfortunately, the PointLight is not working for me, I have just black canvas no matter what
yeah me too, have u found a way to fix it yet?
try to increase the intensity of pointlight like I did and it worked for me "const light = new THREE.PointLight(0xffffff, 150, 100)" I change it to 150 instead of 1
@@itb426_vardhanikajagtap5 thanks man it worked! really appreciate it
@@itb426_vardhanikajagtap5 This worked for me! Thank you
try using pointLightHelper
light.position.set(0, 0, 20);
const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper( light, sphereSize );
scene.add( pointLightHelper );
Your casual attitute and ease of approach makes this the perfect tutorial. I usually cant connect with tutorials but this was perfect. Well done.
Awsome Tutorial, Can I get the repo link for this?
What VS Code theme is that?
When I try to resize it, it keeps going white what should I do?
Thank you so much 👍🏻❤️
Can u try wave plotter example like ECG, Resp etc..
Love the simplicity 👏 I actually created some UA-cam 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 know this is from a bit ago but what theme are you using and what icons extension are you using? I like :D
Bro casually doing 3d stuffs just like anything.PS:He teaches it too!!!!!!
completely from scratch :D i doent even know what program you have open in the beginning
well worth 43.50 min for my first Three.js video!
btw, wanna see the little puppy face too next time :) it's cute!
Hello, whenever I try to import three js. I see browser blank white screen. How to solve this issue?
using mesh standar material and the point light does not show anything in the canvas,, anyone with this same issue?
The part where he says "we can just do a list style of get the fuck out" is my mood right now. 31:17
my browser is only randomly showing the 3d scene. Sometimes it does, sometimes not. What can I do?
From a learning perspective, I love the approach in your video!
Unfortunately, I got stuck very early and couldn't proceed. At the terminal command "npm run dev" I get an error that the script is missing. Maybe there's something prior to your installation that needs to be fixed?
Inside your package.json file, under "scripts", you need to add the "dev" key and it's value command ( for example: "dev": "vite dev", ). The value depends on your build system
@@SamirPatnaik That worked! Thank you so much 👍
@@SamirPatnaik I have the same issue but I have "dev": "vite", in my scripts and still missing script error
@@alfieable RESOLVED by typing npm install in terminal. Installs some packages and then npm run dev will work. Like this comment if it helped so more people see it!
I tried importing the threejs object but I was getting an err talking about my graphics card
List style of GTFO 😂😂 Exactly what I need to hear in the midst of this all.
Can anyone share the code please? It will be very helpful. Thanx
I'm not able to put the shadow/light, I can't understand the reason, it appears on the console, but it's not being applied to the sphere.
plese i have an array of camera has already been imported from blender with each having a parent property which points to where the camera should look at and its position, but i dont know how to move between those views(camera) smoothly with gsap. please any help, ive been stuck here
please make more of this
I am not able to setup the files , can anyone help me out?? please mention step by step how to setup in vite
"list style of get the fuck out" caught me off guard lol
for some reason the extra html "nav/title" makes it unresponsive on mobile devices
Great video! No need to curse though, lol... (I do too though sometimes)
please next one make it responsive on mobile devices because right now it is not
i got you it is super easy
You need to create a duplicate of this code
let mouseDown = false
let rgb = []
window.addEventListener('mousedown', () => ( mouseDown = true))
window.addEventListener('mouseup', () => (mouseDown = false))
window.addEventListener('mousemove', (e) => {
if(mouseDown){
rgb = [
Math.round((e.pageX / sizes.width ) * 255),
Math.round((e.pageY / sizes.height ) * 255),
150,
]
console.log(rgb)
// Lets animate
let newColor = new THREE.Color(`rgb(${rgb.join(",")})`)
gsap.to(mesh.material.color, {
r: newColor.r,
g: newColor.g,
b: newColor.b,
})
}
})
and paste it under it. Next commetn is the code you paste it
This is the code you paste:
let touchStart = false
let rgb1 = []
window.addEventListener('touchstart', () => ( touchStart = true))
window.addEventListener('touchend', () => (touchStart = false))
window.addEventListener('touchstart', (e) => {
if(touchStart){
rgb1 = [
Math.round((e.pageX / sizes.width ) * 255),
Math.round((e.pageY / sizes.height ) * 255),
150,
]
console.log(rgb)
// Lets animate
let newColor1 = new THREE.Color(`rgb(${rgb1.join(",")})`)
gsap.to(mesh.material.color, {
r: newColor1.r,
g: newColor1.g,
b: newColor1.b,
})
}
})
All you basically do is replace mousedown with touchstart, mouseup with touchend,. You need to create another rgb array and change the code because of this changes. If you just paste it below that one should work just fine.
@@davidkunavar1961 thanks but i mean the page responsiveness as in it should look goon on mobile too
rn it does but the html messes it up
thanks tho
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.