Introduction to React Three Fiber

Preview

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

      npx create-react-app react-three-fiber-introduction
      cd react-three-fiber-introduction
      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

2. Getting Started

3. Interaction and Physics

4. Putting it all together

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