Sp0ne / r3f-simple-mask-move

Simple Experience Three.js with R3F and Mask / Stencil

r3f-simple-mask-move

Simple Experience Three.js with R3F and Mask / Stencil.

🧪 v0.1.0 〢 🖥 Live Demo 〢 Codesandbox

---

---

💾 Installation

👇 Install the following packages

yarn

🥑 Usage 〢 Get Started

👇 Start or Build the application

yarn start
# Or
yarn preview

👉 Go to http://localhost:3000/r3f-simple-mask-move/

💾 Code Clean

yarn lint        # Run linter global
yarn format      # Run prettier format

🚀 Deploy on Gh-pages

yarn build && yarn deploy
# yarn deploy -- -m "Deploy to GitHub Pages"

⚙️ Config vite ⚡

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

---

💾 Ecosystem

• 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

---