javascript - 三JS : XMLHttpRequest error - Can't load image from Adobe Scene7 Servers

Question

所有纹理均来自 Adobe Scene7 服务器。我正在制作的工具基于 Quick-Step 的原始工具。您可以在这里查看:http://www.quick-step.co.uk/en-gb/find-your-floor (点击“启动 RoomViewer”)。据我所知，它还使用了 ThreeJS。

加载到该工具中的示例纹理是:http://quickstep.scene7.com/is/image/QuickstepRender/?src=flr_400383-n-v

此图像不存在 Access-Control-Allow-Origin header 。尽管如此，这些纹理仍然可以很好地加载到他们的工具中。

问题

如果在我的应用程序中我使用从不同的 Scene7 服务器加载到我的 ThreeJS 平面上的纹理之一，我会收到以下错误

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.

根据this link from helpx.adobe.com我必须将 AccessControlAllowOrigin.xml 文件放在 Scene7 服务器上的某个位置。然而，这并没有给我图像上所需的标题(请参阅引用中图像的链接)。但是 QS 的原始工具也没有这些 header ，但它仍然有效。所以我不确定问题是出在我的 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

嗨，您的纹理加载功能很好，我认为问题出在您尝试获取图像的网站的标题一侧，不允许来自您的应用程序的请求，或者您的应用程序不允许从此网站获取图像

最好的选择是下载图像并将本地网址放入您的项目

如果您无法尝试引用

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