React + three.js: Error thrown by TextureLoader when trying to loading image

Question

I've been trying to add three.js to a React project and have mostly been successful. I can't, however, figure out why my texture images aren't loading. I'm running my own local server, have added a callback method to run when loading is complete, and have tried loading my images from multiple locations, but so far nothing has worked.

My images are stored in public/animation/js/img/texture1.png, and my animation file in public/animation/js/animation.js, and hereś the code I'm working with right now:

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

Dacre Denny · Accepted Answer · 2018-07-30 01:37:42Z

It may be due to your image path being absolute, ie: '/img/texture1.png'

From what directory is your web server being run? If your web server is running from say, the /public directory, then you will likely need to update your image path that is passed to your textureLoader's load method as follows:

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

You will also need to ensure that your mesh is using the same material instance that your texture data is loaded into. You can make the following adjustment to your code to ensure this:

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

Changed my path, and I'm no longer getting an error when trying to load my image. The texture itself still isn't being displayed. Could that be because faceMaterial is being passed to new Three.Mesh() before the texture image loads?

Collectives™ on Stack Overflow

React + three.js: Error thrown by TextureLoader when trying to loading image

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related