How to connect Threejs to React?

Question

I work with React and use a canvas. I want to change the canvas to WebGL (Threejs library). How to connect this library to React?

I have some element, e.g.

<div ref="threejs"></div>

How to make it a field for the Threejs library call? P.S:. I don't want to use extensions like react-threejs

Answer 1

Here is an example of how to set this up (see demo):

import React, { Component } from 'react' import * as THREE from 'three'  class Scene extends Component {   constructor(props) {     super(props)      this.start = this.start.bind(this)     this.stop = this.stop.bind(this)     this.animate = this.animate.bind(this)   }    componentDidMount() {     const width = this.mount.clientWidth     const height = this.mount.clientHeight      const scene = new THREE.Scene()     const camera = new THREE.PerspectiveCamera(       75,       width / height,       0.1,       1000     )     const renderer = new THREE.WebGLRenderer({ antialias: true })     const geometry = new THREE.BoxGeometry(1, 1, 1)     const material = new THREE.MeshBasicMaterial({ color: '#433F81' })     const cube = new THREE.Mesh(geometry, material)      camera.position.z = 4     scene.add(cube)     renderer.setClearColor('#000000')     renderer.setSize(width, height)      this.scene = scene     this.camera = camera     this.renderer = renderer     this.material = material     this.cube = cube      this.mount.appendChild(this.renderer.domElement)     this.start()   }    componentWillUnmount() {     this.stop()     this.mount.removeChild(this.renderer.domElement)   }    start() {     if (!this.frameId) {       this.frameId = requestAnimationFrame(this.animate)     }   }    stop() {     cancelAnimationFrame(this.frameId)   }    animate() {     this.cube.rotation.x += 0.01     this.cube.rotation.y += 0.01      this.renderScene()     this.frameId = window.requestAnimationFrame(this.animate)   }    renderScene() {     this.renderer.render(this.scene, this.camera)   }    render() {     return (       <div         style={{ width: '400px', height: '400px' }}         ref={(mount) => { this.mount = mount }}       />     )   } }  export default Scene 

You might also be interested in a full screen example (see GitHub).

Here's an example using React Hooks instead of a class.

Answer 2

You can use react-three-fiber

npm install three @react-three/fiber

Usage

import React from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import ReactDOM from 'react-dom';

class Simple extends React.Component {
  constructor(props, context) {
    super(props, context);

    // construct the position vector here, because if we use 'new' within render,
    // React will think that things have changed when they have not.
    this.cameraPosition = new THREE.Vector3(0, 0, 5);

    this.state = {
      cubeRotation: new THREE.Euler(),
    };

    this._onAnimate = () => {
      // we will get this callback every frame

      // pretend cubeRotation is immutable.
      // this helps with updates and pure rendering.
      // React will be sure that the rotation has now updated.
      this.setState({
        cubeRotation: new THREE.Euler(
          this.state.cubeRotation.x + 0.1,
          this.state.cubeRotation.y + 0.1,
          0
        ),
      });
    };
  }

  render() {
    const width = window.innerWidth; // canvas width
    const height = window.innerHeight; // canvas height
    return (<React3
      mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below
      width={width}
      height={height}

      onAnimate={this._onAnimate}
    >
      <scene>
        <perspectiveCamera
          name="camera"
          fov={75}
          aspect={width / height}
          near={0.1}
          far={1000}
          position={this.cameraPosition}
        />
        <mesh
          rotation={this.state.cubeRotation}
        >
          <boxGeometry
            width={1}
            height={1}
            depth={1}
          />
          <meshBasicMaterial
            color={0x00ff00}
          />
        </mesh>
      </scene>
    </React3>);
  }
}
ReactDOM.render(<Simple/>, document.body);