用户在three.js中上传的纹理 [英] User uploaded textures in three.js

问题描述

这里你会发现问题的 jsFiddle 改编版.

Here you will find a jsFiddle adaptation of the problem.

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

I would like to create a 3d web application in which the user is able to select an image file on their local machine:

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

选择文件后，图像将作为参数加载到 THREE.ShaderMaterial 对象中.将 glsl 着色器应用于图像，并将结果呈现到浏览器中的容器中:

When a file is selected, the image is loaded as a parameter in a THREE.ShaderMaterial object. A glsl shader is applied to the image and the result is rendered to a container in the browser:

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

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

Unfortunately, this results in the following error:

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

我知道在 WebGL 中尝试访问跨域资源存在问题，但同时我看到 WebGL 官方规范:

I am aware there are issues with trying to access cross-origin resources in WebGL, but at the same time I see the following work around is offered in the official specification for WebGL:

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

The following ECMAScript example demonstrates how to issue a CORS request for an image coming from another domain. The image is fetched from the server without any credentials, i.e., cookies.

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 中的本地资源吗?除此之外，我是否应该考虑其他任何变通方法来完成任务?

In my code you see I've specified the crossOrigin parameter for the image object, but I still receive the error. Where does my example differ from the specification? Is it even possible to use local resources in WebGL as one would with resources hosted on another server? Barring that, are there any other work arounds I should consider to accomplish the task?

推荐答案

该解决方案实际上通常用于 预览本地图像，例如，将它们上传到服务器之前.您尝试渲染的图像将转换为数据 url，其中跨源策略的限制不适用.更正后的代码位于此处.下面是它的主要内容:

The solution actually turns out to be commonly used to preview local images prior to, say, uploading them a server. The image you are trying to render is converted to a data url where restrictions about cross origin policies do not apply. The corrected code is located here. What follows is the meat of it:

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

这篇关于用户在three.js中上传的纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！