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? I don't want to use extensions like react-threejs.
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.
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);
import * as T from 'three';
import { useRef, useEffect, useCallback } from 'react';
class GL {
scene: T.Scene = new T.Scene();
renderer?: T.WebGLRenderer;
camera?: T.PerspectiveCamera;
width: number = 1;
height: number = 1;
destroyed: boolean = false;
prevTime: number = 0;
delta: number = 0;
constructor() {}
get aspect() {
return this.width / this.height;
}
init ({ canvas, width, height }: Pick<GL, 'canvas' | 'width' | 'height'>) {
this.width = width;
this.height = height;
this.camera = new T.PerspectiveCamera(70, this.aspect, 0.01, 10);
this.camera.position.z = 3;
this.scene.add(this.camera);
/* ... place your objects here ... */
this.scene.add(new T.AxisHelper(3));
this.renderer = new T.WebGLRenderer({canvas});
this.resize(width, height);
this.renderer.setAnimationLoop(this.onLoop);
}
resize(width: number, height: number) {
if (!this.camera || !this.renderer) return;
this.camera.aspect = this.aspect;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
this.renderer.setPixelRatio(/* ... set your pixel ratio ... */);
}
onLoop: XRFrameRequestCallback = (time) => {
if (!this.camera || !this.renderer) return;
if (this.prevTime !== 0) this.delta = time - this.prevTime;
/* do something with your delta and time */
this.renderer.render(this.scene, this.camera);
this.prevTime = time;
};
destroy() {
this.renderer?.dispose();
this.camera = undefined;
this.destroyed = true;
}
}
let gl = new GL();
const App: React.FC = () => {
const refCanvas = useRef<HTMLCanvasElement>(null);
const onResize = useCallback(() => {
gl.resize(
refCanvas.current.clientWidth,
refCanvas.current.clientHeight
);
}, []);
useEffect(() => {
if (!refCanvas.current) return;
const state = refCanvas.current;
if (gl.destroyed) gl = new GL();
gl.init({
canvas: refCanvas.current,
width: refCanvas.current.clientWidth,
height: refCanvas.current.clientHeight,
});
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', onResize);
gl.destroy();
};
}, []);
return <canvas ref={refCanvas} className="gl"></canvas>;
}
I have converted the first example of three.js to React thing. Hope this is helpful import React from 'react'; import './App.css'; import * as THREE from 'three';
class App extends React.Component{
constructor(props){
super(props)
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
this.renderer = new THREE.WebGL1Renderer();
this.renderer.setSize( window.innerWidth, window.innerHeight );
this.geometry = new THREE.BoxGeometry();
this.material = new THREE.MeshBasicMaterial( { color: 0x32a852});
this.cube = new THREE.Mesh( this.geometry, this.material)
}
animate = () => {
requestAnimationFrame(this.animate)
this.cube.rotation.x += 0.01;
this.cube.rotation.y += 0.01;
this.renderer.render(this.scene, this.camera);
}
componentDidMount() {
document.body.appendChild( this.renderer.domElement );
this.scene.add( this.cube );
this.camera.position.z = 5;
this.animate()
}
render(){
return(
<body id='document-body-01'>
</body>
);
}
}
export default App;
So the idea is that the three components can be broken down to constructor, function of animate and componentdidmount. I believe this.varname can be place anywhere. I felt constructor was a good place. This way other examples can be set as well.
I recommend you using the three fiber & three drei library.
Try to use <Canvas></Canvas> then, and you can speak to the canvas with React's useRef hooks.
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
The docs are very good to get started, make sure to check them out!
