This page summarizes how to build the R3F（React Three Fiber） environment using CRA（Create React App）.
in your project folder.
create-react-app . --template typescript --use-npm
npm i three @react-three/fiber @react-three/drei
npm i -D @types/three
use-cannon is a library to give collisions to meshes.
npm i @react-three/cannon
valtio is used to pass state between canvas and dom elements.
npm i valtio
leva is a controller package for react.
When the value of the controller changes, it will regenerate the associated components. This may cause animations using useFrame to be initialized.
npm i leva
lil-gui is a controller supported by threejs, but it is not optimized for react, so you will need to customize it.
It is useful for referencing values in useFrames, as the component is not regenerated when the controller value changes.
npm i lil-gui
gsap is an animation library that supports threejs objects.
Of course, it can also be used to animate CSS styling.
npm i gsap
By using gh-pages, you can deploy your application to github pages.
npm i -D gh-pages
Add the following settings to package.json.
"homepage": "https://<your name>.github.io/<your repository name>/",
"scripts": {
"deploy": "npm run build && gh-pages -d build"
},To deploy, execute the following command.
npm run deploy
※ Note: A repository must have been created in order to deploy.
Configuration to not include sourcemap in the build folder.
Change package.json as follows.
package.json
"scripts": {
"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build"
},Add the following files directly under the project.
.env.production.local
GENERATE_SOURCEMAP=false
@emotion/css is a library for writing css using CSS in JS notation.
The beauty is that it can be written directly in vanilla css notation.
npm i @emotion/css
If you are using vscode, you can install the extension vscode-styled-components to enable code completion.