用户在 three.js 中上传的纹理答案

【问题标题】：User uploaded textures in three.js用户在 three.js 中上传的纹理
【发布时间】：2014-01-08 17:06:13
【问题描述】：

Here你会找到一个jsFiddle改编的问题。

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

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

选择文件时，图像会作为参数加载到 THREE.ShaderMaterial 对象中。将 glsl 着色器应用于图像，并将结果渲染到浏览器中的容器：

$("#userImage").change(function(){
    var texture = THREE.ImageUtils.loadTexture( $("#userImage").val() );
    texture.image.crossOrigin = "anonymous";
    shader.uniforms.input.value = texture;
    shader.uniforms.input.needsUpdate = true;
});

很遗憾，这会导致以下错误：

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

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

以下 ECMAScript 示例演示了如何为来自另一个域的图像发出 CORS 请求。图片是在没有任何凭据（即 cookie）的情况下从服务器获取的。

var gl = ...;
var image = new Image();

// The onload handler should be set to a function which uploads the HTMLImageElement
// using texImage2D or texSubImage2D.
image.onload = ...;

image.crossOrigin = "anonymous";

image.src = "http://other-domain.com/image.jpg";

在我的代码中，您可以看到我为图像对象指定了 crossOrigin 参数，但我仍然收到错误消息。我的示例与规范有何不同？甚至可以像使用托管在另一台服务器上的资源一样使用 WebGL 中的本地资源吗？除此之外，我还应该考虑其他解决方法来完成这项任务吗？

【问题讨论】：

标签： javascript opengl-es three.js webgl cors

【解决方案1】：

该解决方案实际上被证明通常用于preview local images，然后再将它们上传到服务器。您尝试呈现的图像将转换为不适用跨源策略限制的数据 url。更正后的代码位于here。以下是它的精髓：

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]);
}

【讨论】：

【解决方案2】：

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

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;
};

这解决了问题..

【讨论】：

【解决方案3】：

我有一个例子作为解决方案：http://develoteca.com/EjerciosOnline/Exampleplane 图书馆使用： - 模态的 - jcrop - html5canvas 问候。

【讨论】：