reactjs - puerto - ¿Cómo conectar Threejs a React?

react tutorial

Question

Trabajo con React y uso un lienzo. Quiero cambiar el lienzo a WebGL (biblioteca Threejs). ¿Cómo conectar esta librería a React?

Tengo algun elemento, por ejemplo

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

¿Cómo convertirlo en un campo para la llamada de la biblioteca Threejs? PD:. No quiero usar extensiones como react-threejs

Answer 1

Aquí hay un ejemplo de cómo configurar esto ( ver demostración ):

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

También puede interesarle un ejemplo de pantalla completa (consulte GitHub ).

Aquí hay un ejemplo que usa React Hooks en lugar de una clase (nota: los Hooks son actualmente experimentales).

Answer 2

Puede usar la biblioteca https://github.com/toxicFork/react-three-renderer

Instalación

npm install --save [email protected] [email protected] [email protected]
npm install --save react-three-renderer

Uso

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);

Answer 3

Sé que la pregunta es un poco vieja, pero si alguien todavía está buscando algo. Intentarías https://github.com/drcmda/react-three-fiber . Tienen algunos fragmentos y demostraciones en su github.