Three.js并加载跨域映像 [英] Three.js and loading a cross-domain image

问题描述

我知道这已经被问过，我已经读过问题和答案，我已经能够找到，但没有什么工作。

I know this has been asked before, and I've read ever question and answer I've been able to find, but nothing works.

在本地服务器（IIS）上运行。我试图从imgur加载图像，然后使用它作为纹理对象使用代码：

I'm running this on a local server (IIS). I'm trying to load an image from imgur and then use that as texture for an object using the code:

var savedImage = /[^?]*$/.exec(location.search)[0];
if (savedImage != "") { savedImageLoad("http://i.imgur.com/" + savedImage + ".jpg"); };

    function savedImageLoad(image) {
        var mapOverlay = new THREE.ImageUtils.loadTexture(image);
        sphere.material = new THREE.MeshBasicMaterial({map: mapOverlay, needsUpdate: true});;
        sphere.geometry.buffersNeedUpdate = true;
        sphere.geometry.uvsNeedUpdate = true;
    }

但它给出错误：

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at http://i.imgur.com/uBD0g95.jpg may not be loaded.

我试过放置 THREE.ImageUtils.crossOrigin =anonymous ，或者在我的代码开头，结尾处，以及其他各个点的某些变体。我添加了一个web.config与

I've tried placing THREE.ImageUtils.crossOrigin = "anonymous";, or some variation of, at the beginning of my code, at the end, and at other various points. I've added a web.config with

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
    </customHeaders>
  </httpProtocol>
 </system.webServer>
</configuration>

但不起作用。这也不能在bitbucket.org上托管的站点上工作，对我来说，我在代码中缺少了一些东西。

but that didn't work. This also doesn't work on a site hosted on bitbucket.org, which to me says I'm missing something in my code.

这似乎是在 sphere.material = new THREE.MeshBasicMaterial（{map：mapOverlay，needsUpdate：true}）;; 行，如果我注释掉那么没有错误网格没有更新）。

It seems to be failing at the sphere.material = new THREE.MeshBasicMaterial({map: mapOverlay, needsUpdate: true});; line, as if I comment that out then there's no error (but then the mesh isn't updated).

我真的在失去什么，试试这里，任何帮助将不胜感激。

I'm really at a loss of what else to try here and any help would be appreciated.

推荐答案

这项工作

THREE.ImageUtils.crossOrigin = '';
var mapOverlay = THREE.ImageUtils.loadTexture('http://i.imgur.com/3tU4Vig.jpg');

这里是

Here's a fiddle.

注意：不要使用新与 THREE .ImageUtils.loadTexture

为了将图片加载到WebGL中发送图片的服务器必须用正确的头响应。这不足以让你说你想使用图像的跨源。所做的就是告诉服务器您要求使用该图片的权限。

In order to load an image cross-origin into WebGL the server that's sending the image has to respond with the correct headers. It's not enough for you to say you want to use the image cross-origin. All that does is tell the server you're requesting permission to use the image.

您可以设置 img.crossOrigin ，或者在THREE的情况下 THREE.ImageUtils.crossOrigin ，''，'anonymous' $ c>''，或者您可以将其设置为'use-credentials'，它会向服务器发送更多信息。浏览器会看到您设置 crossOrigin 并向服务器发送某些标头。服务器读取这些标头，决定您的域是否有权使用映像，如果您有权限，则会将某些标头发送回浏览器。

You can set img.crossOrigin, or in THREE's case THREE.ImageUtils.crossOrigin, to either '', 'anonymous' which is the same as '', or you can set it to 'use-credentials' which sends even more info to the server. The browser sees you set crossOrigin and sends certain headers to the server. The server reads those headers, decides if your domain has permission to use the image and if you do have permission it sends certain headers back to the browser. The browser, if it sees those headers will then let you use the image.

上面最大的一点是服务器必须发送头。大多数服务器不发送这些头。 imgur.com显然。我怀疑bitlocker没有，虽然我没有测试它。

The biggest point to take away from the above is the server has to send the headers. Most servers don't send those headers. imgur.com does apparently. I suspect bitlocker does not though I didn't test it.

此外，您必须设置 crossOrigin 。如果你没有浏览器不允许你使用img的方式，你不应该能够，即使服务器发送正确的头。

Also you have to set crossOrigin. If you don't the browser won't allow you to use the img in ways your not supposed to be able to even if the server sends the correct header.

这篇关于Three.js并加载跨域映像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！