사용자가 three.js에서 텍스처를 업로드

Question

Here 문제의 jsFiddle가 수정되었습니다.

나는 사용자가 자신의 로컬 컴퓨터에 이미지 파일을 선택할 수있는 3 차원 웹 응용 프로그램을 만들고 싶습니다 : 파일을 선택하면

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

, 이미지가 매개 변수로로드를 THREE.ShaderMaterial 오브젝트 GLSL 쉐이더는 이미지에 적용되며, 결과는 브라우저에서 컨테이너에 렌더링 :

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

나는이 문제에가 알고 :

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

불행하게도,이 다음과 같은 오류가 발생합니다 WebGL이 크로스 출처 리소스에 액세스하려고하지만 주위 official specification for WebGL에서 제공되는 다음과 같은 작업을 볼 수있는 동시에 :

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에서 로컬 자원을 다른 서버에서 호스팅되는 자원과 함께 사용할 수도 있습니까? 그 일을 완수하기 위해 고려해야 할 다른 일이 있습니까?

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

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

과 그 코드를 대체했다 사용 된 거의 정확한 코드를했다

그리고 그게 문제를 해결했습니다.

Answer 3

나는 해결책으로 예를 들고 있습니다 : http://develoteca.com/EjerciosOnline/Exampleplane 라이브러리 사용 : - 모달 - jcrop - html5canvas 인사말.