Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Sp0ne/r3f-simple-mask-move
Simple Experience Three.js with R3F and Mask / Stencil
https://github.com/Sp0ne/r3f-simple-mask-move
r3f react react-three-fiber threejs vitejs
Last synced: 4 months ago
JSON representation
Simple Experience Three.js with R3F and Mask / Stencil
- Host: GitHub
- URL: https://github.com/Sp0ne/r3f-simple-mask-move
- Owner: Sp0ne
- Created: 2022-10-22T00:08:15.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-30T01:19:55.000Z (about 1 year ago)
- Last Synced: 2023-11-30T02:27:28.048Z (about 1 year ago)
- Topics: r3f, react, react-three-fiber, threejs, vitejs
- Language: JavaScript
- Homepage: https://sp0ne.github.io/r3f-simple-mask-move/
- Size: 8.09 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# r3f-simple-mask-move
_Simple Experience Three.js with R3F and Mask / Stencil._
๐งช **v0.1.0** **ใข**
๐ฅ [Live Demo](https://sp0ne.github.io/r3f-simple-mask-move/) **ใข** [Codesandbox](https://codesandbox.io/s/r3f-mask-move-mouse-ttmtem)
---
---
## ๐พ Installation
๐ Install the following packages
```shell
yarn
```
## ๐ฅ Usage ใข Get Started
๐ Start or Build the application
```shell
yarn start
# Or
yarn preview
```
๐ Go to [http://localhost:3000/r3f-simple-mask-move/](http://localhost:3000/r3f-simple-mask-move/)
## ๐พ Code Clean
```shell
yarn lint # Run linter global
yarn format # Run prettier format
```
## ๐ Deploy on Gh-pages
```shell
yarn build && yarn deploy
# yarn deploy -- -m "Deploy to GitHub Pages"
```
### โ๏ธ Config vite โก
Change config in `vite.config.vue` if you want:
```javascript
export default defineConfig({
base: '/r3f-simple-mask-move/', // Adapt it ! (just for GH-PAGES)
server: {
port: 3000 // Default 3000: Adapt it !
}
// ...stuff...
})
```
Reminder ๐ฆ:
```bash
# update dependencies. need existing yarn.lock file
yarn upgrade-interactive --latest
```
---
## ๐พ Ecosystem
- Node.js [**v16.0 min**](https://nodejs.org/en/) ๐ฆ
- Three.js [**v0.145.0**](https://github.com/mrdoob/three.js/) ๐ฆ
- Powered with [Vite](https://vite.dev/) ๐ฆ
- [vite-plugin-glsl](https://github.com/UstymUkhman/vite-plugin-glsl) Simple Shaders support (glsl) ๐จ
- [@react-three/fiber](https://github.com/pmndrs/react-three-fiber) React renderer for threejs
- [@react-three/drei](https://github.com/pmndrs/drei) useful helpers for react-three-fiber
- [react-spring](https://github.com/pmndrs/react-spring) a spring-physics-based animation library
- [leva`](https://github.com/pmndrs/leva) create GUI controls in seconds
---
> ๐ปโค> by [๐งโโ@Sp0ne][vinces-git] ใข ยฉ 2022 ใข **๐๐ป**: [vinces.io][vinces]
---
[vinces]: https://vinces.io
[vinces-git]: https://github.com/Sp0ne