https://github.com/Ctrlmonster/r3f-project-boilerplate

https://github.com/Ctrlmonster/r3f-project-boilerplate

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/Ctrlmonster/r3f-project-boilerplate
• Owner: Ctrlmonster
• License: mit
• Created: 2023-05-02T12:54:52.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-05-02T19:20:50.000Z (over 1 year ago)
• Last Synced: 2024-02-14T03:31:34.371Z (9 months ago)
• Language: TypeScript
• Size: 834 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-webxr-development - r3f-project-boilerplate - badge] - a simple boilerplate project for react three fiber projects with Typescript, TailwindCSS and Vite (Engine / Framework / General 3D App Framework)

README

        
### React Three Fiber Boilerplate

![Screenshot of Scene](https://github.com/Ctrlmonster/r3f-project-boilerplate/blob/main/boilerplate.png)

This is a simple boilerplate project for react three fiber projects with Typescript, TailwindCSS and Vite.

It creates a fullscreen Canvas with some common quality of life components present to get your project started quickly.

These include OrbitControls, Grid and Gizmo Helper, Leva Controls for all Light Types, Performance Monitoring Setup,

Postprocessing Setup, Render on Demand Setup etc. 

It also showcases an easy way to connect your imperative Simulation Code to r3f. 

#### Useful Links if you're new to r3f

R3F Homepage

https://docs.pmnd.rs/react-three-fiber/getting-started/your-first-scene

R3F/Drei - useful helpers

https://github.com/pmndrs/drei

GltfJSX - turn any gltf file into jsx 

https://github.com/pmndrs/gltfjsx

Tailwind cheatsheet:

https://nerdcave.com/tailwind-cheat-sheet