Sie Bibliothek nutzen, können https://github.com/toxicFork/react-three-renderer
Installations
npm install --save [email protected] [email protected] [email protected]
npm install --save react-three-renderer
Nutzungs
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);`
In 'componentDidMount' Sie die DOM-Referenz' this.refs.threejs' und so etwas wie '.appendChild (threeRenderer.domElement)' –
Weiterführende Literatur über Lifecycle-Methoden wie 'componentDidMount' verwenden zugreifen können: https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle – taylorc93
Hier finden Sie eine Antwort auf die Frage, wie eine Bibliothek von Drittanbietern in React abgebildet werden kann: http://stackoverflow.com/a/40350880/1333836 Sollte in Ihrem Fall ähnlich aussehen. –