Javascript 无法通过react三个渲染器加载.mtl和.obj

我正试图通过react三个渲染器加载.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

用法：div中的立方体

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;

---

我在尝试加载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>

this.state={
几何体：{顶点：[]，面：[]面顶点VS:[]}
};
//组件安装
const loader=new THREE.JSONLoader（）；
load（“new origin.json”，geometry=>{
几何中心（）；
this.setState（{geometry:geometry}）；
});
//在我的渲染中

有一件事你真的需要注意的是，你不想渲染任何东西，直到所有东西都加载完毕。因此，在渲染返回之前，我有一个条件，它检查在渲染React3组件之前是否实际加载了

this.state.geometry

---

我发现这也很有帮助，尽管我最终没有这样做。

如果您希望立即加载模型，您是否会将加载代码添加到某个react组件生命周期事件中？如。

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>