所有纹理都来自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-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);
}
);
我在这里没有看到什么阻止我使用该纹理?