cra-template-react-three-fiber

create-react-app my3dapp --template=react-three-fiber

Usage no npm install needed!

<script type="module">
  import craTemplateReactThreeFiber from 'https://cdn.skypack.dev/cra-template-react-three-fiber';
</script>

README

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

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