https://github.com/craftzdog/ghibli-style-shader

Ghibli-styled Shader Example for Three.js
https://github.com/craftzdog/ghibli-style-shader

ghibli react react-three-fiber threejs

Last synced: about 1 month ago
JSON representation

Ghibli-styled Shader Example for Three.js

• Host: GitHub
• URL: https://github.com/craftzdog/ghibli-style-shader
• Owner: craftzdog
• Created: 2023-02-08T14:18:00.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-17T02:26:11.000Z (about 2 years ago)
• Last Synced: 2025-03-16T05:31:48.787Z (about 1 month ago)
• Topics: ghibli, react, react-three-fiber, threejs
• Language: JavaScript
• Homepage: https://www.youtube.com/watch?v=IGK6eceWyU4
• Size: 5.66 MB
• Stars: 166
• Watchers: 2
• Forks: 21
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ghibli-style Trees Example

[DEMO](https://ghibli-style-shader.vercel.app/)

[Video tutorial](https://www.youtube.com/watch?v=IGK6eceWyU4)

![image](./doc/image.jpg)

![image](./doc/image_2.jpg)

![image](./doc/image_3.jpg)

## Ingredients

- React - A JavaScript library for building UIs

- [Three.js](https://threejs.org/) - JavaScript 3D library

- [React Three Fiber](https://github.com/pmndrs/react-three-fiber) - A React renderer for Three.js

- [@react-three/drei](https://github.com/pmndrs/drei) - Useful helpers for Fiber

## How to use

```sh

npm i

npm start

```

## References

- [How to Create Ghibli Trees in 3D - Blender Tutorial, by Lightning Boy Studio](https://www.youtube.com/watch?v=DEgzuMmJtu8&ab_channel=LightningBoyStudio)

---

Looking for a Markdown note-taking app? Check out my app called Inkdrop:

[![Inkdrop](https://github.com/craftzdog/dotfiles-public/raw/master/images/inkdrop.png)](https://www.inkdrop.app/)

## License

MIT