如何連接Threejs到React？

Question

我使用React並使用畫布。我想將畫布更改爲WebGL（Threejs庫）。如何將此庫連接到React？

我有一些元素，例如

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

如何使它成爲Threejs庫調用一個領域？ P.S :.我不想用等反應，threejs擴展

Answer 1

可以使用庫https://github.com/toxicFork/react-three-renderer

安裝

npm install --save react@15.5.3 react-dom@15.5.3 three@0.84.0 
npm install --save react-three-renderer 

使用

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 2

下面是一個例子如何設置（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