相关疑难解决方法(0)

如何从Three.js画布中保存图像？

我正在尝试使用Canvas2Image,但它不喜欢玩Threejs.由于画布没有定义,直到它有一个div来附加画布对象.

http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images

我有一个像以下一样的three.js场景:

            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            var geometry = new THREE.BoxGeometry(1,1,1);
            var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
            var cube = new THREE.Mesh(geometry, material);
            scene.add(cube);

            camera.position.z = 5;

            var render = function () {
                requestAnimationFrame(render);

                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;

                renderer.render(scene, camera);
            };

            render();

是否可以从场景制作2D SnapShot或ScreenShot并将其导出为JPG图像？

我正在尝试使用以下代码段将此页面canvas上的元素转换为png(例如,在JavaScript控制台中输入):

(function convertCanvasToImage(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL("image/png");
  return image;
})($$('canvas')[0]);

不幸的是,我得到的png是完全空白的.另请注意,在调整页面大小后,原始画布将变为空白.

为什么canvas空白？我该如何将其转换canvas为png？

基本上,我想要设置我可以去saveDrawingBuffer = true,渲染场景一次,抓住截图,然后返回.但是,这会带来两个问题:

• 渲染器中没有方法可以处理所有缓冲区,

• 如果我这样做,画布会变黑

  renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});

我该怎么做呢？

编辑:我没有找到切换这个的方法,所以我不得不克隆场景并创建第二个渲染器来制作屏幕截图.请参阅https://github.com/mrdoob/three.js/issues/189