用户在 Three.js 中上传纹理

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 中的跨源资源存在问题，但同时我看到以下解决方法提供在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 中使用本地资源？除此之外，我还应该考虑其他解决方法来完成任务吗？

该解决方案实际上被普遍用于预览本地图像比如说，在将它们上传到服务器之前。您尝试渲染的图像将转换为数据 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]);
}