The textures in my tool are sourced from an Adobe Scene7 server, inspired by Quick-Step's original tool. You can check out the tool at this link: (click on 'start roomviewer'). It appears to be using ThreeJS as well.
For instance, a sample texture loaded into the tool is:
Despite lacking the Access-Control-Allow-Origin header, these textures load seamlessly into their tool.
The Issue
Incorporating one of these remote textures from another Scene7 server onto a plane inThreeJS within my application triggers the following error:
XMLHttpRequest cannot load . The requested resource lacks the 'Access-Control-Allow-Origin' header, restricting access from origin ***.
As mentioned in this Adobe help article, I am advised to place an AccessControlAllowOrigin.xml file somewhere on the Scene7 server. However, this doesn't seem to provide the necessary headers for the image like the ones in the quoted URL. Interestingly,even the original QS tool manages without these headers, leaving me uncertain whether the issue lies with my ThreeJS code or Scene7 itself.
Below is the code snippet used to load the image:
var loader = new THREE.TextureLoader();
loader.crossOrigin = 'anonymous';
loader.load('http://s7g4.scene7.com/is/image/UnilinROWRender/qs-flr_400000020-e-h',
// Function when resource is loaded
function (text) {
geometry = new THREE.PlaneGeometry(20, 20);
material = new THREE.MeshBasicMaterial({ map: text, side: THREE.DoubleSide });
plane = new THREE.Mesh(geometry, material);
anchor.add(plane);
},
// Function called when download progresses
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% texture loaded');
},
// Function called when download errors
function (xhr) {
console.log('An error happened while loading texture: ', xhr);
}
);
What could be missing in my setup that prevents successful use of the texture?