react-three-rendererで.mtlと.objを読み込めません

Question

react-three-rendererで.objと.mtlをロードしようとしていますが、モデルを読み込む際に欠落しています。現在、div内にキューブをレンダリングすることができます。しかし、私は私の.objモデルでキューブを置き換えたいです。

インストール：

npm install --save react@15.6.1 react-dom@15.6.1 three@0.86.0 
npm install --save react-three-renderer 
npm install --save three-obj-loader 
npm install --save three-mtl-loader 

使用：このコードを追加するための.obj .mtlしかし

import React from 'react'; 
import React3 from 'react-three-renderer'; 
import * as THREE from 'three'; 
import OBJLoader from 'three-obj-loader';// added while importing character .obj 
import OBJLoader from 'three-mtl-loader';// added while importing character .mtl 


class Simple extends React.Component { 
    static propTypes = { 
    width: React.PropTypes.number.isRequired, 
    height: React.PropTypes.number.isRequired, 
    }; 

    constructor(props, context) { 
    super(props, context); 

    this.cameraPosition = new THREE.Vector3(0, 0, 5); 

    // construct the position vector here, because if we use 'new' within render, 
    // React will think that things have changed when they have not. 

    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, 
     height, 
    } = this.props; 

    // or you can use: 
    // width = window.innerWidth 
    // height = window.innerHeight 

    return (<React3 
     mainCamera="camera" // this points to the perspectiveCamera 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>); 
    } 
} 

export default Simple; 

予想される3Dモデルのdiv内のキューブ？

const mtlLoader = new THREE.MTLLoader(); 
mtlLoader.setBaseUrl(PATH); 
mtlLoader.setPath(PATH); // One of these might not be needed 
mtlLoader.crossOrigin = '*'; // Use as needed 
mtlLoader.load(MTL_FILE, materials => { 
    materials.preload(); 
    // OBJ Loader 
    const objLoader = new THREE.OBJLoader(); 
    objLoader.setMaterials(materials); 
    objLoader.setPath(PATH); 
    objLoader.load(OBJ_FILE, object => { 
     for(let child of object.children) { 
      child.material.side = THREE.DoubleSide 
     } 

    }, onProgress, onError); 
}); 

Answer 1

私はJSONオブジェクトをロードしようとしたときに同様の問題が発生しました。これは最終的に私の仕事：あなたが本当にに注意する必要がある

this.state = { 
    geometry: { vertices: [], faces: [] faceVertexUvs: []} 
}; 

//in componentDidMount 
const loader = new THREE.JSONLoader(); 
loader.load("new-origin.json", geometry => { 
    geometry.center(); 
    this.setState({ geometry: geometry }); 
}); 

//in my render 
<scene> 
    <perspectiveCamera 
    name="camera" 
    fov={45} 
    aspect={width/height} 
    near={0.1} 
    far={10000} 
    position={this.cameraPosition} 
    /> 
    <mesh 
    rotation={this.state.cubeRotation} 
    position={this.meshPosition}> 
     <geometry 
     vertices={this.state.geometry.vertices} 
     faces={this.state.geometry.faces} 
     faceVertexUvs={this.state.geometry.faceVertexUvs} 
     /> 
     <meshLambertMaterial /> 
    </mesh> 
</scene> 

一つは、すべてがアップロードされるまで何もレンダリングしたくないということです。だから私はReact3コンポーネントをレンダリングする前にthis.state.geometryが実際にロードされているかどうかをチェックするレンダリングの前に条件付きがあります。

https://tweedegolf.nl/blog/14/react-and-threejs私は最終的にそのルートには行っていませんが、非常に役に立ちました。