explearning / threejs-react

Introduction to React Three Fiber

1. Setup

• What is react-three-fiber?
  • react-three-fiber is a React renderer for threejs on the web and react-native*.
    • Gives more semantic layout and assumes reasonable defaults, making it easy to get up and running quickly with less code.
  • Use-cases:
    • Rendering graphics in the browser with React or on mobile and web with React Native*.

*Limited documentation on react-native see https://github.com/pmndrs/react-three-fiber/blob/master/markdown/recipes.md#usage-with-react-native.

• Prerequisites

  • React, JavaScript, HTML, CSS

• Environment

  • Node >= v8.10 and npm >= v5.6
  • Create React app

    npx create-react-app react-three-fiber-introduction
    cd react-three-fiber-introduction

  • Install three, react-three-fiber, use-cannon, and then start the app.

    npm install three react-three-fiber use-cannon
    npm start

  • Versions used in this project:

    "dependencies": {
      "react": "^17.0.1",
      "react-dom": "^17.0.1",
      "react-scripts": "^4.0.0",
      "react-three-fiber": "^5.1.5",
      "three": "^0.122.0",
      "use-cannon": "^0.5.3",
    }

• Assets

  • .gltf files from sketchfab.

2. Getting Started

• Setting the Scene
  • The scene graph.
    • Object3D
  • Manual setup with threejs.
  • Canvas
  • animation
    • useThree(), useFrame(() => {}), camera
    • performance pitfalls
  • AxesHelper
  • Orbit controls
    • extend
  • Geometry
  • Lines
  • Lights
    • Ambient Light
    • Pointlight helper
  • [Material/Mesh]
    • Material: Color, Side, shadowSide, Fog, Transparent, Opacity, Visible.
    • MeshStandardMaterial: Emissive & emissiveIntensity, wireframe, metalness, roughness.
    • MeshPhysicalMaterial: transmissive, reflective, clearcoat.
  • Texture.
    • background
    • Scene.background
    • CubeTextureLoader
    • WebGLCubeRenderTarget.fromEquirectangularTexture

3. Interaction and Physics

• Controls

  • Events
    • Dragcontrols

• Physics

  • use-cannon https://github.com/pmndrs/use-cannon

4. Putting it all together

• Other things students can try on their own
  • Using Assets
  • Bounding Box (for physics debugging)
  • Soft-shadows
  • postprocessing
  • Animations