Javascript 3.js，我不知道'；我不知道为什么不渲染obj文件

我正在单击react view按钮中的obj加载程序，我想在模态组件中查看obj文件。此对象加载程序组件获取模态组件的url

console.log正确。此加载程序是get url其他组件

组{uuid:“0C86CC1D-E795-4191-A62A-72DF4A433CEB”，名称：，类型： “组”，父级：null，子级：数组（8），…}castShadow: falsechildren:（8）[网格，网格，网格，网格，网格，网格， 网格]平截头：truelayers:Layers{mask:1}材质库： [“patient.mtl”]矩阵：Matrix4{elements:Array（16）}矩阵自动更新： truematrixWorld:Matrix4{元素：数组（16）}matrixWorldNeedsUpdate: falsename:“”父级：场景{uuid: “873E8718-F1B0-47B5-AC77-DC1B3334B3637”，名称：，类型：“场景”， 父：null，子：数组（5），…}位置：向量3{x:0，y:0，z: 0}四元数：四元数{{ux:0，y:0，z:0，w:1， _onChangeCallback:ƒ}receiveShadow:falserenderOrder:0rotation:Euler{{uX:0，y:0，z:0，order:“XYZ”，onChangeCallback:ƒ}比例： Vector3{x:0.07，y:0.07，z:0.07}类型：“Group”up:Vector3{x:0，y: 1，z:0}用户数据：{}uuid: “0C86CC1D-E795-4191-A62A-72DF4A433CEB”可见：trueeulerOrder: （…）id:18modelViewMatrix:Matrix4{元素：数组（16）}法线矩阵： Matrix3{elements:Array（9）}使用四元数：（…）proto：Object3D （8） [网格，网格，网格，网格，网格，网格，网格，网格，网格，网格]

场景{uuid:“873E8718-F1B0-47B5-AC77-DC1B3334B3637”，名称：，类型： “场景”，父级：null，子级：数组（5），…}

代码

import React, { Component } from "react";
import * as THREE from "three";
import OBJLoader from "three-obj-loader";
import OrbitControls from "three-orbitcontrols";
OBJLoader(THREE);

let scene;

class ObjectLoader extends Component {
  componentDidMount() {
    const width = this.mount.clientWidth;
    const height = this.mount.clientHeight;
    scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, width / height, 1, 2000);
    this.camera.position.z = 250;

    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setClearColor("#263238");
    this.renderer.setSize(width, height);
    this.mount.appendChild(this.renderer.domElement);
    const geometry = new THREE.BoxGeometry(5, 5, 5);
    const material = new THREE.MeshBasicMaterial({
      color: "#0F0",
      wireframe: true
    });
    this.cube = new THREE.Mesh(geometry, material);
    scene.add(this.cube);

    const controls = new OrbitControls(this.camera, this.renderer.domElement);


    //LIGHTS
    var lights = [];
    lights[0] = new THREE.PointLight(0x304ffe, 1, 0);
    lights[1] = new THREE.PointLight(0xffffff, 1, 0);
    lights[2] = new THREE.PointLight(0xffffff, 1, 0);
    lights[0].position.set(0, 200, 0);
    lights[1].position.set(100, 200, 100);
    lights[2].position.set(-100, -200, -100);
    scene.add(lights[0]);
    scene.add(lights[1]);
    scene.add(lights[2]);

    // load Object
    loadObj(this.props.url);
}

  componentWillUnmount() {
    this.stop();
    this.mount.removeChild(this.renderer.domElement);
  }

  start = () => {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate);
    }
  };

  stop = () => {
    cancelAnimationFrame(this.frameId);
  };

  animate = () => {
    this.renderScene();
    this.frameId = window.requestAnimationFrame(this.animate);
  };

  renderScene = () => {
    if (this.renderer) this.renderer.render(scene, this.camera);
  };

  onLoad = () => {
    this.renderScene();
    //start animation
    this.start();
  };

  onProgress = xhr => {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  };

  // Function called when download errors
  onError = error => {
    console.log("An error happened" + error);
  };

  render() {
    return (
      <div
        style={{ width: "500px", height: "500px" }}
        ref={mount => {
          this.mount = mount;
        }}
      />
    );
  }
}

