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

问题描述

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

Here you will find a jsFiddle adaptation of the problem.

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

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?

推荐答案

解决方案实际上通常是用于预览本地图像之前，比如上传服务器。您尝试呈现的图像将转换为数据网址，其中有关跨源策略的限制不适用。更正后的代码位于此处。以下是它的内容：

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屋！