flora-liu / react-three-vite

🌱 starter template for threejs and react built with vite

🌱 React + Three.js + Vite Starter

A starter template for Threejs in React built with Vite

Features

• 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

What's in the stack

• 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

Development

Start dev server:

npm run dev

Build application:

npm run build

Performance

• First Contentful Paint: 1.8 s
• Time to Interactive: 2.7 s
• Lighthouse score of 95 (Performance, Accessibility, Best Practices, SEO)