相关疑难解决方法(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图像？

我想用experimental-webgl,和2d画布上下文也一样.在我绘制了3d对象之后,我想在它上面绘制一些2d对象.

我该怎么办？

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

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

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

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