javascript - react + three.js : Error thrown by TextureLoader when trying to loading image

Question

我一直在尝试将 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';
};

Answer 1

可能是因为你的图片路径是绝对的，即:'/img/texture1.png'

您的 Web 服务器从哪个目录运行？如果您的 Web 服务器运行于 /public 目录，那么您可能需要更新传递给 textureLoader 的 load 方法的图像路径，如下所示:

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

您还需要确保您的网格使用与加载纹理数据相同的 Material 实例。您可以对代码进行以下调整以确保这一点:

// 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';