cra-template-react-three-fiber

create-react-app my3dapp --template=react-three-fiber
 
# or 
create-react-app my3dapp --template=r3f

Why

• Latest versions of everything
• Works with codesandbox out of the box

Included libs

• create-react-app 4

• three.js

• react-three-fiber v5 beta

• drei

• react-postprocessing

• glsl-noise

• react-spring v9

Misc

• 🌟 create-react-app 4 alpha with fast refresh
• 🌟 recommendend vsc extensions for working with glsl (How do I make glsl-lint work?)
• 🌟 babel-glsl macro to compile glsl without touching the create-react-app config - 🐛 currently doesn't work in codesandbox -
• draco binaries in public/draco-gltf/ (the default directory used by useGLTFLoader in drei)
• example shader material to start playing
• Scene setup with OrbitControls and React-PostProcessing

Dev stuff

• eslint + prettier with husky & pretty-quick

How to use

Or just fork this repository 🤷‍♂️

GLSL Linter

You need to download and setup the glsl linter to make linting work in the shader files.

• Download GLSL lang
• extract the archive
• navigate to /bin/
• copy the glslangValidator executable to your preferred location eg. mv glslangValidator /usr/local/bin/glslangValidator