Getting Started With Three.js

  Рет қаралды 291,673

Traversy Media

Traversy Media

Күн бұрын

Пікірлер: 236
@jabezsamson
@jabezsamson 4 жыл бұрын
You are the Kobe Bryant of KZbin when it comes to Technology related channels! Great as always!
@williamiiifarquhar4345
@williamiiifarquhar4345 3 жыл бұрын
Brad you are the man! This tutorial is far superior to all others. I was getting errors like "import declarations may only appear at top level..." and all the other websites and video tutorials were saying to use node and install all these packages and bundlers... and THIS tutorial shows that you can basically just include the three.js file in the same html document, and without even importing it, have full functionality using the namespace THREE. I am really surprised that more people aren't doing it this way!
@samueldudley3181
@samueldudley3181 2 жыл бұрын
Literally everything I google as a new Software Engineer, you have made a video for. Thank you!
@RAZR_Channel
@RAZR_Channel 5 жыл бұрын
BRo... you have THE BEST Tutorials. Direct .. to the point.... I've NEVER seen a bad tutorial from you. Your intro length is acceptable and your not begging for likes and sub/patrion etc. (I mean if you do mention it it's not begging or irritating). Great work on everything... I've been in IT 20 years but mostly core stuff. now having fun with front end stuff. Thanks for everything you do!
@danielluna7648
@danielluna7648 3 жыл бұрын
Brad is the hero we need. What a BAMF. I wouldn't be where I'm at or going where I'm going if it wasn't for the almighty Traversy.
@aibrainlet8041
@aibrainlet8041 5 жыл бұрын
The first thing I ever made with code was a spinning cube in CSS to display my art. I feel like I have graduated lol. I can't wait to use this library and Blender, I swear this is my newest obsession
@InsaneGamingsz
@InsaneGamingsz 3 жыл бұрын
Just how cool are you bro. I used to watch few videos few years back and literally used to think there are so many tutorials created by you and wonder do anyone even use those technologies. And today i am here after thinking that well could there be anyone who would even talk about this library. Amazing bro thanks
@radishanim
@radishanim 3 жыл бұрын
Thanks for also displaying documentation for the code you write. Helps me understand why you are writing code the way you are writing it.
@ruhailahmad9418
@ruhailahmad9418 5 жыл бұрын
Man do you learn new technologies on daily basis?
@TraversyMedia
@TraversyMedia 5 жыл бұрын
Yes, pretty much, but it is because I teach for a living now. So I am fortunate enough to be able to dive into different technologies that interest me and then share what I learn :)
@Ne0nkiller
@Ne0nkiller 5 жыл бұрын
@@TraversyMedia Could you dive into React Joyride? I am going to work with that at my internship after summer :)
@moshe22cohen
@moshe22cohen 5 жыл бұрын
@@TraversyMedia Hello, I just finished your PHP course on udemy, I am overwhelmed of how good you explain :) keep up the good work man very much appreciated!
@ruhailahmad9418
@ruhailahmad9418 5 жыл бұрын
@@TraversyMedia you helped in shaping my career, I've learnt pretty much every Web development technologies from you. So Thank you
@bobobo1673
@bobobo1673 5 жыл бұрын
@@TraversyMedia If it is not too much to ask, do you now dedicate yourself to teaching for your own reasons or why were there no other opportunities elsewhere? I ask you why, I started in the sector a short time ago.
@maxd7228
@maxd7228 5 жыл бұрын
Channel's like this, keep KZbin relevant. Great work.
@ketibansapi4091
@ketibansapi4091 5 жыл бұрын
I love it when "just mute that".
@georgiiliev8533
@georgiiliev8533 5 жыл бұрын
please go deeper into ThreeJS. Loading models etc. loading 3d files save in a database, onclick loading, pop up scenes etc. PLEEEEEEEEAAAAAAAAAAAAAAAAAASE !!!!!!!!
@please.stop.coping
@please.stop.coping 4 жыл бұрын
There are documentations for that.
@EmilFihlman
@EmilFihlman 4 жыл бұрын
Hey just wanted to thank you for making this video! It's super clean, does not dwell annoyingly on things too long and is straight to the point. Thank you!
@tomek.z
@tomek.z 5 жыл бұрын
Thanks for another great tutorial :) I think it would be better if you used local files inside your projects instead getting them from CDN. That would show proper intellisense in VSCode and give better overview of the library.
@FairyFromTheMoon
@FairyFromTheMoon 2 жыл бұрын
Thanks for this one 🙏... now I understand why I don't get any help from intellisense.
@luuuuuuuuuuuul
@luuuuuuuuuuuul 4 жыл бұрын
Finally a concise tutorial about three.js. Thank you.
@MrMadMonk7
@MrMadMonk7 5 жыл бұрын
Trying this on your local machine and textures are missing? - If you open the file from your desktop you might find when you add a custom texture that the rendered cube might disappear. In Three.js some underlying code (polymer I think) won't work unless you are running on a local web server. If you have Xampp or another tool such as 'Live Server', load your file on there and things will work again. Hope this helps someone.
@neerajanand8567
@neerajanand8567 2 жыл бұрын
Really wanna say Thanks. I was facing the same issue and now I followed as u said it got resolved, thanks :)
@sanamkapoor1269
@sanamkapoor1269 5 жыл бұрын
You are like a magician Brad I really appreciate your work for us and you inspire me a lot towards the web development Thanks a lot man 😊😊😊
@ryz177
@ryz177 2 жыл бұрын
This is great! Watching in 2022. I hope more of these in 2022.
@jewellscott
@jewellscott 5 жыл бұрын
Omg, I’ve been waiting for this. Thank you!
@purplev2791
@purplev2791 5 жыл бұрын
I was looking for a Three.js video about a month ago and in your case it's refreshing to see it a little bit later. Because usually whenever I decide to study something new for web development, the next day you're uploading a video about it...which is a little bit creepy :)
@911madza
@911madza 5 жыл бұрын
Initial thoughts during first minute in video: 3D rendering must be relatively narrow topic with just a few tools. Couple minutes later in Google: ejecta, claygl, glslify, x3dom, whitestorm.js, cannon.js, oimo.js, twgl.js, xeogl, scenejs, lightgl.js, photon, sylvester, curtainjs, grimoire.js, hilo3d, glow, glsl.js, phologl, regl, aframe, filament.... *Yeah, I guess I forgot it's 2019 xddd*
@jornejongsma
@jornejongsma 5 жыл бұрын
Can I add to this: Babylon.js (most common alternative to Three.js); Unity3D Webassembly (the step up alternative); Shadertoy.com (digital witchcraft!)
@mhdyousuf3392
@mhdyousuf3392 5 жыл бұрын
Thank you for introducing me to Three.js , i have seen a video “thanos snap effect using js” meanwhile i don’t know what he was done. now seeing your tutorial, i think i am ready for three.js Thanks Brad.
@giliev6325
@giliev6325 5 жыл бұрын
I already know I'll love this series. Please do an episode on loaders. Thank you biiiiiiig time!!!!!!
@woltahmighty8162
@woltahmighty8162 2 жыл бұрын
This is excellent. I was able to understand everything you were saying and I was able to successfully create my first html doc with three.js
@randyh3761
@randyh3761 2 жыл бұрын
Excellent intro. Coming from unity dev, this was well laid out.
@MotM200
@MotM200 3 жыл бұрын
This was just... awesome. No more words...
@AkisLaoutaris
@AkisLaoutaris 5 жыл бұрын
I am dying to wait for the advanced Three.js tuts from you, boy. Thank you very much!
@abhijithchandran5744
@abhijithchandran5744 5 жыл бұрын
I was waiting for this. Thanks brad
@FunIsGoingOn
@FunIsGoingOn 5 жыл бұрын
Why did you waited? It's straight the most simple example from the documentation.
@abhijithchandran5744
@abhijithchandran5744 5 жыл бұрын
@@FunIsGoingOn I was waiting for Brad to start teaching Threejs, so we can expect more fun tutorial from him on this subject, like the examples we see in Threejs home page. And I know this is the most simple example from the documentation, because the video tittle is "getting started".
@vicmitchell9962
@vicmitchell9962 5 жыл бұрын
Brad I hope you feel better soon :-)
@ลุงยุทธ์ยันกัญชา
@ลุงยุทธ์ยันกัญชา 3 жыл бұрын
It's a very good tutorial. I'm easy to follow and it's not difficult to understand. Thank you very much.
@savvysoars
@savvysoars 2 жыл бұрын
Thanks for helping me get me started!!
@aljazjustin5564
@aljazjustin5564 3 жыл бұрын
Thanks, man i really like your video. You helped me make a presentation in my computer class. I hope the teacher likes it. And greate job on the vid.
@VeeWebCode
@VeeWebCode 5 жыл бұрын
I don't know how to thanks you.... You are my dream hero..
@srikantprasad6711
@srikantprasad6711 5 жыл бұрын
Thanks sir, one of the best video on KZbin for three. Js. Sir create more videos on three. Js.
@PatrickRams
@PatrickRams 5 жыл бұрын
Welcome back....and get better soon 😥😥😥😥
@haroldmcbroom7807
@haroldmcbroom7807 4 жыл бұрын
Everything worked fine for me up until 16:54. I download a .jpg converted it to a .gif using Windows 7 Paint program, and now I get black screen, any clues? Does the size have to be specific? It was a "stone" texture.
@HE360
@HE360 5 жыл бұрын
Traversy, I was wondering do you do game development? Have you also heard of Babylon.js? It is another JavaScript library and framework for making games. It is also 3D and it is like Three.js cousin.
@paranitharan3336
@paranitharan3336 3 жыл бұрын
Damn. How blessed I'm to find this video. Great explanation. Thank you so much ❤️.
@nambui152
@nambui152 5 жыл бұрын
Please continue this series !!
@citizengoose1342
@citizengoose1342 5 жыл бұрын
This library is sick. Love it
@aminzarei1557
@aminzarei1557 5 жыл бұрын
short and simple but perfect for start as always, thank you.
@Algebrodadio
@Algebrodadio 5 жыл бұрын
So looking forward to this one Brad.
@MMANJUNATH18
@MMANJUNATH18 5 жыл бұрын
Liked it. Created same just now. Thank you Brad
@everestgjonaj
@everestgjonaj 5 жыл бұрын
Just what i was looking for.I am interested on an entire series and why not a project in the end.There are not any good videos up there except for Gary’s from design course.Also you i wish you could cover GSAP in the future too.
@shovondas26
@shovondas26 5 жыл бұрын
Hello Brad, I'm your Fan, Only Your Fan, a Big Fan. I am a JavaScript Lover. I was waiting for a long time for THREE.JS. There are many videos out there but I was waiting for you. 👍👍👍👍 Thank you man 👍👍👍👍👍
@smithscarborough
@smithscarborough 3 жыл бұрын
This is SO cool! Thanks, Brad!
@0the0ambient0
@0the0ambient0 4 жыл бұрын
Great tutorial on a topic that can be a little tricky. Thank you!
@torch1ca
@torch1ca 2 ай бұрын
I think antialias does the opposite of what you think.. it makes the screen look softer, not sharper. It blurs the edges of shapes slightly so they aren't such crisp zigzags
@dragancarkic7402
@dragancarkic7402 5 жыл бұрын
How does resize event affect performance? Also what would be best way to handle that "responsive" part in real situation, how many people would actually resize the browser? Thanks Brad, love your content!
@RSTao77432
@RSTao77432 4 жыл бұрын
That third textures very cool, would look awesome on a tank or armoured car. Or on a riffle/mp5.
@Unfarepak
@Unfarepak 5 жыл бұрын
Looks like it would be simple to port scenes from POV-ray, and as it isn't a full raytracer, it should be a lot faster to render and have less hassle getting the lighting right.
@rebelmachine88
@rebelmachine88 5 жыл бұрын
Great introduction, I'm gonna try it out. Thanks, Brad!
@KarteekRakshit
@KarteekRakshit 5 жыл бұрын
Please create a bigger series for threejs. Great tutorial
@duuhhveeed
@duuhhveeed 5 жыл бұрын
Holy mackeral nice find! Im getting a paper.js vibe that acquired a couple of infinity stones!
@gauravpoudel7288
@gauravpoudel7288 4 жыл бұрын
It's traversy media. I click like even before the actual video starts :D
@f1vlad
@f1vlad 4 жыл бұрын
Thanks for this intro Brad!
@ozzyfromspace
@ozzyfromspace 3 жыл бұрын
This lecture carried me 🧡🙌🏽
@ChihebBouzid
@ChihebBouzid 5 жыл бұрын
please more three.js videos! thank you.
@giorgixyz1909
@giorgixyz1909 2 жыл бұрын
thank you so much this is such a nice intro
@pfkellogg
@pfkellogg 10 ай бұрын
Very useful. Thanks again.
@casmartensnl
@casmartensnl 5 жыл бұрын
Hi there, I've been following your tutorials since a week now. And I totally love them. However I do some things for my self so I don't copy paste everything that I don't like. I wanted to implement 3D render views on my website, but I don't know if that's too much for space on the host. Do you know if it takes up to much space or can I just add it? Thanks in advance. Keep up the good work! You absolutely nail them :).
@muneeburrehman8188
@muneeburrehman8188 5 жыл бұрын
i think threejs can make website overbloated what are your thoughts
@yoyomathematics7214
@yoyomathematics7214 3 жыл бұрын
i can't load textures. WHen i replace that with the colors it works. But when I use the textures it doesn't
@kushagraacharya6279
@kushagraacharya6279 5 жыл бұрын
Thank you so much for this, you are a hero.
@ridl27
@ridl27 5 жыл бұрын
Brad, what do you think about Svelte ? and can you make a tutorials at some point ?
@IlemonaJamesAtuluku
@IlemonaJamesAtuluku 5 жыл бұрын
First-time seeing three js video
@MrLaxr-op4be
@MrLaxr-op4be 4 жыл бұрын
My first Three JS project Started here
@RITESHKUMAR-md8fg
@RITESHKUMAR-md8fg 5 жыл бұрын
Hii Brad you are awesome man your videos really help us to grab more knowledge. Can you make video on flutter from scratch like for beginners because your way of teaching something is flawless. I hope you'll make some note.
@n_fan329
@n_fan329 5 жыл бұрын
Still I’m fasting its Ramadan and can’t stand myself not watching brad stuff ❤️❤️
@an4s3crwt
@an4s3crwt Жыл бұрын
loved the explanation Thank youu
@mandarinnu
@mandarinnu 4 жыл бұрын
This is what I need. Thanks!
@DrummerSi
@DrummerSi 3 жыл бұрын
Very well explained, thanks
@spiderous
@spiderous 5 жыл бұрын
Another excellent episode :D Will you make an updated version of MEVN stack but with Nuxt.js instead of vanilla Vue.js?
@kapa4208
@kapa4208 5 жыл бұрын
Yesss please with Universal mode, and Vuetify.
@Eltopshottah
@Eltopshottah 3 жыл бұрын
If the background isn’t rendering could it be i grabbed the wrong script tag from cdn I couldn’t find the one you were using at the time of this video
@jenniferscheinhorn6741
@jenniferscheinhorn6741 5 жыл бұрын
This is an amazing intro, thank you!
@blzz42
@blzz42 3 жыл бұрын
Great intro man 👍🏻
@noumankhan2715
@noumankhan2715 5 жыл бұрын
Nice one do we have a series coming on this?, In this age, we see daily WebGL based animated websites which are on awwwards and I just dream it someday I'll create my own effect like them
@CollinParan
@CollinParan 5 жыл бұрын
Brad, Would you go over keyboard controls for three.js? I saw some examples on their page, would like a breakdown.
@Pharaoh-99
@Pharaoh-99 5 жыл бұрын
11:42 the word you are looking for is jagged
@soajack
@soajack 5 жыл бұрын
Again, another excellent video ! Thanks !
@mimitajudin9787
@mimitajudin9787 5 жыл бұрын
Hi, I face a problem as soon as i insert the texture into the coding. and nothing came out but just a full black screen. Can you explain what is the possibilities of this problem to occur? Nice video btw :)
@dougiehawes916
@dougiehawes916 5 жыл бұрын
is it possible to make the 6 sides different? Basically, would it be possible to animate a dice?
@kumaranand5509
@kumaranand5509 4 жыл бұрын
hi there, i am going to learn 3.js from your video but wanna know do i have to cram all this code or is there any another way to remember.
@jonasleeansah1820
@jonasleeansah1820 5 жыл бұрын
do i have to include a lib to the project cos its not working
@FargoLargo
@FargoLargo 5 жыл бұрын
Man u are amazing! Hope, i can someday will be like u.
@georgeaggelou3749
@georgeaggelou3749 5 жыл бұрын
I love your videos Brad ,they have helped me a lot. Appreciate the effort and the time to make them, can you do a video about pixi.js ??
@x55554
@x55554 5 жыл бұрын
Hi Brad, I hope you are good. Would you consider making nette framework crash course? Last time I checked I didn’t found any so you would have unique tutorial. Let me know if you are willing to consider it and thanks for all your work
@wasiquehaider4727
@wasiquehaider4727 5 жыл бұрын
You are a mind reader brad ♥
@ayusharyal6346
@ayusharyal6346 4 жыл бұрын
How to learn more about it ? I'm kinda obsessed with this
@kantyDarius
@kantyDarius 5 жыл бұрын
Hi Brad, awesome job as always, could you make a threejs tutorial using height maps to create terrains
@kameronbriggs235
@kameronbriggs235 4 жыл бұрын
just make a mesh where you map the pixel coords and value to the y value of your corresponding vertices. If they arent pixel per vertex, then interpolate.
@javifontalva7752
@javifontalva7752 2 жыл бұрын
Can you make a video how to install three.js with and set everything up?
@obedasante1082
@obedasante1082 5 жыл бұрын
Thanks Brad
@ifecojahs8151
@ifecojahs8151 5 жыл бұрын
your voice is just superb
@merdanozdogan5296
@merdanozdogan5296 3 жыл бұрын
Could someone explain why he passed "false" in that eventlistener?
@ArtVandelayInc
@ArtVandelayInc 4 жыл бұрын
great video as always!
@Samir-50082
@Samir-50082 2 жыл бұрын
Nice video but can i use three.js with angular
@tajinderjsingh826
@tajinderjsingh826 3 жыл бұрын
Thanks // So effective for starters
@kitebeachinnbeachinn2888
@kitebeachinnbeachinn2888 5 жыл бұрын
How are you Mr Brad? Hope everything is great with you and your love ones; lately I have heard some positive feedback about the new (version 3) Framework called: Svelte, any tutorial soon on your channel? Thanks Mate!
@raennearr
@raennearr 2 жыл бұрын
Thank you so much for this video
@dentroubadour4568
@dentroubadour4568 4 жыл бұрын
it's not showing me the black background, and I did exact as you did.. this is all I have: const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setClearColor("#e5e5e5"); renderer.setSize(Window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
@AljoKing
@AljoKing 20 күн бұрын
Hey, did you ever figure this out?
Axios Crash Course | HTTP Library
42:20
Traversy Media
Рет қаралды 371 М.
Getting Started with Three.js: A Beginner's Tutorial
17:44
Robot Bobby
Рет қаралды 10 М.
Disrespect or Respect 💔❤️
00:27
Thiago Productions
Рет қаралды 19 МЛН
Trick-or-Treating in a Rush. Part 2
00:37
Daniel LaBelle
Рет қаралды 23 МЛН
[01] WebGL Tutorial - Hello, Triangle!
37:53
Indigo Code
Рет қаралды 25 М.
Express JS Crash Course
1:14:01
Traversy Media
Рет қаралды 968 М.
Amazing 3D Animation Website with Three.Js So Eazy
15:22
Lun Dev
Рет қаралды 55 М.
Get started with React.js & React Router 6+
3:45:30
Academind
Рет қаралды 148 М.
Getting Started with THREE.JS in 2021!
57:03
DesignCourse
Рет қаралды 525 М.
Machine Learning for Everybody - Full Course
3:53:53
freeCodeCamp.org
Рет қаралды 7 МЛН
Build a 3D Book Slider Landing Page with Three.js & React
43:26
Wawa Sensei
Рет қаралды 17 М.