Learn Three.js from Scratch: Crash Course Tutorial
Vložit
- čas přidán 28. 05. 2024
- Add star fields, click-activated camera movements, and seamless transitions with the full course at chriscourses.com/threejs-bundle
Practical three.js development is rarely taught these days, but let's see if we can fix that-this course aims to demystify the process of developing an interactive 3D environment in the browser.
🔗Links
Finished Project - codepen.io/chriscourses/pen/G...
Three.js Installation Page - threejs.org/docs/index.html#m...
Three.js unpkg CDN - unpkg.com/three@0.126.1/build...
Orbit Controls CDN - unpkg.com/three@0.126.1/examp...
📃Table of Contents
00:00 - Install three.js & vite
17:41 - Create a scene, camera, and renderer
24:26 - Add a box mesh to the scene
30:43 - Animating and rotating the box
33:22 - Add a plane mesh
40:08 - Add directional lights
42:17 - Add depth / jaggedness to plane
52:23 - Modify to taste with dat.gui
1:07:23 - Rotate scene with OrbitControls
1:12:13 - Add hover effect
1:43:08 - Tailor hover effect to exact colors
1:44:54 - Fade out hover effect over time with GSAP
1:50:32 - Begin to set plane to exact dimensions
1:55:21 - Add randomized vertice movement
2:11:43 - Finishing exact plane dimensions
2:17:51 - Add interface with HTML and CSS
If you are having trouble with the 'Flat Shading' property not being recognised, (at around 50 mins into the video) this is because the newer version of 3JS just takes a boolean value. Replace 'flatShading: THREE.FlatShading' with 'flatShading: true'.
THANK YOU SIRRRRRRR
damn was having similar issue thank you
The only video in the whole platform that thoroughly explains everything perfect, thank you
true
Man I have to say this tutorial is awesome! Best one I have seen so far. You are very good at explaining everything. Thank you!
Didn't intend to watch 2hours plus video but this guy's voice is soothing.
Thank you for the tutorial! A few parts moved really fast, but overall it helped a lot! I was struggling to get three.js setup but your solution with Vite fixed it! Thanks!
Love how you explain everything so thoroughly
Wow, great tutorial. I just finished the project, and learned an incredible amount. You explain everything clearly and fully. I hadn't used Vite before, so that was cool. This project got fairly complex (for me), but I'm confident that I can create unique projects from what I've learned. Looking forward to Part 2 of the course on your site
You're the best dude, really appreciate your work!
Great tutorial. A lot of concepts of Three JS. Thank you.
Great tutorial Chris. Thanks so much! Watched the complete two hours :)
Amazing tutorial, now I get a grasp on Three.js!
You did a really awesome job. I am very grateful!🤗
This is a terrific explanation. I really like the way you pay attention to the little things that experienced programmers understand, but can be confusing to newcomers.
GREAT video! Really good information...thank you very much. Clear and simple
Thanks Chris, high quality tutorial!
Chris. Thanks a lot. This is what I have been looking for since yesterday!
Finally my canvas teacher is back with another amazing tutorial 😍😍
You're awesome! You know what you are teaching. Thanks.
very well explained even in the first 30 seconds I was able to get a grasp of the whole concept
Amazing tutorial, just like always 🙌
Man, not gonna lie, the way you explain things is amaze me. Thanks man!
Excellent video. I don't know how I missed it!
thank you, that really detail, although I know how to use threejs, but I still can learn more from your video
Awesome tutorial! Thanks!
Thanks for this amazing tutorial, I watched all up!
The most comprehensible tutorials about THREE are on your channel and DesignCourse's one :D (which started a THREE series recently)
thank you so much for the great content and for your wonderful way of teaching!
1:59:50 I think `originalPosition` is going to get changed along with `array` because arrays in js are passed by reference instead of by value. So whenever you change a value in `array` it's also going to change `originalPosition` since they both point to the same array in memory. To get an "independent copy" of the position, you could use the spread operator to copy all the values of `array` into `originalPosition`. But i guess the effect works just fine without it, so we probably don't need an `originalPosition` array in the first place. I tested it with `array[i] = array[i] + Math.cos(frame)` instead and it worked just fine.
Thank you for the video, it helped me a ton to get started with three.js! :)
First, I am a complete beginner at JS but know a bit of math. In asking myself what the units mean, such as width = 5, I discovered that the FOV is for one direction only. In my case it was for the vertical. The FOV for the horizontal is larger. The units interact with the FOV and camera position. If you change the camera.position.z from 5 to 10, the red plane shrinks by one-half. If you increase the field of view to 113.8 degrees, the red plane also shrinks by one-half. for the curious, 113.8 =2* arctan[2*tan(75/2)]. In some ways it is just like the real world. You can only estimate the size of an object if you know how far away you are. Our personal FOV is pretty much fixed so we don't pay much attention to it. However, if you looked down a tube (like for paper towels) your FOV would change drastically and size estimation would be most difficult.
Dude please make more tutorials on three.Js..... Guys like you are just rare
You are just amazing
Thanks. Simply superb.
Fantastic! Learned a ton, thanks for delivering useful content in a fun, engaging and friendly style!
Christopher has an amazing 🎁 for teaching.
Thank you - great tutorial!
thank you man for this priceless tuto
this is the only video that is good out off every other videos of three js on youtube
Loved it, super useful !!!
Very informative Chris for what I'm doing. Thank you for sharing your knowledge.
Very welcome, thanks for watching!
ONE OF THE BEST IF NOT THE BEST VIDEO I WACHED ON THREE JS Thank you
Liked it, subscribed, and thanks so much.
this content is on fire🔥🔥🔥🔥🔥
Thanks so much, Chris!
I wish I found your channel earlier, you got a great teaching style, and explain everything very well.
Awesome! Thank you.
very detailed tutorial thanks so much! It would have been even better if you showed the npm but, thanks!
Learning from u a lot sir. Thanks.
oh my goodness thank youuuuuuuuuu. SO MUCH
perfect, thank you
Best three tutorial ever
Nice video! Just a PSA, it's one vertex, and two vertices.
three vectors and four horsemen
Thanks sir..I love your all vides.
Really amazing Thanks a lot
Intersects 1:22:39
You are legend !
Thank you for the tutorial, totally love it.
Btw. Vite is prononce as "Veet" (it mean "Fast" in French)
To me it looks like Bite, Site, Kite... Vite.... I pronounce it like might,......lol
@@TwstedTV You pronounce it wrong
This was an excellent tutorial! I learn so much. Great step by step teacher!
this information is too good to be on here
Great tutorial thanks Chris ! I would like to add html after/under the "" however it only seems to add above. Anyone got the same issue ?
u are amazing dude it is very accurate
Thanks for this
👍👍
Can you make more videos on threejs?
Really nice work, quick question, how can I make the surface smooth so it appears like bubbles pool?
THX A LOT!
this is so cool buddy
Please please make a tutorial on how to deploy/publish this project, please Thank You!
2:00:09 Any reason you didn't need to use the Three.js API setAttribute like you did previously?
well done.
Cool tutorial. But wouldnt it make a ton more sense to animate vertices in a vertex shader instead of editing the mesh?
You got me bro
Hi Chris, how can I add 3d obj to this scene ???
I did Bought your course last week but I'm trying to add some stuff, planets, jets 3d etc.
NIIIICE !!!
1:22:38 Nice
(also best beginner friendly tuto man)
flatShading: THREE.FlatShading in the current version needs to be flatShading: true (release 146)
thanks!
Does anyone know what theme is he using for Sublime Text? It looks cool.
Hey Chris, instead of using vitae I could you the vscode extension like live server right?
btw if you want the button to make a new tab when opening the site add after the href add this target = "_blank"
This is the way to do it, good advice 👍
@@ChrisCourses thanks also do you know how I could view this website through the index.html instead of having to start a server
npm installation for three js is super simple, same as doing dat.gui, you just run `npm install --save three` and then import three js by doing `import * as THREE from 'three';`
I found that I could not import modules after building though unfortunately. Error says: Failed to resolve module specifier "gsap"
I had to specify the path. Not sure why, but I wasn't using Vite.
Will you give feedback on a website? does it have a cost (if you do)?
Clear
first
...or were you? LOL
🤣
bro are you the God? thank you
I wish lmao
Thank you
You're welcome, thanks for watching Md
best course huh
The threejs tutorial are very helpful but can you also start building in react or next framework
I'd like to know what Visual Code Extension is the todo one in the video.
Is there a way to create a fish eye camera like lens? Like making the entire website in a fish eye lens perspective
Hi Chris, I'm using the latest version of ThreeJS and there's no mesh.geometry.attributes. I've changed the vertices location by accessing mesh.geometry.vertices, but I want to know how to change the vertices' color in this version.
at timeline 1:32:20 , when i removed initial color settings from MeshPhongMaterial still my plane was black
is there a way to organize the code better? Break up the code into different files that handle single responsibilities somehow?
Yes I’ve seen people break it up into a materials file, camera controls, geometry, etc. ThreeJS gets pretty lengthy fast!
Genius
Hey Chris, can you make a tutorial on Web XR with Three.js , i want to learn about VR on the web
Out of few videos having 0.dislikes. Lets keep it like this 😇
Hi Chris!!
How do you deploy this project on a website?
The docs for the latest version of vite (v16.17.0 LTS) now say to use the command "npm create vite@latest". With this command, the user is asked for a "package name" after being asked for the "project name". What should we enter for the package name?
please what is the nam eof the extension you use for your todo list
Finally😭😭😭😭
how to overlay html elements on top of three js without using position absolute?
Does someone know how I can use Visual Studio Code's Live Server extension instead of Vite to run three.js stuff?
Hi, I follow up and why the blackdomelement not showing ( 21:57)
geometry.positions.array at 45:13 does not seem to exist anymore? But I find almost the same data in planemesh.geometry.vertices but its an array with objects instead like [{ x : -2.5, y: 2.5 ,z:0 }, {...]... edit: ok seems like my theejs was an older version.. v119 did not have position, but 126 has it
planeGeometry.geometry.attributes.position and planeGeometry.geometry.vertices are both no working. What people are saying online is that geometry is outdated and now BufferGeometry is in use.