Simple Experience Three.js with R3F and Mask / Stencil.
π§ͺ v0.1.0 γ’ π₯ Live Demo γ’ Codesandbox
π Install the following packages
yarn
π Start or Build the application
yarn start
# Or
yarn preview
π Go to http://localhost:3000/r3f-simple-mask-move/
yarn lint # Run linter global
yarn format # Run prettier format
yarn build && yarn deploy
# yarn deploy -- -m "Deploy to GitHub Pages"
Change config in vite.config.vue
if you want:
export default defineConfig({
base: '/r3f-simple-mask-move/', // Adapt it ! (just for GH-PAGES)
server: {
port: 3000 // Default 3000: Adapt it !
}
// ...stuff...
})
Reminder π¦:
# update dependencies. need existing yarn.lock file
yarn upgrade-interactive --latest
- Node.js v16.0 min π¦
- Three.js v0.145.0 π¦
- Powered with Vite π¦
- vite-plugin-glsl Simple Shaders support (glsl) π¨
- @react-three/fiber React renderer for threejs
- @react-three/drei useful helpers for react-three-fiber
- react-spring a spring-physics-based animation library
- leva` create GUI controls in seconds
</π»β€> by π§ββ@Sp0ne γ’ Β© 2022 γ’ ππ»: vinces.io