1

所有纹理都来自Adob​​e 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-nv

此图像没有Access-Control-Allow-Origin标题。尽管如此,这些纹理仍然可以很好地加载到他们的工具中。

问题

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

XMLHttpRequest 无法加载 http://s7g4.scene7.com/is/image/UnilinROWRender/qs-flr_400000020-eh。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,Origin *** 不允许访问。

根据来自 helpx.adobe.com 的链接,我必须在 Scene7 服务器上的某处放置一个AccessControlAllowOrigin.xml文件。但是,这并没有给我图像上需要的标题(请参阅引用中的图像链接)。但是 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);
    }
);  

我在这里没有看到什么阻止我使用该纹理?

4

1 回答 1

0

嗨,您的纹理加载功能很好,我认为问题在于您尝试获取图像的网站的标题一侧不允许您的应用程序请求或您的应用程序不接受从该站点获取图像

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

如果你不能尝试参考

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

于 2016-09-29T10:45:46.817 回答