如何在React Component中使用THREE.MTLLoader.setTexturePath（）设置正确的路径来加载纹理

Question

我需要能够提供Three.MTLLoader.setTexturePath的纹理文件夹的路径，以加载我的.jpg纹理，但是我以前这样做的每种组合似乎都行不通。我试过'./gateway/'等。有什么建议吗？对象和模型都成功加载，但是没有纹理映射。

我使用React-Boilerplate。我想知道这是否与webpack配置有关，但我很犹豫开始对此进行处理。

import React, { Component } from 'react';
import * as THREE from 'three';
import {MTLLoader, OBJLoader} from 'three-obj-mtl-loader';
const OrbitControls = require('three-orbit-controls')(THREE);
import GATEWAY_OBJ from './gateway/space_station.obj';
import GATEWAY_MTL from './gateway/space_station.mtl';

export default class ThreeScene extends Component{
    constructor(props){
        super(props)
    }
 async componentDidMount(){
    const width = this.mount.clientWidth;
    const height = this.mount.clientHeight;
    //ADD SCENE
    this.scene = new THREE.Scene()
    //ADD CAMERA
    this.camera = new THREE.PerspectiveCamera(
      75,
      width / height,
      0.1,
      1000
    )
    this.camera.position.z = 10
    //ADD RENDERER
    this.renderer = new THREE.WebGLRenderer({ antialias: true })
    this.renderer.setClearColor(0x000000, 0)
    this.renderer.setSize(width, height)
    this.mount.appendChild(this.renderer.domElement)
    //ADD LIGHT
    this.keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
    this.keyLight.position.set(-100, 0, 100);

    this.fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
    this.fillLight.position.set(100, 0, 100);

    this.backLight = new THREE.DirectionalLight(0xffffff, 1.0);
    this.backLight.position.set(100, 0, -100).normalize();

    this.scene.add(this.keyLight)
    this.scene.add(this.fillLight)
    this.scene.add(this.backLight)
    //ADD GATEWAY OBJECT
    await this.loadModel(this.scene);

    this.controls = new OrbitControls(this.camera);
    this.controls.enableDamping = true;
    this.controls.campingFactor = 0.25;
    this.controls.enableZoom = true;
    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.renderScene()
   this.frameId = window.requestAnimationFrame(this.animate)
 }
renderScene = () => {
  this.renderer.render(this.scene, this.camera)
}
loadModel = (scene) => {
  let mtlLoader = new MTLLoader();
  let objLoader = new OBJLoader();
  mtlLoader.setTexturePath('components/Three/gateway');
  mtlLoader.load(GATEWAY_MTL, (materials) => {
    materials.preload()
    objLoader.setMaterials(materials)
    objLoader.load(GATEWAY_OBJ, (object) => {
      scene.add(object);
      object.position.z = -6;
      object.position.x = -4.2;
      object.rotation.x = 79.85;
    })
  })

}
render(){
    return(
      <div
        style={{ width: '100%', height: '100%', position:'absolute', left:'0',top:'0', zIndex:'-1'}}
        ref={(mount) => { this.mount = mount }}
      />
    )
  }
}

文件结构如下

-app
  -components
    -THREE
      -index.js
      -gateway
        -space_station.obj
        -space_station.mtl
        -rosary.jpg

mtl文件是

newmtl 03___Default
    Ns 10.0000
    Ni 1.5000
    d 1.0000
    Tr 0.0000
    Tf 1.0000 1.0000 1.0000 
    illum 2
    Ka 0.0941 0.0314 0.0627
    Kd 0.0941 0.0314 0.0627
    Ks 0.0000 0.0000 0.0000
    Ke 0.0000 0.0000 0.0000

newmtl 02___Defaultcc
    Ns 10.0000
    Ni 1.5000
    d 1.0000
    Tr 0.0000
    Tf 1.0000 1.0000 1.0000 
    illum 2
    Ka 0.5882 0.5882 0.5882
    Kd 0.5882 0.5882 0.5882
    Ks 0.0000 0.0000 0.0000
    Ke 1.0000 1.0000 1.0000
    map_Ke ./light-cols2.gif

newmtl 13___Defaultmm
    Ns 36.0000
    Ni 1.5000
    d 1.0000
    Tr 0.0000
    Tf 1.0000 1.0000 1.0000 
    illum 2
    Ka 0.2588 0.0706 0.1020
    Kd 0.2588 0.0706 0.1020
    Ks 0.7740 0.7740 0.7740
    Ke 0.0000 0.0000 0.0000
    map_Ka ./rosary.jpg
    map_Kd ./rosary.jpg
    map_bump ./rosary.jpg
    bump ./rosary.jpg