A starter template for Threejs in React built with Vite
- Ability to display DOM and/or canvas content on pages
- Basic routing for navigating between pages
- ThreeJS canvas persists between route changes
- Support for importing GLSL files
- Clean code using ESlint and Prettier
- React: JavaScript library for frontend interfaces
- Three.js: 3D engine using WebGL
- React Three Fiber: React renderer for Three.js
- Drei: React Three Fiber helper functions
- Vite: Static web server
- React Router: Routing for React pages
- Tailwind: CSS style framework
- ESlint: Tool to enforce coding standards
Start dev server:
npm run dev
Build application:
npm run build
- First Contentful Paint: 1.8 s
- Time to Interactive: 2.7 s
- Lighthouse score of 95 (Performance, Accessibility, Best Practices, SEO)