Тёмный

Getting Started with THREE.JS in 2021! 

DesignCourse
Подписаться 1,1 млн
Просмотров 525 тыс.
50% 1

Опубликовано:

 

26 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 451   
@DesignCourse
@DesignCourse 3 года назад
Excited to learn more Three.js? Me too. Look out for more videos soon!
@krupeshanadkat635
@krupeshanadkat635 3 года назад
❤️mann! I have already bought Bruno's course, but it is too big to cover in less time.. I really wanted you or Traversy Media to pick this up!! Thanks a tonn for starting. Keep them coming!
@animedreamz2009
@animedreamz2009 3 года назад
I was looking for a course on this thanks, does he cover displacement mapping for image transitions? Good job explaining the essential for a project too.
@gad1023
@gad1023 3 года назад
awesome stuff! waiting for 1000 more
@OnBusinessPlan
@OnBusinessPlan 3 года назад
@@krupeshanadkat635 I've just finished Bruno's course, take your time and alternate between videos and text transcripts. It's definitely worth the effort!
@rukkiecodes
@rukkiecodes 3 года назад
can't wait 😍😍😍😍😍😍
@baliyachtservices7505
@baliyachtservices7505 3 года назад
This is so awesome, thank you so much! Just a note to anyone following along, I found a bit of a confusing error: The section between 43:23 and 48:37 should have been removed (he codes it correctly after) -- looks mistake in the edit. To add animate START HERE: 48:37 (don't use the code at 43:23) Only found out after wasn't rendering and couldn't figure out why...
@KangJangkrik
@KangJangkrik 2 года назад
Terimakasih 😊
@lukaskrojer9534
@lukaskrojer9534 2 года назад
Hey there, i just cant find the error. I cant figure the correct code
@techz1511
@techz1511 2 года назад
i think that the right code starts at 46:14
@MatichekYoutube
@MatichekYoutube 2 года назад
yeah, I thought I was having a deja vu :D
@AnweshAdhikari
@AnweshAdhikari Год назад
Man, this made me feel like I was dreaming or could not focus!😂 Finally, after completing the tutorial, I came to comment and check and found yours; thanks, man! I was so confused about what had happened there! For a moment, I wondered if I had mistakenly rewound the video!😂 Took me minutes to figure it out!😂
@enraihakanagi8547
@enraihakanagi8547 3 года назад
And today I was reading a lot of three.js related articles!! This is just awesome
@AbdealiSaria
@AbdealiSaria 3 года назад
more 3js please Sensei....will absolutely love a full in depth, full of examples 3js tutorial series...thanks!
@omkarkottawar8309
@omkarkottawar8309 3 года назад
This gives me a chance to learn something new in the way I like 👍 💯
@pandaengine
@pandaengine 3 года назад
This definitely made me wanna play with JS and front-end stuff. After seeing Bruno's gamified site, I am sold!
@bogdanyunakov1367
@bogdanyunakov1367 3 года назад
Gary, thanks for the nice tutorial. I remember when I was a beginner in JS and I decided to watch a couple of your videos about animations, since that moment I become better every day.
@chaoukimachreki6422
@chaoukimachreki6422 3 года назад
He laughs everytime he says "balls", other than that he is quite awesome!
@FluffehTheSheep
@FluffehTheSheep 3 года назад
same
@pmioduszewski
@pmioduszewski 2 года назад
Big Black Balls
@parkerAmv
@parkerAmv 2 года назад
SuS
@Bulborb1
@Bulborb1 Год назад
Delet this!
@johnandreigayeta3991
@johnandreigayeta3991 3 года назад
AS SOON AS YOU MENTIONED BRUNO I ALREADY KNEW IT, THAT WAS THE GUY WHO HAS A CAR MINIGAME IN HIS PORTFOLIO OH MY GOODNESS
@jonasgrnbek7113
@jonasgrnbek7113 3 года назад
That was why I watched this course! When he mentioned that you cannot build games with three.js I was like "dangit, how did that car guy do it then" haha
@anettebianca6855
@anettebianca6855 Год назад
12 years after creating my first 3D object in 3D Software I learn how to do it in a browser #Epic! Thank you! ♥
@mplovecraft
@mplovecraft 3 года назад
Wow, I started your other newbie Three.js video from 2019 and got 10 minutes in when I had to break. When I got back you have a whole new video for 2021 up. Such luxury!
@TheMarkDrake
@TheMarkDrake 3 года назад
Thanks Simon, I've been looking for the right tutorials and training for three.js and I was able to use your code to get a discount. Much appreciated. Thanks for this video!
@imprasna2539
@imprasna2539 3 года назад
Awesome Gray. Lots of love . Most awaited video playlist to be announced by you. It's finally here. You're the best
@kidbrave_7673
@kidbrave_7673 3 года назад
I'm beyond excited to learn three.js I know this is going to level me up as a vanilla js.
@kidbrave_7673
@kidbrave_7673 3 года назад
@Ayoub Bousetta I appreciate the reply brotha. 😏🤙
@MrWickerWeaver
@MrWickerWeaver 3 года назад
@Ayoub Bousetta dont you also call everything in threejs with js? Are modules not considered vanilla?
@shivankchopra8552
@shivankchopra8552 3 года назад
Vanilla would be if you implemented this all using pure webgl in the canvas element, including all 3d model parsing, vertex position determination, etc etc stuff
@jamesbrooks8680
@jamesbrooks8680 3 года назад
I just sign-up to Bruno's Three.js Journey course! Thank you Gary for the link!!!!
@leopettecrew5695
@leopettecrew5695 2 года назад
For anyone running into problems loading their normal map around 26:00, despite their code being correct; just import the normal map into your file, and then pass it through as a variable... e.g.: import NormalMap from "./textures/NormalMap.png"; const textureLoader = new THREE.TextureLoader(); const normalTexture = textureLoader.load(NormalMap);
@walnutsandbeastiality866
@walnutsandbeastiality866 2 года назад
Thanks buddy, I was stuck at that part!
@viraadbaig6582
@viraadbaig6582 2 года назад
file location according to this video is '../static/textures/NormalMap.png'
@rudyberezin8992
@rudyberezin8992 Год назад
Thx, that really helped and a good takeaway
@sujayshanbhag2055
@sujayshanbhag2055 Год назад
Somehow for me, if I add the normal map and color the object turns black. But if I remove color, I can see the texture. Any solution??
@PrimaryKenophobia
@PrimaryKenophobia Год назад
Thank you so much!
@majdshaheen8136
@majdshaheen8136 3 года назад
beautiful course and a beautiful majesty
@nozimmukhitdinov7879
@nozimmukhitdinov7879 3 года назад
on 30:10 maybe someone will have a problem like mine where i cannot make gui work properly my solution: In "//Debug" change "const gui" to "var gui" it should help
@ecookgraphisme
@ecookgraphisme 3 года назад
@ra4950
@ra4950 3 года назад
Stunning! How cool that it is! I am about to fall in love with Three JS. Thanks for your great tutorial!
@withrejkapermana6087
@withrejkapermana6087 2 года назад
I've modeling skill and also complete fullstack developer role. start with ruby and try learn deeply to js after metaprogramming. This time, Three js give me biggest change to increase my power of creativity into the next level of Website art. Thank you! I've subscribe you because your explanation are completely easy to understand.
@squidarmstrong6247
@squidarmstrong6247 3 года назад
this tutorial is really helpful, love the way you explain things. looking forward to more three.js tutorials from you!
@partisan-bobryk
@partisan-bobryk 3 года назад
This is soo cool! I really appreciate this. Can't wait to make some 3D models in blender and use them on my website.
@andresantiago8268
@andresantiago8268 3 года назад
Thank you very much for sharing knowledge. Please bring more content about ThreeJS
@serjmarkelov9915
@serjmarkelov9915 3 года назад
Hey, just wanted to appreciate all your work and all that information that your share. Big thanks
@djsnipa1
@djsnipa1 3 года назад
I’m enjoying this video and learning a lot! Thank you! Around 46:12 you have little editing snafu I think. It repeats a section about the “mousemove event listener”. Unless I’m trippin...you might want to edit that part out. Thanks again!
@indroneelray5569
@indroneelray5569 3 года назад
I think we have the same dealer
@davidrhoden
@davidrhoden 3 года назад
At about 55:55 (right before the phone rings) you added "sphere.position.z += .5 * (targetY - sphere.rotation.x)" inside of 'const tick'. When I do this it just fires with each tick, so it just flies off the screen almost immediately. How did you make it respond to the mouse movements? What did I miss? (And is there a 'final' version of the code that we could check against? Everything else is looking good.)
@andrecouturier5521
@andrecouturier5521 3 года назад
same here, the ball disappears as soon as I move the mouse... rotation.y works but x and z don't
@mathias_411
@mathias_411 2 года назад
Same here. As soon as i ad sphere.position the ball disapperas when i move the mouse. Have you found a solution?
@davidrhoden9773
@davidrhoden9773 2 года назад
@@mathias_411 no, sorry, I gave up.
@MrMasteryder
@MrMasteryder 3 года назад
Love the end result, definitely worth a subscribe
@MrTubeyboy
@MrTubeyboy 3 года назад
Thank you so much for this tutorial and your other tutorials as well. Your tutorials have definitely given me a push to the right direction and have helped me understand three JS a lot more. Very intuitive and clear tuts.🙏🏽
@kimlee8796
@kimlee8796 3 года назад
Yess ! Thank you for this tutorial !
@marksouzacosta
@marksouzacosta 3 года назад
Yes! Another new revolutionary JS framework!!!
@dafimperator
@dafimperator 3 года назад
wow the website with Bruno's course looks amazing. Very well organized information. Wish you success with sales (which is very likely looking at the content)
@andrianfirmansyah6189
@andrianfirmansyah6189 3 года назад
Thank you so much for your tutorial, I learn a lot from this channel. so I'm a newbie to this world!
@yahyaelganayni4055
@yahyaelganayni4055 2 года назад
this was very exciting I really want to learn three js now ^^ thank you very much for your content
@mohamedelidrissi810
@mohamedelidrissi810 3 года назад
Just got Bruno's course using your code. Thanks! I have a cool project idea that I wanna create using three.js! 🤗
@aionair77
@aionair77 2 года назад
I can't thank you enough for all that your videos teach me.
@soulriderist
@soulriderist 3 года назад
Great tutorial. Very well explained. I always love your tutorials. Keep up the great work.
@krisztianruboczki6580
@krisztianruboczki6580 3 года назад
When i try to load the page without live server the normalmap is not working. The sphere is rotating and the interactions are working too but the normalmap is not. Did anybody else have the same problem ?
@shubhamdhage6935
@shubhamdhage6935 2 года назад
have you found the solution? I'm getting the same msg too!
@marekkaminski5496
@marekkaminski5496 2 года назад
instead of doing weird second body css style in 54:06 we can body { overflow-x: hidden; } add overflow-x: hidden; to first block and place html { max-width: 100%; } in styles
@OleksandrDanylchenko2k
@OleksandrDanylchenko2k 3 года назад
Great video. Explains basic concepts and shows that it's not that extra mysterious and hard
@kaladoize
@kaladoize 2 года назад
Amazing course! I learnt a lot from this.
@sdwone
@sdwone 2 года назад
Just what we need... Another frontend framework! Yay!
@philippmakarov
@philippmakarov 2 года назад
Wow... So detailed. You explained it very well.
@witooz
@witooz 3 года назад
I wanted to look at it for months, but was discouraged because of the time I would need to put in because of the trial and error. Definitely looking forward to the playlist!
@thinginthenorth
@thinginthenorth 3 года назад
Excellent introduction! Thanks!
@stanislavdidenko8436
@stanislavdidenko8436 3 года назад
For the first time on programming tutorial I really literally smashed the like button. I am in.
@Dawa202
@Dawa202 3 года назад
Epic thanks again Gary! such a legend and an inspiration.
@Carlosperezvillacreses
@Carlosperezvillacreses 2 года назад
the best introduction to three.js ever
@bobobobbyboy
@bobobobbyboy 2 года назад
is the Normal Map Generator not working for anyone else? I load in the provided photo and nothing happens
@kylemcshea1373
@kylemcshea1373 3 года назад
This looks amazing can’t wait to learn this
@73dines
@73dines 3 года назад
Kudos on Bruno, animation king!
@69guigz
@69guigz 3 года назад
So grateful for this! Thank you
@muftaudeenjimoh9678
@muftaudeenjimoh9678 Год назад
Well explained... Thanks for the tutorial 🙏🏾
@GravityZ0
@GravityZ0 2 года назад
OMG THANK YOU VERY MUCH, THIS IS SO FUN
@kholiaji
@kholiaji 11 месяцев назад
in this i want new text should be displayed while scrolling.....how to achieve this?
@jason0ng
@jason0ng 3 года назад
That’s super cool!
@SiddheshKukade
@SiddheshKukade Год назад
Great Video Finally Completed
@doob4611
@doob4611 2 года назад
I thoroughly enjoyed this!! Thank you :)
@cube6338
@cube6338 2 года назад
Detailed!!!! I love this video. Thanks
@shashannkkkk
@shashannkkkk 2 года назад
sick guitar and amp too along with the tutorial!
@christianachleitner9439
@christianachleitner9439 3 года назад
What really would nice too, would be a video with three.js + something like blender :D
@hoomtal
@hoomtal Год назад
A huge Thanks! So Neat and Clear
@perfect-death4284
@perfect-death4284 3 года назад
Just what I needed! Thanks.
@hossamashraf4885
@hossamashraf4885 3 года назад
Thx alot, I extremely like three.js and I think it really makes any webpage look great.
@DesignCourse
@DesignCourse 3 года назад
Of course, that's entirely dependent on who's using it to do what. It can definitely make any web page look like garbage, too. 😂
@rvb6516
@rvb6516 3 года назад
@@DesignCourse you definitely need serious art skills to use it ^^
@huseynovvusal
@huseynovvusal 3 года назад
Thanks very much, your THREE.js tutorials are very good
@AntonyNorthcutt
@AntonyNorthcutt 3 года назад
One word - BRILLIANT.
@squeegeul2.033
@squeegeul2.033 2 года назад
him: getting started with three js also him: run some command i dont even know how he open it
@zshn
@zshn 3 года назад
Simon's course and website is legit!
@oscardosjb
@oscardosjb 3 года назад
Three.JS is just mind blowing
@vishnusit1
@vishnusit1 2 года назад
Excellent way of explanations.. make more videos on 3JS.
@LukeMartinVideo
@LukeMartinVideo 3 года назад
Hey, that was entertaining and "instructing". Well worth my time ! Thanks a lot !
@hamdikose688
@hamdikose688 3 года назад
thank you garry,you are my ıdol on this path
@bahaagirga1985
@bahaagirga1985 2 года назад
After watching that I feel exciting to learn three.js
@Neelo194
@Neelo194 2 года назад
Bruno Simon was my dev teacher for 2 years... Bruno I'm sorry but I need this video to remember how to set up three js lol
@nicikoenget8787
@nicikoenget8787 2 года назад
Really nice stuff! Thanks a lot!
@art1co
@art1co Год назад
yes that's a great day
@maazshariff9309
@maazshariff9309 Год назад
Need HELP this is my error "npm: The term 'npm' is not recognized as a name of a cmdlet, function, script file, or executable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again."
@2sis753
@2sis753 2 года назад
awesome, awesome indeed! Thank you!
@funnyanimalworld7579
@funnyanimalworld7579 3 года назад
Its like you heard my preyers and made new video about this😅
@kidbrave_7673
@kidbrave_7673 3 года назад
Seriously! I was just thinking the same thing... I ran into an unbelievable video game tutorial and had the itch to want to learn how to build video games with javascript.
@inkedcoder
@inkedcoder 3 года назад
LoveLoveLove this channel. looking forward to more
@SwaitzerJoses
@SwaitzerJoses 3 года назад
adding interactivity - I feel i m having a deja vu
@xtaylor7142
@xtaylor7142 3 года назад
how could i view this site i just made just by clicking it the index html or something instead of having start that server each time
@neoroussel5499
@neoroussel5499 3 года назад
I’m HYPED!
@marcelajaklova6560
@marcelajaklova6560 3 года назад
The tutorial is awesome. But my GUI doesn´t work. It shows correctly every property, but I can not control any values... I´ve checked the code many times. I will appreciate any help...
@nozimmukhitdinov7879
@nozimmukhitdinov7879 3 года назад
same bro, did you find anything?
@nozimmukhitdinov7879
@nozimmukhitdinov7879 3 года назад
yo, i found the solution. In //Debug change "conts gui" to "var gui". it should help
@marcelajaklova6560
@marcelajaklova6560 3 года назад
@@nozimmukhitdinov7879I fixed mine. I played too much with the code and set canvas property "z-index" to 1. That was my issue. Gui is visible, but you can´t control it.
@venkatesh2788
@venkatesh2788 3 года назад
Please make more project, we love this
@ReturnOfChef
@ReturnOfChef 3 года назад
Your are the Edward Norton of the dev world!
@eddyamoke5009
@eddyamoke5009 2 года назад
i realized many people are having an issue with the texture loader , to solve this kindly change this textureLoader to this TextureLoader in all references, finally make sure you use this material.normalMap= normalTexture;. that should solve the issue.
@mohammedhijari7325
@mohammedhijari7325 2 года назад
Hello ,will you be able to do a recent video working with Three.js ?
@fovkotov
@fovkotov Месяц назад
huge difficulties with the old version of node files in webpack
@minzcode
@minzcode 3 года назад
Super exciting!!
@timeforrice
@timeforrice 3 года назад
Great video, as always.
@DonYurik
@DonYurik 3 года назад
Im having a lot of issues with this proyect. The sphere wasn't showing up, and then watching the documentation I realized I had to give values to the phiLength and the thetalength of the geometry, which is not specified in this tutorial. I can't get the light to work either, so Ill try to fix that next. I think it must be because of a different version of the library.
@XbattlepopeX
@XbattlepopeX 3 года назад
Does anyone have a problem building this? After running an npm run build, it builds the project but the final product doesnt load the texture
@XbattlepopeX
@XbattlepopeX 3 года назад
Has anyone figured this one out? Final product after npm run dev run doesnt use normalmap.
@unrecited
@unrecited 3 года назад
@@XbattlepopeX Did you figure it out? I notice theres no way his worked based on the path he shows in the video - the image is at path static/textures/normalmap.png but he types only texture/normalmap.png - mine wont load either actually everything breaks at this point and its killing me
@XbattlepopeX
@XbattlepopeX 3 года назад
@@unrecited something to do with web pack, I just remade it without using it
@eddyamoke5009
@eddyamoke5009 2 года назад
i realized many people are having an issue with the texture loader , to solve this kindly change this textureLoader to this TextureLoader in all references, finally make sure you use this material.normalMap= normalTexture;. that should solve the issue.
@utkarshjha1969
@utkarshjha1969 3 года назад
Watched this vid yesterday and decided to go through the course. You were complaining about THREE being in all caps and the camel case methods. Js methods has always been camel case and bruno very clearly mentioned that we can keep whatever variable we want in place of THREE. I am using T for practice purpose. I hope it helps people having difficulty with it. Just change the import statement.
@SamSepiol127
@SamSepiol127 2 года назад
This is gold. And your voice really look like IceMan Isaac 🤣(go check him out you’ll blown away the voice is the same and I really like it) Thank you for all of this🙏🏻❤️
@techz1511
@techz1511 2 года назад
Thank you for this tutorial it helped me alot
@siya.abc123
@siya.abc123 3 года назад
Thanks Gary Simon this is dope !
@wennerryle5967
@wennerryle5967 3 года назад
thanks for your video. This video really give me so little knowledge about this library. And hi from Russia (thanks google translate for this translated video)
@dev-algoFr
@dev-algoFr 3 года назад
love this course thanks
@charlesTheaweDeveloper
@charlesTheaweDeveloper Год назад
Can’t run all of your threejs projects I don’t if the packages are outdated or what I’ve been trying for hours, nothing seems to work.
@boneykingofsomewhere
@boneykingofsomewhere 3 года назад
I'm a baby just starting out in javascript so i'm not gonna watch this yet BUT holy Moly those website examples are out-of-this-world!!! I can't imagine making a website so amazing.
Далее
Creating Smooth Scroll & Raycasting with ThreeJS
39:42
Help Me Celebrate! 😍🙏
00:35
Просмотров 13 млн
We finally APPROVED @ZachChoi
00:31
Просмотров 3,2 млн
I found more incredible 3D personal portfolios!!!
19:12
Three.js personal portfolios are amazing...
13:05
Просмотров 449 тыс.
Why Beautiful Websites Don’t Convert
12:57
Просмотров 143 тыс.
Have websites lost their creative flare?
4:18
Просмотров 6 тыс.
7 ways to deal with CSS
6:23
Просмотров 1,1 млн
world's shortest UI/UX design course
6:53
Просмотров 1,2 млн
Award Winning Animation With Only 20 Lines Of CSS?
6:59
I wish I knew this before using React Three Fiber
28:23
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 335 тыс.
Help Me Celebrate! 😍🙏
00:35
Просмотров 13 млн