How to create Ghibli-style trees with three.js
Вставка
- Опубліковано 3 лип 2024
- ▶ Source code github.com/craftzdog/ghibli-s...
▶ My dotfiles github.com/craftzdog/dotfiles...
▶ My equipment uses.craftz.dog/
▶ Check out my product: Inkdrop - Markdown note-taking app
www.inkdrop.app/?...
Follow me online here:
▶ My weekly vlog / @craftzdog
▶ Subscribe to my newsletter www.devas.life/
▶ Twitter / inkdrop_app
▶ Instagram / craftzdog
References:
▶ Blenader tutorial by Lightning Boy Studio • How to Create Ghibli T...
00:00:00 Hello
00:00:44 Unboxing a new MacBook Pro
00:01:54 Heading to Osaka Castle Park
00:04:00 Create a new React project
00:05:12 Install libraries
00:05:31 Make the page background transparent
00:06:32 Remove the template content
00:06:53 Integrate React Three Fiber into the project
00:08:49 Add a simple scene
00:14:33 Add a ground plane for shadows
00:17:19 Import a tree model
00:18:28 Add the tree model to the scene
00:19:37 Use Standard Material
00:20:50 Use Toon Material
00:23:25 Rotate the tree object
00:24:55 Create a simple shader
00:28:05 Use a custom toon shader
00:32:10 Tweak the toon shader
00:35:11 Start creating a Ghibli shader
00:40:01 Define variables
00:42:12 Calculate brightness
00:44:25 Add gradient colors
00:44:53 Create another color variation
00:47:29 Thank you for watching
#ThreeJS #CodeWithMe #ASMR - Наука та технологія
Check out my Markdown note-taking app designed for developers 👉 www.inkdrop.app/?IGK6eceWyU4
Whoa! Production quality is out of this world. Thanks for teaching us so much... Not many people share their craft like this.
I discovered vim, markdown, bash and the terminal because of you, and i'm never going back 🙏
Stopped procrastinating on learning and using Typescript because of this guy.
I don't like going to plain js 😊❤
Same
Best suggestion to show up in a while. Probably the most chill dev session on UA-cam! The trees turned out beautiful. I think there's a lot that can be learned from seeing the entire process of projects like this. Nice work!
Takuya is such an inspiration. Amazing edits as always, will try this one out definitely 😁
Perfect mix of educational and chill content. Such peaceful scenery and editing
Commenting before watching the entire thing. The sound, the vibe and typing sounds make this video a straight 10 for me.
I appreciate the upload man.
Oh sweet lord after this man has taken a break. I've missed Takuya-senpai's chill and productive videos. 🖤
He's been producing a lot on his second channel, although not the same style. Might be worth checking out!
@@davidmcclellan4621 He does! And I've only recently caught up on his other channel. Thank you for the info though!
Omg the 3D overlay with the video background was sooo worth it. Top tier content as always. Kudos 👏👏👌
Production quality of this video is so slick. It’s clear a lot of effort went into this and it’s for sure paid off!
Your editor skills are beyond quality. It looks so perfect. You want to keep watching.
Great work!
You are the best content creator alive, you found a way to mesh everything I love in to every video. Thank you for your hard work!
Jesus, Im in awe in how much work is put into this videos, the details and the feel of it is inspiring
I love the fact that you go outside and code. I tend to stay in my comfort zone for various reasons and never sit outside. This summer (It's still way too cold here in Sweden) I will definitely make an effort to sit outside in a park or just sit anywhere but a desk at work to challenge myself! Great video btw!
Join me on a behind-the-scenes coding journey newsletter here www.devas.life/
can we get a tutorial on how to setup the workflow you are using? like the overlays and all
This is amazing! Your video production quality is incredible.
Woo, perfect time for a watch in the weekend for me. Always a good time watching your videos, thank you, Takuya senpai 🙏
i'm so lucky find this channel, love the vibes, please keep doing it 🙏
that is some high quality production right there 🌟
Love it! Thanks for making such amazing piece public.
Perfect timing, now I have something to watch during my lunch break!!
This one of the coolest videos I've seen on youtube. Good job man
The ASMR in this stuff is amazing 🔥
Amazing, I have problems concentrating at my own house, this guy can go into a park and code outside. Very inspirational :)
Awesome as usual, sir Takuya.
What an awesome video! You had me hooked from the start. So many camera angles and nature background sounds. Really great quality work. Maybe I'll even use it for ASMR sometime. Subbed.
Hey sir, just wanted to say that I really appreciate you and your videos! You are one of my biggest inspirations! Keep going, with friendship from Portugal
Dude your work is very inspiring keep it up
you just earned a new sub ! Your content is fabulous, and I love what you do !!
Thank god I got your channel recommended!
Your new video like a breath of fresh air 😝
Love all of your videos. In fact you are my fav vloger, and if you remember I am that guy that told you once in a comment section that your video and apps somehow represent to me the ZEN nature/culture which i Love. I always will support your work, in fact my keyboard is like yours LOL and I hope one day to learn neoVim which... hmmm for the moment am quite resisting :D peace :)))
I love your trayectory to the job office riding the bike, is so inspiring
Also it's so beautiful bike, it seems very confortable
Your videos are just mesmerizing. Wow. Incredible content
Fantastic editing and amazing content.
thank you takuya for making my fear coding going away by engaging with us through your videos..id like to show some of projetcs that i have worked on for the past year hopefully one day 🥳🥳🥳
so enjoyable watching you writing code.
Your videos keep improving. Loving the new intro - of course must include a symbol of 鶴. 🙂
Always and always, you always make great videos. Happy vimming sir✨️
you're living me dream life! Keep going!
This guy is so cool. Ive realized learning programming to push for a job isnt going to be a fruitful endeavor for a long time so now I just want to be able to make whatever cool shit I can think of like devaslife lol
i am so impressed. subscribed!
I love you work, from a data science intern ^^
Your videos are awesome man!
I love how you make coding look like cinematography. :D
Nicely done!
i love to see keycaster, because i can learn how you do it. Hope to see it in the future video.
I love Japan, hope i can visit one day. And as always quality content!
great job Takuya!
Awesome content as always!
no matter what device u r using, mecha is in our heart 😁
You are awesome BRO! From Uzbekistan 🇺🇿
you are a front end legend
idk why but i love that your using a sperate keyboard on top of the laptop hahah it makes it way more satisfying haha great video!
the song give chillls!!
This is such great content!
Thank you dude! This shit is the most simple stuff I’ve always wanted from how to code videos.
Amazing works
Hey Takuya, brilliant work as usual! How about making a video showing your snippets for neovim and how to set them up for react development?
you earned yourself a new sub
before i will watch this video let me leave this to your comment "you're one of my inspirations" ❤️
dude, is fantastic your videos, wow is incredibowl.
最高にいけてますね！
ありがとうございます！！
bro ur videos are sick!!
beautyfull 🤩
Definitely THREEJS is a super powerful library in order to model and render any 3d object, super madness
You are amazing man.
He’s back!
Would be nice to see you doing some backend stuff :D
great work! this is ASMR for react devs lol
I am really like your style of coding
I don't why but your video always encourages me to do coding
Ты мастер!
As a Brazilian, I can't imagine what it's like to open a 16' macbook pro in the middle of a public square, here you would be putting your life in danger.
Great video.
Cool videos 👾
so, this guy memorize all of the code?
React scene description ! How the f*** come I’ve never thought about it before ?
I know what I’ll be doing this evening. Many, many thanks.
Excelente
instant subscribe
We would expect some tutorials from you
takuya: *npm start but ERR
also takuya: *cds into correct directory and npm start again
he just like me frfr
You should have made the tree ray traced... Great production quality as always!
Awesome. Could you make vidoe about three.js??
Did you take the extra keyboard just for the sound? If so, I'm impressed by your dedication. I personally find that the 16" MacBook Pro is quite comfortable to type on. I would say it's as good, if not better than my Thinkpad keyboard.
Very nice tutorial /video. But I have so many questions
Excellent video! I have a question, how do you show errors or warnings from eslint at the same line as vsCode does but using neovim?
GOOD!
What a great editing you do, what programs do you use?
Impressive!, just want to know how you learned three.js and what are your recommendation?
Your keyboard ASMR is greatly satisfying. Can I get information about it please?
I have a question about your cool app, Inkdrop. How do you handle the backend system to ensure it can scale data of a large amount of users ? Are you using any deployment or infrastructure platform to do this or all by yourself ?
Takuya eres un graande!
Duda: como le haces para que no se te cansen las manos en esa posicion?
Realizas ejercicios de muñeca o algún posicionamiento en especial?
Cool as always💥👌💥 Are you specially turned off a tree-sitter syntax highlights to give more green-colored vibe ? 🤔
Hello, love your work, but i was wondering if you can make a neovim tutorial setup for windows users. I know that there a lot of videos with the same topic, but i do like your approach !
🤩
Finally! :D
Hi there! What would be your suggestion if I wanted to add a trunk to it? Simply change the model? Or add another one?
Not so fast, we need a full video of your setup with the new macbook mr. Matsuyama. :)
i'm very curious to know, are you try / practice before recording or just start coding first time and record ?
Nice question!
sick as hell. out of curiosity, did you first learn three.js and other art-adjacent languages coming from an art background or a coding background? this looks mad fun but im so used to manual manipulation when i make things digitally, not sure if id be able to grasp this workflow
Impressive, I follow you recently I love the quality of your videos, how do you do to record the editor in transparent and mount it in the background of the video ...? that causes me intrigue ... greetings