tutorial three react puerto instalar descargar create configurar app reactjs three.js

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



react tutorial (3)

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

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


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