Javascript 用户在three.js中上传了纹理

您将发现这个问题的一个简单的修改

我想创建一个3d web应用程序，用户可以在其中选择本地计算机上的图像文件：

<input id="userImage" type="file"/>

不幸的是，这会导致以下错误：

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

我知道尝试访问WebGL中的跨来源资源时存在问题，但同时我看到以下解决方法在中提供：

下面的ECMAScript示例演示如何对来自另一个域的映像发出CORS请求。从服务器获取图像时没有任何凭据，即cookie

---

在我的代码中，您可以看到我已经为image对象指定了crossOrigin参数，但仍然收到错误。我的示例与规范有何不同？甚至可以像使用托管在另一台服务器上的资源那样使用WebGL中的本地资源吗？除此之外，还有其他工作需要我来完成这项任务吗？

< P>这个解决方案实际上是在上传服务器之前常用的。您试图呈现的图像已转换为数据url，其中不适用有关跨源策略的限制。已更正的代码位于。内容如下：

userImage = $("#userImage")[0];
if (userImage.files && userImage.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        image.src = e.target.result;
    };

    reader.readAsDataURL(userImage.files[0]);
}

---

我也有这个问题，但我有几乎完全相同的代码，只有我在使用

var map = THREE.ImageUtils.loadTexture( e.target.result );

所以我不得不用

var image = document.createElement( 'img' );
var texture = new THREE.Texture( image );
image.onload = function()  {
    texture.needsUpdate = true;
};

---

这就解决了问题。

我举了一个例子作为解决方案： 图书馆使用： -模态 -jcrop -HTML5画布 你好

var map = THREE.ImageUtils.loadTexture( e.target.result );

var image = document.createElement( 'img' );
var texture = new THREE.Texture( image );
image.onload = function()  {
    texture.needsUpdate = true;
};