ThreeJS: XMLHttpRequest error - Can't load image from Adobe Scene7 Servers

Question

All textures are coming from an Adobe Scene7 server. The tool I'm making is based on the original tool from Quick-Step. You can view it here: http://www.quick-step.co.uk/en-gb/find-your-floor (click on 'start roomviewer'). It also uses ThreeJS from what I can see.

An example texture being loaded into that tool is: http://quickstep.scene7.com/is/image/QuickstepRender/?src=flr_400383-n-v

This image has no Access-Control-Allow-Origin header present. Still, these texture are loading into their tool just fine.

The Problem

If in my application I use one of the textures which is being loaded from a different Scene7 server onto my ThreeJS plane I get the following error

XMLHttpRequest cannot load http://s7g4.scene7.com/is/image/UnilinROWRender/qs-flr_400000020-e-h. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin *** is therefore not allowed access.

According to this link from helpx.adobe.com I have to put a AccessControlAllowOrigin.xml file somewhere on te Scene7 server. This, however does not give me the headers I need on the image (see link to image in quote). But the original tool from QS doesn't have these headers either, and it still works. So I don't know for sure if the problems lies with my ThreeJS code or with Scene7.

Here is the code I'm using 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 exactly am I not seeing here that prevents me from using that texture?

Answer 1

hi your texture load function is good I think the probleme is side of headers the web site where you try to get image no allow request from your app or your app no accept to get image from this site

the best option is to download image and put local url in your project

if you cant try to refer

https://developer.chrome.com/extensions/xhr