थ्रीज को पुनः प्रतिक्रिया कैसे कनेक्ट करें?

Question

मैं प्रतिक्रिया के साथ काम करता हूं और कैनवास का उपयोग करता हूं। मैं कैनवास को वेबजीएल (थ्रीज लाइब्रेरी) में बदलना चाहता हूं। प्रतिक्रिया के लिए इस पुस्तकालय को कैसे कनेक्ट करें?

मेरे पास कुछ तत्व है, उदा।

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

यह Threejs पुस्तकालय कॉल के लिए एक क्षेत्र कैसे बनाने के लिए? पीएस:। मैं प्रतिक्रिया-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