How to create Ghibli-style trees with three.js
▶ Source code https://github.com/craftzdog/ghibli-s...
▶ My dotfiles https://github.com/craftzdog/dotfiles...
▶ My equipment http://uses.craftz.dog/
▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=d...
Follow me online here:
▶ My weekly vlog / @craftzdog
▶ Subscribe to my newsletter https://www.devas.life/
▶ Twitter / inkdrop_app
▶ Instagram / craftzdog
References:
▶ Blenader tutorial by Lightning Boy Studio • How to Create Ghibli Trees in 3D - Bl...
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