function loadObj(url) {
  const objLoader = new THREE.OBJLoader();
  objLoader.load(
    url,
    function(object) {
      console.log(object, object.children);
      let mesh = object;
      scene.add(object);
      console.log(scene);
      mesh.position.set(0, 0, 0);
      mesh.scale.set(0.07, 0.07, 0.07);
    },
    function(xhr) {
      console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
    },
    // called when loading has errors
    function(error) {
      console.log("An error happened" + error);
    });
}


export default ObjectLoader;

import React，{Component}来自“React”；
从“三”中导入*作为三；
从“三个obj装载机”导入obj装载机；
从“三个OrbitControl”导入OrbitControl；
装载机（三台）；
让现场；
类ObjectLoader扩展组件{
componentDidMount（）{
const width=this.mount.clientWidth；
const height=this.mount.clientHeight；
场景=新的三个。场景（）；
this.camera=新的三视角相机（75，宽/高，1，2000）；
这个.camera.position.z=250；
this.renderer=new THREE.WebGLRenderer（{antialas:true}）；
this.renderer.setClearColor（“#263238”）；
this.renderer.setSize（宽度、高度）；
this.mount.appendChild（this.renderer.doElement）；
const geometry=新的3.BoxGeometry（5,5,5）；
常量材质=新的三网格基本材质({
颜色：“0F0”，
线框：正确
});
this.cube=新的三个网格（几何体、材质）；
scene.add（this.cube）；
const controls=新的轨道控件（this.camera、this.renderer.doElement）；
//灯光
var灯=[]；
灯[0]=新的三点灯（0x304ffe，1，0）；
灯[1]=新的三点灯（0xffffff，1，0）；
灯光[2]=新的三点光源（0xffffff，1，0）；
灯光[0].位置.set（0,200,0）；
灯光[1]。位置。设置（100200100）；
灯光[2]。位置。设置（-100，-200，-100）；
场景。添加（灯光[0]）；
场景。添加（灯光[1]）；
场景。添加（灯光[2]）；
//加载对象
loadObj（this.props.url）；
}
组件将卸载（）{
这个。停止（）；
this.mount.removeChild（this.renderer.domeElement）；
}
开始=（）=>{
如果（！this.frameId）{
this.frameId=requestAnimationFrame（this.animate）；
}
};
停止=（）=>{
cancelAnimationFrame（this.frameId）；
};
动画=（）=>{
this.renderScene（）；
this.frameId=window.requestAnimationFrame（this.animate）；
};
renderScene=（）=>{
if（this.renderer）this.renderer.render（场景，this.camera）；
};
onLoad=（）=>{
this.renderScene（）；
//启动动画
这个。start（）；
};
onProgress=xhr=>{
控制台日志（（xhr.loaded/xhr.total）*100+%loaded”）；
};
//下载错误时调用的函数
onError=错误=>{
log（“发生错误”+错误）；
};
render（）{
返回(
{
这个挂载=挂载；
}}
/>
);
}
}
函数loadObj（url）{
const objLoader=new THREE.objLoader（）；
objLoader.load(
网址，
功能（对象）{
日志（object，object.children）；
让网格=对象；
场景。添加（对象）；
控制台日志（场景）；
网格位置设置（0,0,0）；
网格刻度设置（0.07,0.07,0.07）；
},
函数（xhr）{
控制台日志（（xhr.loaded/xhr.total）*100+%loaded”）；
},
//加载有错误时调用
函数（错误）{
log（“发生错误”+错误）；
});
}
导出默认对象加载器；

您能否将您的代码作为实例分享？或者作为github回购？如果可以调试问题，则提供反馈将更容易。@Mugen87感谢您的回答。我解决了我的问题谢谢！