cra-template-r3f-ts

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

Usage no npm install needed!

<script type="module">
  import craTemplateR3fTs from 'https://cdn.skypack.dev/cra-template-r3f-ts';
</script>

README

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

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