sinanisler logo

React Three Fiber + Vite + Boilerplate and some usefull codes

 

 

R3F Boilerplate

This R3F boilder plate is very minimalist and good one. I usually this blank boilerplate to start building my scenes.

gh repo clone wass08/r3f-vite-starter

 

Creating Skybox 3D Scene with StableDiffusion

If you need nice environments for your scenes I would definitely recommend blockadelabs tool. AI rules baby.

It is free for a couple of generations. You can definitely create useful great scenes for your designs.

 

https://www.blockadelabs.com/

 

 

 

Converting Models to JSX Code

For R3F usually you need structured JSX code for your 3d objects and scenes.

Group up your objects together just like you group up dom objects in container. Same logic.

This code will automatically create.JSX files for your GLTF objects.

and then you can call it easily like <box /> or whatever.

modelfoldername % npx gltfjsx model1.gltf -o "foldername/model1.jsx" -r "public"

 

 

Resources

 

BlockadeLabs https://www.blockadelabs.com/

Quaternius Ultimate Monsters Pack https://quaternius.com/packs/ultimate…

Maath Library https://github.com/pmndrs/maath

React Three Fiber documentation https://docs.pmnd.rs/react-three-fibe…

R3F Drei https://github.com/pmndrs/drei

Example setup for mesh portal thing https://youtu.be/2W_VR92Pqgs

 

Leave the first comment