Three.js in practice - Earth and planes - tutorial for beginners 2022 - part 1
Вставка
- Опубліковано 16 жов 2024
- Link to the assets used in the video:
github.com/Dom...
Use this link to try it on your pc! (it might take a few seconds before it fully loads)
domenicobrz.gi...
If you want to try this project on your browser clone the code in the repo above and just serve the three-in-practice-3/ folder with a localserver! :)
Link to polyhaven HDRIs:
polyhaven.com/...
Since our last project the number of subscribers grew up by almost two orders of magnitude! I am really happy to know that people around the planet are finding these tutorials useful, I hope I can keep on increasing the quality of this format and as always every feedback is highly appreciated!
This time we have a simple yet I think interesting project, a spinning earth with planes floating around it and a pseudo day and night cycle that is triggered by mouse movements, hope you'll enjoy this little project!
#threejs #webdev #tutorial
![Car physics mini game with React Three Fiber and Three.js [ Tutorial part 1 ]](/img/n.gif)
Just stumbled upon ur channel, I never write comments, but ur content is just so helpful and entertaining! hope to learn more from u and keep up the great work!
Thank you! I appreciate the comment and I'm glad these little projects are useful to the community :)
Thank you for your content!
Three.js on YT is very unsaturated, which means you can really find a niche here.
I love the fact that you paste a bunch of logic instead of slowly writing everything live. This gives the option to just pause and process it ourselves if needed.
I think that you can also create more miniature tutorials for encapsulated logic. For example:
"How to rotate", "How to create liquid-like material", "How to trigger events on mouse over an object".
I think this is how "Brackey" became the number 1 Unity-tuber, he just made small guides that everyone needed. These can also serve as building blocks that ppl can save and work with when required.
On another note, I just started learning Three.js, but stumbled upon "Spline", which is like a thinner solution, but one with an actual interface. I wonder if it is better to a use-case of enhancing apps with stunning 3d (while giving up on the complete freedom that three.js gives)
Thank you for the comment! copy/pasting instead of typing seemed like a good solution from the start, I'm interested in increasing utility rather than watchtime so I'll take any option to make these videos shorter :)
I like the idea of smaller and "encapsulated" videos, though I'm still wondering if I should take the plunge and make a full three-js course here on yt
spline is fantastic, if I could find something that fully covers my usecase I'd definitely consider it, sometimes you can avoid the complexities of lower level libraries and use better tools to abstract things away. If you know react also consider react three fiber, which is basically threejs on steroids
@@irradiance730 A course explaining each treejs concept would be great! Nice work so far. Where do you take inspiration for the videos?
I usually just try to imagine the end result but if I'm specifically looking for inspiration then I'd visit threejs' website or I would type a bunch of specific keywords on pinterest :)
Really cool ! I like your patient and detailed approach, it's always refreshing to see what other people can build with Three.js. Keep it up !
Thank you so much 🙏
Breathtaking!!!
Thank you! ❤️
WTF, this is incredible, thanks for your content bro
yeah this one was cool.. I also wanted to add clouds to the scene but ran out of time, that would have been fun
@@irradiance730 may i use something similar in my project?🙏🏻
@@amandla1020 it's all yours, go for it!
1:06 its funny how you can see the windows in the reflection of that earth :D
Everybody knows the earth is secretly enclosed in an italian hotel room in rome
yoooo, this is dope, any way to integrate or build this with React ?
Hello and thank you for the compliment, yes this one can also be integrated with react, just create a useeffect that runs only once and inject the code from an external function like:
initWebgl();
@@irradiance730 awesome ! thank you very much ! so I could create a project in react and have a navbar on top and also the earth ?
Is there any way to implement something like this on mobile with React Native? I've been trying to import external assets but with no joy.
Hello! unfortunately I'm unfamiliar with RN, you should first check if react three fiber is available for RN, though I'm inclined to say it doesn't support it yet (but I'm not sure)
i got an error "TypeError: Invalid value used as weak map key", it seems to come from the line 46 in the video,
Does the finished project work on your pc? you can try it here:
domenicobrz.github.io/three-in-practice/earth-and-planes/
(takes a few seconds to fully download)
For some reason, i can't seem to load the texture. it doesnt show the earth texture nor the sphere itself .Without the "bump,map, spec" line of code, i got no errors. problem is inside the "texture" variable. I've followed all the instructions and yet i can't make it work. Any help? Thx in advance!
apologies for the late response, did you try to download the repo and run it from there?
@@irradiance730 thx for answering! Yes I did, and it worked perfectly. Still can't figure out why it won't work when I'm writing(copying) the code myself 😅
@@Thepepponia it's likely that one of the updates to the dependency tree messed up the project, this space unfortunately grows so quickly that any given update can break your code.. but I'm glad to know it resolved the issue for you! happy hacking
Windows reflection looks funny
Everyone knows the earth is secretly enclosed in a roman cathedral