Three.js：如何将场景的2D快照制作为JPG图像？ [英] Three.js: How can I make a 2D SnapShot of a Scene as a JPG Image?

问题描述

  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图像？

首先初始化webgl上下文，像这样

  renderer = new THREE .WebGLRenderer（{
 preserveDrawingBuffer：true 
}）; 
  

preserveDrawingBuffer flag会帮助您获得当前帧的base64编码
代码如下所示：

  var strMime =image / jpeg ; 
 imgData = renderer.domElement.toDataURL（strMime）; 
  

现在，您可以使用 .jpg保存文件。扩展名，但并非所有浏览器都允许指定文件名。
我找到的最佳解决方案是在这个线程。因此，我们的脚本将检查浏览器是否允许它创建一个新的锚点元素并将其设置为 download 并点击它（将文件保存在指定的文件名中），否则它只会下载文件，但用户必须使用 .jpg 扩展名将其打开。

Codepen Link

var camera，scene，renderer; var mesh; var strDownloadMime =image / octet-stream;在里面（）;动画（）;函数init（）{var saveLink = document.createElement（'div'）; saveLink.style.position ='绝对'; saveLink.style.top ='10px'; saveLink.style.width ='100％'; saveLink.style.background ='#FFFFFF'; saveLink.style.textAlign ='center'; saveLink.innerHTML ='< a href =＃id =saveLink>保存帧< / a>'; document.body.appendChild（saveLink）; document.getElementById（saveLink）。addEventListener（'click'，saveAsImage）; renderer = new THREE.WebGLRenderer（{preserveDrawingBuffer：true}）; renderer.setSize（window.innerWidth，window.innerHeight）; document.body.appendChild（renderer.domElement）; // camera = new THREE.PerspectiveCamera（70，window.innerWidth / window.innerHeight，1，1000）; camera.position.z = 400; scene = new THREE.Scene（）; var geometry = new THREE.BoxGeometry（200，200，200）; var material = new THREE.MeshBasicMaterial（{color：0x00ff00}）; mesh = new THREE.Mesh（geometry，material）; scene.add（目）; // window.addEventListener（'resize'，onWindowResize，false）; } function onWindowResize（）{camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix（）; renderer.setSize（window.innerWidth，window.innerHeight）; } function animate（）{requestAnimationFrame（animate）; mesh.rotation.x + = 0.005; mesh.rotation.y + = 0.01; renderer.render（scene，camera）; } function saveAsImage（）{var imgData，imgNode;尝试{var strMime =image / jpeg; imgData = renderer.domElement.toDataURL（strMime）; saveFile（imgData.replace（strMime，strDownloadMime），test.jpg）; } catch（e）{console.log（e）;返回; }} var saveFile = function（strData，filename）{var link = document.createElement（'a'）; （typeof link.download ==='string'）{document.body.appendChild（link）; // Firefox要求链接在主体中link.download = filename; link.href = strData; link.click（）; document.body.removeChild（链接）; //完成后删除链接} else {location.replace（uri）; }}

  html，body {padding：0px; margin：0px;} canvas {width：100％; height：100％}  

 < script src =http ：//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js>< / script>< script src =http://threejs.org/examples/js/ libs / stats.min.js>< / script>  

I have a three.js scene like the following:

            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();

Is it possible to make a 2D SnapShot or ScreenShot from a Scene and export it as a JPG Image?

解决方案

There are a couple of things you will have to do save the frame as jpg image.

Firstly initialize the webgl context like this

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

preserveDrawingBuffer flag will help you to get the base64 encoding of the current frame The code for that will be something like this

var strMime = "image/jpeg";
imgData = renderer.domElement.toDataURL(strMime);

Now secondly you might want to save the file using a .jpg extension, but not all browsers allow you to specify the file name. The best solution I found was in this SO thread.

So our script will check if the browser allows it will create a new anchor element and set its download and click it(which will save the file in specified filename) else it will just download the file but the user will have to rename it with a .jpg extension to open it.

Codepen Link

 var camera, scene, renderer;
    var mesh;
    var strDownloadMime = "image/octet-stream";

    init();
    animate();

    function init() {

        var saveLink = document.createElement('div');
        saveLink.style.position = 'absolute';
        saveLink.style.top = '10px';
        saveLink.style.width = '100%';
        saveLink.style.background = '#FFFFFF';
        saveLink.style.textAlign = 'center';
        saveLink.innerHTML =
            '<a href="#" id="saveLink">Save Frame</a>';
        document.body.appendChild(saveLink);
        document.getElementById("saveLink").addEventListener('click', saveAsImage);
        renderer = new THREE.WebGLRenderer({
            preserveDrawingBuffer: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //

        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 400;

        scene = new THREE.Scene();

        var geometry = new THREE.BoxGeometry(200, 200, 200);



        var material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        });

        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

        //

        window.addEventListener('resize', onWindowResize, false);

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {

        requestAnimationFrame(animate);

        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;

        renderer.render(scene, camera);

    }

    function saveAsImage() {
        var imgData, imgNode;

        try {
            var strMime = "image/jpeg";
            imgData = renderer.domElement.toDataURL(strMime);

            saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");

        } catch (e) {
            console.log(e);
            return;
        }

    }

    var saveFile = function (strData, filename) {
        var link = document.createElement('a');
        if (typeof link.download === 'string') {
            document.body.appendChild(link); //Firefox requires the link to be in the body
            link.download = filename;
            link.href = strData;
            link.click();
            document.body.removeChild(link); //remove the link when done
        } else {
            location.replace(uri);
        }
    }

html, body {
    padding:0px;
    margin:0px;
}
canvas {
    width: 100%;
    height: 100%
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

这篇关于Three.js：如何将场景的2D快照制作为JPG图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！