R3F CRA Starter

A starter project for React-Three-Fiber bootstrapped with Create React App‘s PWA Typescript template and some useful packages.

demo of r3f-cra-starter

Packages Versions Description
three ^0.132.2 A lightweight, 3D library with a default WebGL renderer.
@react-three/fiber ^7.0.7 A React renderer for Threejs on the web and react-native.
@react-three/drei ^7.12.1 Useful helpers for react-three-fiber
@react-spring/three ^9.2.4 A spring physics based React animation library

Features

  • Automatically inject r3f component in the Canvas
  • Support glsl imports
  • PWA Support
  • Layout for Canvas and DOM
  • Template for the meta data and header
  • Clean code using ESlint and Prettier
  • VSCode debug profiles for the server, Chrome, and Firefox

Usage

  1. Install the necessary node modules.

npm i
  1. Run the npm script start to start development.

npm run start
  1. When finishing development, run the npm script build to make the compressed files.

npm run build

How to contribute :

git clone https://github.com/kevinomyonga/R3F-CRA-Starter.git
&& cd r3f-cra-starter && npm install

License

Copyright (c) 2021 Kevin Omyonga
Released under the MIT license
http://opensource.org/licenses/mit-license.php

Misc

Follow Kevin Omyonga: Web, Twitter

GitHub

https://github.com/kevinomyonga/R3F-CRA-Starter