Three.js를 toDataUrl 빈

나는 완전히 빈 나오는 렌더링 WebGL을 three.js를에서 이미지를 저장하려고하지만, 문자의 톤 돌아 않는 경우 :Three.js를 toDataUrl 빈

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAADICAYAAACeY7GXAAADt0lEQ…IF4M2+znB4GcgWgDf7OsPhZSBbAN7s6wyHl4FsAXizrzP8AS/TAMmecuTCAAAAAElFTkSuQmCC

나는 preserveDrawingBuffer 세트를 수행하십시오 진실과 같이 :

renderer = new THREE.WebGLRenderer({ 
    alpha: true, 
    antialias: true, 
    preserveDrawingBuffer: true 
});

그리고 이것은 내가 toDataUrl 호출 오전 방법은 다음과 같습니다 여기

var getImageData = false; 
function render() { 

      //camera.position.x += (mouseX - camera.position.x) * .005; 
      //camera.position.y += (- mouseY - camera.position.y) * .005; 

      camera.lookAt(scene.position); 

      renderer.render(scene, camera); 
      if(getImageData == true){ 
       imgData = renderer.domElement.toDataURL("image/png"); 
       window.setTimeout(10); 
       console.log(imgData); 
       getImageData = false; 
      } 
      requestAnimationFrame(render); 
     } 


      getImageData = true;

그리고를한다 내가 왜 이미지로, 어떤 아이디어가 아닌 다른 무슨 말을 모르겠습니다

CanvasCode

<canvas width="175" height="200" style="width: 175px; height: 200px"></canvas>

솔직히

캔버스 : 전에 이미지 렌더링처럼 캔버스 모습 완전히 공백으로오고있다? render() 함수는 코드의 맨 마지막에 있습니다.

출처

2016-06-03 brandon cox

, 내가 주변에 검색 좀하고 몇 가지를 시도

if(getImageData == true) { window.setTimeout(function() { imgData = renderer.domElement.toDataURL("image/png"); console.log(imgData); }, 100); getImageData = false; }

그것을하는 방법, 아직도 모든 방법은 빈 이미지를 만듭니다. –

WebGL은 비동기 API입니다. 따라서 toDataUrl()을 호출하기 전에 gl.finish() (성능을 악화시킬 수 있음) 전화를 추가하거나 다음 프레임에서 호출해야합니다. (당신이 있다고했지만, 잘못을하고) setTimeout을 사용할 수 있습니다 예를 들어, 그래서 당신을 수행합니다

나는 여전히 이미지를 렌더링하는 얻이 수없는 것

출처

2016-06-07 20:18:42

방금 시도했는데 gl, webgl 등이 정의되어 있지 않습니다. 나 또한 THREE.finish()를 시도 했는데도 작동하지 않았다. –

@brandoncox setTimeout을 시도하십시오. 코드 스 니펫을 포함하도록 답변을 수정했습니다. –

이 오류가 발생합니다 : [.CommandBufferContext.Offscreen-MainThread-038CA608] 렌더링 경고 : 단위에 텍스처가 없습니다. 0 –

Three.js를 toDataUrl 빈

답변

관련 문제