Javascript 反应+；three.js:尝试加载图像时TextureLoader引发的错误

我一直在尝试将three.js添加到React项目中，并且大部分都是成功的。然而，我不明白为什么我的纹理图像没有加载。我正在运行我自己的本地服务器，添加了一个在加载完成时运行的回调方法，并尝试从多个位置加载我的图像，但到目前为止没有任何效果

我的图像存储在

public/animation/js/img/texture1.png

中，我的动画文件存储在

public/animation/js/animation.js

中，下面是我正在使用的代码：

const Pilot = function () {
  let faceMaterial;
  const geometry = new THREE.CircleGeometry(10, 128);
  const manager = new THREE.LoadingManager();

  manager.onStart = function (url, itemsLoaded, itemsTotal) {
    console.log('Started loading file: ',
      url,
      '.\nLoaded ',
      itemsLoaded,
      ' of ',
      itemsTotal,
      ' files.');
  };
  manager.onLoad = () => {
    console.log('Loading complete!');
  };

  manager.onProgress = function (url, itemsLoaded, itemsTotal) {
    console.log('Loading file: ',
      url,
      '.\nLoaded ',
      itemsLoaded,
      ' of ',
      itemsTotal,
      ' files.');
  };

  manager.onError = function (url) {
    console.error( 'There was an error loading ', url);
  };

  const textureLoader = new THREE.TextureLoader(manager);

  textureLoader.setCrossOrigin('anonymous');

  textureLoader.load('/img/texture1.png',
    texture => {
      faceMaterial = new THREE.MeshFaceMaterial([
        new THREE.MeshBasicMaterial({map: texture}),
        new THREE.MeshBasicMaterial({map: texture}),
        new THREE.MeshBasicMaterial({map: texture}),
        new THREE.MeshBasicMaterial({map: texture}),
        new THREE.MeshBasicMaterial({map: texture}),
        new THREE.MeshBasicMaterial({map: texture})
      ]);
    },
    undefined,
    err => {
      console.error('An error occured:', err);
    }
  );

  this.mesh = new THREE.Mesh(geometry, faceMaterial);
  this.mesh.name = 'profile';
};

---

这可能是因为您的图像路径是绝对的，即：

'/img/texture1.png'

您的web服务器是从哪个目录运行的？如果您的web服务器是从

/public

目录运行的，则您可能需要更新传递到textureLoader的

加载

方法的图像路径，如下所示：

textureLoader.load('/animation/js/img/texture1.png',

还需要确保网格使用的材质实例与纹理数据加载到的材质实例相同。您可以对代码进行以下调整以确保：

// Declare material instance outside of texture load handler
const faceMaterial = new THREE.MeshFaceMaterial([
        new THREE.MeshBasicMaterial(),
        new THREE.MeshBasicMaterial(),
        new THREE.MeshBasicMaterial(),
        new THREE.MeshBasicMaterial(),
        new THREE.MeshBasicMaterial(),
        new THREE.MeshBasicMaterial()
      ])

  const textureLoader = new THREE.TextureLoader(manager);

  textureLoader.setCrossOrigin('anonymous');

  textureLoader.load('/animation/js/img/texture1.png',
    texture => {
      // When texture loads, apply the texture to the map of each sub 
      // material of faceMaterial instance
      faceMaterial.materials[0].map = texture;
      faceMaterial.materials[1].map = texture;
      faceMaterial.materials[2].map = texture;
      faceMaterial.materials[3].map = texture;
      faceMaterial.materials[4].map = texture;
      faceMaterial.materials[5].map = texture;
    },
    undefined,
    err => {
      console.error('An error occured:', err);
    }
  );

  // Apply the faceMaterial instance declared above, to your mesh
  this.mesh = new THREE.Mesh(geometry, faceMaterial);
  this.mesh.name = 'profile';

---

更改了路径，并且在尝试加载图像时不再出现错误。纹理本身仍然没有显示。这可能是因为在纹理图像加载之前，

faceMaterial

正在传递给

new Three.Mesh（）

？