• Looking back *I don't recommend* that you use that method of importing models. Here's a way better method (the first half of the video): kzitem.info/news/bejne/x2eIyHiVsJ14o5g *An even better way is to just use Vite* • Article: waelyasmina.net/articles/three-js-tutorial-for-absolute-beginners/ • To run the server you need to run *npx parcel ./src/index.html* now instead of parcel ./src/index.html • Three.js r155 updates: 1. You need way higher values for light intensity. example: const spotLight = new THREE.SpotLight(0xFFFFFF, 5000); 2. For better output results, ensure to set the colorSpace property of the textures. Check out this video to learn more about color spaces: kzitem.info/news/bejne/l46s15WlpJymjIo • The CubeTextureLoader requires images to have a 1:1 aspect ratio, meaning *each image should have the same height and width* . • This is the boilerplate that I'm using in my tutorials: github.com/WaelYasmina/ThreeBoilerplate
@HyperEditz333
Жыл бұрын
I can't do this parcel./src/index.html
@WaelYasmina
Жыл бұрын
@@HyperEditz333 It's npx parcel ./src/index.html
@HyperEditz333
Жыл бұрын
@@WaelYasmina everything worked out thanks
@HyperEditz333
Жыл бұрын
@@WaelYasmina do you happen to have any telegrams
@HyperEditz333
Жыл бұрын
@@WaelYasmina I have something stopped working can you help
@helloWorld432Hz
2 жыл бұрын
you don't know how hungry I was for these content dude... THANKS!! I'm lovin it!!!
@rgabriel5043
Жыл бұрын
I like those kind of tutorial. Simple, explicit, but straight to the point. No stoopid intro, camera or cringe transitions
@here2code
Жыл бұрын
This is absolute gold! Thanks for putting this playlist together. This is now my entire learning journey for the next few months 🙌
@DarijanAvric
10 күн бұрын
Excellent channel, very clearly explained. You definitely deserve more subscribers and likes! Keep up the good work
@kubamatuszczak5619
Жыл бұрын
I'm halfway through the tutorial and can definitely say it's the best three.js I've ever followed by far! Tried to get into it several times, even with some paid ones some time ago but just couldn't wrap my head around it. This one is super thorough and easy to follow, big kudos to You.
@mohammedhashim6242
9 ай бұрын
Hey, did you face any issue with the spotlight not hitting the subject
@egedesolomon7454
8 ай бұрын
thanks for the review, was useful
@MikeBooger
7 ай бұрын
I faced the same problem, set spotLight.decay to 0 then voila; it cast lights now@@mohammedhashim6242
@tonyartz
2 жыл бұрын
For those confused about their cube texture not working, make sure your texture is in 1:1 ratio, as in, it must be a square image and rectangles don't work, thought I would clarify since the source images provided are not square and you must crop it to make it work, hope it helps
@khantzawhein2605
2 жыл бұрын
Bro how do you solve that error?
@khantzawhein2605
2 жыл бұрын
My cube texture also not working.
@tonyartz
2 жыл бұрын
@@khantzawhein2605 which texture are you using ?
@thespiritcode4006
2 жыл бұрын
You're a life saver man. I was stuck on this!
@kyrregjerstad
Жыл бұрын
Thanks for this, couldn't figure out why it didn't load!
@icanada4
2 жыл бұрын
I am not very new to Three JS - but this video has definitely inspired me to do some more stuff in Three JS. Thank you!
@김규태-n7f
5 ай бұрын
About spot light, current documentation clearly states that the default decay is 1, and if you want a constant intensity irrespective of distance, you should set decay to 0.
@xt3rm1nat0r8
4 ай бұрын
Is that why lights seem kinda darker at my side than his? everything looks lot darker than it looks in the video
@etab4424
4 ай бұрын
Thank sir
@AhmedIbrahim-fi2so
2 жыл бұрын
thanks a lot .. 💙 free three js tutorials are very rare on youtub
@WaelYasmina
2 жыл бұрын
Keep an eye on the channel, because I'll make sure they will not stay as rare as they have been ;)
@VivekTR
Жыл бұрын
Very well explained!!! You go into the meaning of every parameter and explain it with simple illustrations. Thank you for your effort.
@toannew
2 жыл бұрын
4:00 how to remove the scrollbar in google chrome 29:00 how to take the correct shadow 31:10 solve the pixelaton of spotlight (pixelation: the shadow is not as expected)
@WaelYasmina
2 жыл бұрын
**Khaby Lame reaction**
@TinyMaths
6 ай бұрын
This video is a time saver; if only I watched this before I jumped into three.js a few days ago. I could have saved myself some headaches. Learned my lesson. I'm here to get a good grounding in the basics. Thank you!
@ColinRichardson
6 ай бұрын
28:30 - DirectionalLightHelper(light) and CameraHelper(light.shadow.camera) are single handedly the best things I have learnt from all of this.. This answered SO SO many questions I had been having and had given up on because it was "just acting weird"... Now I can SEE what is happening, and now I can see the camera was too big, and far/near was just all wrong..
@dzengiztafa510
2 жыл бұрын
This is by far the best tutorial on the subject. The allround 3d part was really helpful. Just found yr channel. I'm def following the entire series!
@WaelYasmina
2 жыл бұрын
Awesome, thank you!
@valentinkrajzelman4649
10 ай бұрын
for those who are having touble with the mouse recognition, the code in the video is slightly wrong, maybe it was corrected afterwards and i didnt see it, but to get the mouse position in the screen is: const mousePosition = new three.Vector2; window.addEventListener('mousemove', function(e){ mousePosition.x = (e.clientX / window.innerWidth) * 2 - 1; mousePosition.y = (e.clientY / window.innerHeight ) * -2 + 1; }) notice the -2 that was missing before, also make sure the size of the renderer is the same as the window, if not, this snippet is useless
@basilekamm3329
9 ай бұрын
Thanks a lot for that
@JimmyJazz5964
8 ай бұрын
For some unknown reason, on refresh, I get (phantom arrays) an 'intersects' array of length 10 and then a series of array lengths 8, even though my mouse was off the page. My sphere was included in these arrays which meant it coloured red from the start. I had to hack this workaround before I could get it to work :- if (intersects.length < 8) { for (let i = 0; i < intersects.length; i++) { if (intersects[i].object.uuid === sphereId) { intersects[i].object.material.color.set(0xFF0000); }; }; }; Maybe if someone knows why I'm getting these phantom arrays in the first place, I can remove my hack.
@JimmyJazz5964
8 ай бұрын
These phantom arrays continue until I move the cursor across the page. It then reverts to an empty array untill I move the cursor over an object(s).
@gbadamosimateen940
4 ай бұрын
Thanks so much, you're a life saver. I was on the verge on giving up when I saw your comment. I can't thank you enough
@valentinkrajzelman4649
4 ай бұрын
@@gbadamosimateen940 👍
@arabicman866
Жыл бұрын
I just clicked your video, and my god, did i skip anything? You did succeed helping me understand this amazing library ❤
@ttyu1999
9 ай бұрын
29:21 regarding the spotLight section, increasing the intensity value will result in a lighting effect. const spotLight = new THREE.SpotLight(0xFFFFFF); spotLight.position.set(-100, 100, 0); spotLight.castShadow = true; scene.add(spotLight); const options = { sphereColor: '#ffea00', wireframe: false, speed: 0.01, angle: 0.03, penumbra: 0.5, intensity: 50000 }; gui.add(options, 'intensity', 0, 100000);
@alifibnnoor1891
9 ай бұрын
thanks man
@hungji-dq3jy
8 ай бұрын
great help, thanks a lot!❤
@miguelenriquepenacordova1758
5 ай бұрын
thanks 👍
@abrahamsito
2 жыл бұрын
Excellent tutorial, a very complete introduction to this incredible library :)
@WaelYasmina
2 жыл бұрын
I'm glad you think so, thank you Abraham!
@thihahtunnaing5999
2 жыл бұрын
Only half-way through the video and I already understand what three.js is capable of. Very nice explanation and this is a really brilliant video. You got a new subscriber! Please keep up videos like this.
@WaelYasmina
2 жыл бұрын
Thank you!
@_sonu_
Жыл бұрын
I really Love this video how he have explained, camera, Sean, position, look at etc ❣❤❤❤
@sanarahman6996
9 ай бұрын
perfect tutorial for learning, just play with the values to get a better idea
@muzi-the-bushi4516
Жыл бұрын
I thank you so much for what you are doing, this has been the most helpful source material to learn Three. Js
@AhmedMostafa-fc1od
Жыл бұрын
I think if this content translated to Arabic it will be one of the most successful content for Arab keep going and thanks for the way you explain every point
@mohamadrayan
Жыл бұрын
شكرا جزيلا يا بيه This is so great brother straight to the point and very organized/informational.
@clydeeisenbeis8625
10 ай бұрын
The "parcel ./src/index.html" did not work (3:17). The "npx parcel src/index.html" did work. Excellent video! The only YT video, I found, that actually works!
@ottaviano007
3 ай бұрын
I used the comand but it still didnt worked. It tells me "Failed to resolve 'main.css' from './src/index.html' even after i deleted the css
@nguyendactung
7 ай бұрын
I dont even skip anything. Very wow tutorial
@MuhammadHammad-n3g
3 ай бұрын
Thank You sir! Your teaching method is amazing. I have learnt a lot.
@matinsurchi2986
10 ай бұрын
this is the most perfect tutorial I've ever seen, great work!
@darkside3ng
Жыл бұрын
this is an amazing job!!!!! Your really clearly explained very well and I loved the evolution of the content description. Thank you so much. :) :) :)
@HuynhLuong227
Жыл бұрын
Last this video I hear you speak vertex shader and fragment, wait you make it. Thanks🎉🎉🎉
@rizqyhbb
2 жыл бұрын
This is so so deep, detail and complete lesson, thankyou for providing this
@WaelYasmina
2 жыл бұрын
No problem!
@b3rt1e13
2 жыл бұрын
Fantastic tutorial, well explained/organized. thanks so much
@karennunrein4320
Жыл бұрын
now i am in a good mood
@toannew
2 жыл бұрын
Thank you very much ! Very helpful ! Please make next serie on the immediate or advanced levels.
@WaelYasmina
2 жыл бұрын
Sure thing!
@ridhamsharma618
Жыл бұрын
Thankyou brother i found the best tutorial for three js now.
@davisnoah8079
11 ай бұрын
I had to add an intensity to the spotlight manually as it is undefined by default. I added it by initializing the spotlight like this: const spotLight = new THREE.SpotLight(0xFFFFFF, 100000); spotLight.position.set(-100, 100, 0); I hope this helps someone.
@lifemanager9999
11 ай бұрын
it does thanks
@trungtrung2248
10 ай бұрын
thanksss
@chalitacharoensub3880
9 ай бұрын
great help, thanks a lot!
@mohammedhashim6242
9 ай бұрын
Thanks a lot friend
@JimmyJazz5964
8 ай бұрын
Saved me a big headache! I rewound back to the beginning of the lighting section, thinking I had made a mistake somewhere.
@anarmusayev.4
4 ай бұрын
Great tips and insights here- Thanks for sharing!
@psy237
Жыл бұрын
it's like using a 3D software! fantastic beginning of the tutorial! sad it stops when it gets interesting, hehe, but really good introduction, thanks a lot. edit:after having tried to get other peoples implementations i have to say, your tutorial rocks!! with all others I had quite problems often to even get it running in the first place, with another solution code-autocomplete didn't work, etc! Great Job on this tutorial :)
@alihammad8667
2 жыл бұрын
Thank you so much for this amazing tutorial
@WaelYasmina
2 жыл бұрын
My pleasure!
@RmaNYouTube
Жыл бұрын
this really looks cumbersome in oppose to game engines or 3D applications. such a headacge for simple tasls.
@LeanVasconcellosoficial
Жыл бұрын
Thanks for this tutorial! It's amazing. You made my day!
@g-git
7 ай бұрын
Thank You very much! You are an amazing teacher!
@manjeshkumarsharma
7 ай бұрын
amazing tutorial
@Florian-6464
8 ай бұрын
Thanks a lot for this very complete tutorial !
@phamvanmy2972
2 жыл бұрын
Thank you so much for this course, it's really great, good luck in your life!
@mdiqbalhossain5330
Жыл бұрын
This is a very good tutorial i ever seen . many many thanks
@Jonasmelonas
2 жыл бұрын
Very nice tutorial, excellent visually. A tip for future videos is to make your voice a bit less monotone/sound less like youre talking from a script. And "talked" is not pronounced "tal-ked", its "taakt" :)
@WaelYasmina
2 жыл бұрын
I'm actually reading from a script. It's hard for me to explain without one because I have to think how to say this in English and also what's going on in the video which so hard for someone who's not a native speaker unfortunately. But I'll try to fix that. Thank you for the tip!
@mdamirul8518
2 жыл бұрын
Thanks for the video, very helpful and well explained. Off to make so soft
@Rock_Film
8 ай бұрын
Awesome! You are my precursor.
@lionelguaregua820
Жыл бұрын
Wow, this is amazing and well explained, good job here
@taufiqibrahim
Жыл бұрын
Very helpful explanation! Thanks
@theman7050
2 жыл бұрын
You nailed it brother!! I suggest you please take some topics from Yuri Artiukh's channel and teach us those advanced Three.js concepts too down the line. Yuri explains well, but he does live sessions so his videos are all over 1 hour based on trial and error and not possible for the average man to devote time for. And the npm install thing he uses at the beginning gives a boiler plate with that rainbow coloured plain which he builds over. That I fail to understand. Thanks again and wishing you a bright future :D
@WaelYasmina
2 жыл бұрын
Thank you! I'm actually not an expert, I started learning Three.js 10 or 11 months ago. The main idea of the channel is to share what I'm learning with other fellow beginners. And that by creating videos as answers/solutions to questions/problems I once faced. Which makes it easier for them to find the solution instead of putting their time into researching. Having said that, yes as long as I continue learning and experimenting the level will eventually slowly increase. Thus, I will be creating some cool unique stuff.
@theman7050
2 жыл бұрын
@@WaelYasmina awesome!!
@VivekTR
Жыл бұрын
@@WaelYasmina I was facing some of the same problems. You presented all the solutions I needed. I really appreciate you for doing this.
@ClovisNeto
Жыл бұрын
That is an amaaaaaazing explanation which covers everything I wanted to know about threejs. Thanks man! Ps: for who is struggling in understand the concepts of camera, lights raycasting and shaders, maybe taking a look on game development with Unity3d or Unreal might helps you to understand the basics. Agaubs tgabjs Wael, very nice video!
@moddedlaker
20 күн бұрын
A life SAVEr!!!
@sghayeroumayma8506
2 жыл бұрын
Very good tutorial, clear and to the point.
@WaelYasmina
2 жыл бұрын
Thank you Oumayma!
@Nani-wq6th
9 ай бұрын
This videos so helpful, thank you so much!!
@msee254
Жыл бұрын
I needed this. Thank you
@LulululuZzzz
Жыл бұрын
Why when I type npm init in the terminal it says the term npm is not recognized as the name of a cmdlet…
@Artem-u5e9c
11 ай бұрын
Very useful! Thanks a lot, man!
@glitched_code
Жыл бұрын
Very well made tutorial, thank you!
@AjaxMinecraft16.
Ай бұрын
great tutorial btw im using sublime text 4 and the browser sync extension and it works great. edit1: at 35:24 i had some issues with loading the images because im not using parcel so instead of doing import name from img file i instead did let name = img file.
@deepakgadwal008
Жыл бұрын
can anyone tell how they get black background which i dont get
@jayme421
Жыл бұрын
Love this tutorial, thank you.
@esgicoding.8555
2 жыл бұрын
I have follow an Udemy course and it's well explained as this one, also it's good that you use the helper, I have no idea what it's for previously
@WaelYasmina
2 жыл бұрын
Nice!
@erfanazkat2133
2 жыл бұрын
love it please make more advanced video
@WaelYasmina
2 жыл бұрын
Will do. Thank you
@ImperioAme
Жыл бұрын
excellent tutorial. Thank you!
@tharindusandeepa4462
Жыл бұрын
you are a good teacher ❤❤🙌🙌
@yurinativo
2 жыл бұрын
Awesome tutorial, great work man!
@WaelYasmina
2 жыл бұрын
Thank you Yuri!
@kemalcetmen6042
2 жыл бұрын
bro thank you so much . Perfect tutorial.
@WaelYasmina
2 жыл бұрын
You're welcome!
@hanhtrangtvt227
10 ай бұрын
25:35 after add(directionalLight) my plane color doesnt turn to light, it's gray and grid show on bottom plane ???
@romasbitinas643
7 ай бұрын
There were some breaking changes in three.js, apparently, because your issue is related to newer versions. A possible solution is to downgrade to 0.133.0 version by run command "npm install three@0.133.0"
@AdityaKumar-cp7we
Ай бұрын
I want to ask if I am learning web development is it helpful for me?
@elmapping6879
Жыл бұрын
Really nice and helpful... Thanks!
@ddthemaste
Жыл бұрын
my package.json is : "devDependencies": { "parcel": "^2.8.3" }, "dependencies": { "three": "^0.149.0" } however I still get error whenever I put CSS into my HTML. Could anyone tell me why?
@trapma
Жыл бұрын
thank you very much for the tutorial, I think I found a small mistake. on the video "39:42", on the graph where the original coordinates are shown, instead of (480, 0) it should be (480, 476)
@ashoketiwari2653
Жыл бұрын
for the question at 30:55 yes it still gives pixelated issue it was not ur computer performance issue
@barbumihai5331
10 ай бұрын
Love from Uzbekistan
@noer-man
Жыл бұрын
many people helped with your tutorial, can you add a tutorial on adding custom animation from mixzamo to three js
@native-nature-video
Жыл бұрын
Thank you for tutorial!
@user-hm7pm3gp4w
2 жыл бұрын
Nice tutorial.... Very helpful
@vetoro1548
2 жыл бұрын
Thank you for providing useful tutorial in this video. I've learned about D3.js before, until finally stopped halfway to learn animation. It is highly recommended to be able to draw as an animator. when at the stage of learning to draw, a video appears about AI that can create art with just a typed description. there I was confused whether what I learned could be replaced with AI in the future. Until finally after a long research, I found this content and it is very promising for the current development especially in the future if the metaverse is REAL. Because I enjoy doing work that uses 50% logic and 50% art. Thank you again for sharing this knowledge, I ask permission to learn from this playlist.
@WaelYasmina
2 жыл бұрын
That's so nice to hear! I've just watched your videos and I see you're talented at drawing. I bet you'd do some amazing stuff with your drawing skills + Blender + Three.js.
@WaelYasmina
2 жыл бұрын
Oh and I'm your 15th subscriber btw :p
@vetoro1548
2 жыл бұрын
@@WaelYasmina Thanks Sensei :D I did my best to learn three.js over the next 3 months. If this is something I've been looking for all along, then I'll keep learning until I master it
@valentinkrajzelman4649
10 ай бұрын
impressive vid, Thanks!
@kinanhawri6906
Жыл бұрын
great work
@devmartinez
2 жыл бұрын
Amazing content, thanks!
@WaelYasmina
2 жыл бұрын
My pleasure!
@4RFD4
Жыл бұрын
I'm 8min. in this video and all I get is a white blank page... :\
@kahlis_dev
8 ай бұрын
Welcome to 3D rendering programming, even with one of the most basic one
@sayidinaahmadalqososyi9770
8 ай бұрын
😅
@27su58
Ай бұрын
Don't forget const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x0000FF, wireframe: false, }); MeshLambertMaterial => MeshBasicMaterial otherwise,gui.addColor(options, 'sphereColor').onChange(function(e) { sphere.material.color.set(e); }); sphere can't change color.The reason is LambertMaterial is abosulutly black without the light.
@leibaalex6641
6 ай бұрын
GREAT JOB!
@fakhrioficial8061
Жыл бұрын
Thank you very much for your key......1000% work :)
@orxion
2 ай бұрын
when in terminal, i dont see the left part .. with tabs, explorer, etc .. just the stuff like cmd
@drunkmadala
2 жыл бұрын
This is Gold.
@WaelYasmina
2 жыл бұрын
Thank you!
@webmasterashishgaur
Жыл бұрын
I was waiting for this type of tutorial series for so long thanks bro keep posting your good work, only I am unable to render cube geometry
@aminebouzaid5971
8 ай бұрын
You are the best man 🌪️🤍
@tugbayatilla
2 жыл бұрын
it was great tutorial, thanks.
@WaelYasmina
2 жыл бұрын
No problem!
@brianramirez9713
11 ай бұрын
best tuto
@mosesmccabe8983
Жыл бұрын
Wow, thank you.
@KIDDLY_ZONE
5 ай бұрын
Amazing bro❤❤❤❤❤
@chriscalver8595
8 ай бұрын
awesome video
@9ryu108
9 ай бұрын
nice tutorial thx
@sporkspork8556
Жыл бұрын
I am unable to load the .glb file and no instance of it is created in the dist folder when I save it.
@Lofibree
Жыл бұрын
You should try to import file intead of using URL class. At least It worked for me.
Пікірлер: 341