Skip to content


 Zabbix
 Grafana
 Prometheus
 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
   
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99




Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99
Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

Build Course Boilerplate

Video Lecture

Section Video Links
Build Course Boilerplate Build Course Boilerplate Build Course Boilerplate

Description

We will now build a bare minimum React Three Fiber boilerplate that we will use to start the course.

The boilerplate is almost the absolute minimum that you need to get React Three Fiber to display a Three.js scene. We will make many additions to the boilerplate as the course progresses.

Create Project Folder

Now to start creating our working folders and files.

Open a command/terminal prompt and create a new folder on your system somewhere.

mkdir react-three-fiber-boilerplate

CD into the new folder.

cd react-three-fiber-boilerplate

Create ./package.json

In your projects root folder, create a new file named package.json

Copy/paste the script below into it and save.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "name": "react-three-fiber-boilerplate",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.jsx",
  "dependencies": {
    "@react-three/fiber": "8.13.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1",
    "three": "0.154.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Create ./src/index.jsx

Create a new folder in your project root called src

Add a new file named index.jsx

Copy/paste the script below into it and save.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Canvas } from '@react-three/fiber'
import './styles.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Canvas camera={{ position: [0, 0, 2] }}>
      <mesh>
        <boxGeometry />
        <meshBasicMaterial color={0x00ff00} wireframe />
      </mesh>
    </Canvas>
  </StrictMode>
)

Create ./src/styles.css

In the ./src folder, add a new file named styles.css

Copy/paste the script below into it and save.

1
2
3
4
5
6
7
html,
body,
#root {
  height: 100%;
  margin: 0;
  background: #000000;
}

Create ./public/index.html

Create a new folder in your project root called public

Add a new file named index.html

Copy/paste the script below into it and save.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>React Three Fiber Tutorials by Sean Bradley</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

Install It

Install the dependencies listed in the package.json

npm install

Start It

And now we can start it.

npm start

A browser should automatically open at the address http://localhost:3000/

If not, then you can open a browser and visit http://localhost:3000/ manually.

You should see a green wireframe cube in the browser.

Summary

Now this is basically the bare minimum you need to see a React Three Fiber Threejs scene in your browser. If you are experienced with React already, you may have been tempted to run npx create-react-app react-three-fiber-boilerplate for example. You could have done this, and still installed the React Three Fiber and Three.js dependencies manually, but you would have many more files in your project that may distract you while learning. This is something that you can experiment with later just to compare the difference and see if you prefer it.

Now, your project file structure should now resemble,

|-- react-three-fiber-boilerplate
    |-- node_modules
        |-- (Many extra files and folders containing the required dependencies)
    |-- public
        | index.html
    |-- src
        | index.jsx
        | styles.css
    |-- package.json
    |-- package-lock.json

When installing the dependencies earlier, it saved all the required libraries into the node_modules folder to be used when React starts and builds our project.

Prettier

As an extra tool to help us format our code, I like to use prettier in my VSCode IDE.

Add a file named .prettierrc to your project root folder, copy-paste the script below and save.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": true
}

Now in VSCode, when you press the SHIFT ALT F keys together, it will format your code consistently according to those rules above. This is optional.

ESLint

It is useful to have a linter check your code as you develop it. You can also add the ESLint linter to your project if you desire.

Create a file in your project root named .eslintrc and add the following code to it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
  "extends": "react-app",
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

Then in VSCode, open the Extensions tab on the left, search for ESLint and install it.

Now when you edit and save your code, ESLint will check it for common mistakes and make suggestions.

GitHub

This boilerplate as it is now, can also be viewed, forked and downloaded from GitHub.

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
npm install
npm start

Visit http://127.0.0.1:3000

You should see a black screen with a green wireframe cube.

Working Example

This boilerplate as it is now, can also be viewed, forked and downloaded from CodeSandbox.

React Three Fiber Boilerplate (codesandbox.io)