ThreeJS: Ошибка XMLHttpRequest - Не удается загрузить изображение с серверов Adobe Scene7

Question

Все текстуры приходят с сервера Adobe Scene7. Инструмент, который я делаю, основан на оригинальном инструменте Quick-Step. Вы можете просмотреть его здесь: http://www.quick-step.co.uk/en-gb/find-your-floor (нажмите "Начать просмотрщик комнаты"). Он также использует ThreeJS из того, что я вижу.

Пример текстуры, загружаемой в этот инструмент: http://quickstep.scene7.com/is/image/QuickstepRender/?src=flr_400383-n-v

Это изображение не имеет Access-Control-Allow-Origin заголовок присутствует. Тем не менее, эти текстуры загружаются в свой инструмент просто отлично.

Эта проблема

Если в моем приложении я использую одну из текстур, которая загружается с другого сервера Scene7 на мою плоскость ThreeJS, я получаю следующую ошибку

XMLHttpRequest не может загрузить http://s7g4.scene7.com/is/image/UnilinROWRender/qs-flr_400000020-e-h. В запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Происхождение *** поэтому не допускается.

По этой ссылке с helpx.adobe.com я должен поместить файл AccessControlAllowOrigin.xml где-нибудь на сервер Scene7. Это, однако, не дает мне заголовки, которые мне нужны на изображении (см. Ссылку на изображение в цитате). Но оригинальный инструмент от QS также не имеет этих заголовков, и он все еще работает. Так что я точно не знаю, кроется ли проблема в моем коде ThreeJS или в Scene7.

Вот код, который я использую для загрузки изображения:

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

Что именно я не вижу здесь, что мешает мне использовать эту текстуру?

Answer 1

Привет, ваша функция загрузки текстур хороша, я думаю, проблема в том, что на стороне заголовков находится веб-сайт, на котором вы пытаетесь получить изображение, не разрешать запрос из вашего приложения или ваше приложение не принимает, чтобы получить изображение с этого сайта

лучший вариант - загрузить изображение и добавить локальный URL в ваш проект.

если вы не можете попытаться сослаться

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