Three.js Tutorial For Absolute Beginners

---
Timestamps
00:00 Introduction
00:44 Setting up
04:07 Coordinate system
05:57 Perspective camera
06:46 Orthographic camera
07:17 The difference between a perspective and an orthographic camera
07:48 Creating a scene and adding the camera
11:46 Orbit controls
12:40 Geometries and materials
23:27 Lights and the difference between them
24:18 AmbientLight
25:25 DirectionalLight
27:00 Shadows
29:21 SpotLight
32:42 Fog
33:41 Changing the background color
33:52 Adding a texture to the scene
36:26 Adding a texture to an object
38:42 Selecting objects from the scene
42:58 Changing the position of objects' vertices
46:13 Adding the vertex shader & fragment shaders
49:27 Importing 3D models
51:50 Making the canvas responsive
52:58 Final Words
---
Article
---
WebGL, Shaders, Vertex Shader, Fragment Shader, GLSL ES, and WebGPU In A Nutshell
---
Project files
---
The boilerplate that I'm using in my tutorials
---
Images
Vectors

[WaelYasmina]

• Looking back *I don't recommend* that you use that method of importing models.
*An even better way is to just use Vite*


• 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 5000);

2. For better output results, ensure to set the colorSpace property of the textures.

• The CubeTextureLoader requires images to have a 1:1 aspect ratio, meaning *each image should have the same height and width* .

[helloWorldHz]

you don't know how hungry I was for these content dude... THANKS!! I'm lovin it!!!

[rgabriel]

I like those kind of tutorial. Simple, explicit, but straight to the point. No stoopid intro, camera or cringe transitions

[herecode]

This is absolute gold! Thanks for putting this playlist together. This is now my entire learning journey for the next few months 🙌

[kubamatuszczak]

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.

[icanada]

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!

[TinyMaths]

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!

[tonyartz]

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

[VivekTR]

Very well explained!!! You go into the meaning of every parameter and explain it with simple illustrations. Thank you for your effort.

[DarijanAvric]

Excellent channel, very clearly explained. You definitely deserve more subscribers and likes! Keep up the good work

[dmmat]

This is how a tutorial should be. Thank you! Keep up the good work.

[dzengiztafa]

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!

[AhmedIbrahim-fiso]

thanks a lot .. 💙
free three js tutorials are very rare on youtub

[ahmadbasemalhakimshiham]

TNice tutorials is THE most helpful tutorial on Youtube imo. I am starting production in Hardstyle, and I find soft soft really useful

[arabicman]

I just clicked your video, and my god, did i skip anything? You did succeed helping me understand this amazing library ❤

[abrahamsito]

Excellent tutorial, a very complete introduction to this incredible library :)

[ColinRichardson]

28:30 - DirectionalLightHelper(light) and 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..

[_sonu_]

I really Love this video how he have explained, camera, Sean, position, look at etc ❣❤❤❤

[muzi-the-bushi]

I thank you so much for what you are doing, this has been the most helpful source material to learn Three. Js

[김규태-nf]

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.