Getting CORS Error While Uploading Image as Texture

Questions
,
1

let markerImg = ‘https://homepages.cae.wisc.edu/~ece533/images/airplane.png’

const loader = new THREE.TextureLoader();

// loader.setCrossOrigin('*');
// loader.setRequestHeader('Access-Control-Allow-Origin', '*');
const floorTexture = loader.load(markerImg, (img) => {
  img.needsUpdate = true;
  img.crossOrigin = '';
  floor.scale.set(1.0, img.image.height / img.image.width, 1.0);
});
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
const floorMaterial = new THREE.MeshBasicMaterial({
  map: floorTexture,
  side: THREE.DoubleSide,
});

const floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.geometry.computeBoundingBox();
floor.geometry.needsUpdate = true;
const sizeOfMarker = floor.geometry.boundingBox.clone();
floor.position.y = -10;
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
2

Live example demonstrating the error: https://jsfiddle.net/tzjocLhw/

This is a problem of your server. You have to ensure that CORS headers are properly defined in the HTTP response. How this is going to be configured depends on your backend.

1 Like