cra-template-r3f-ts

create-react-app my3dapp --template=r3f-ts

Why

• Typescript (Looking for js?)
• 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