BabylonJS - 创建ScreenShot

BabylonJS创建ScreenShot - 从简单和简单的步骤学习BabylonJS，从基本到高级概念，包括简介，环境设置，概述，基本元素，材料，动画，相机，灯光，参数形状，网格，矢量位置和旋转，贴花，曲线3 ，动态纹理，视差映射，镜头光晕，创建ScreenShot，反射探测器，标准渲染管道，ShaderMaterial，骨骼和骨架，物理引擎，播放声音和音乐。

要捕获您当前正在使用的屏幕，使用打印屏幕按键无法以高分辨率拍摄屏幕截图. BabylonJS提供了创建屏幕截图API，有助于这样做.它将文件保存为png格式，并且不会牺牲图像的质量.

语法

要截取我们需要提供的屏幕截图引擎，相机和大小如下所示.

BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 }, function (data) {   var img = document.createElement("img");   img.src = data;   document.body.appendChild(img);});

当用户点击它时调用屏幕截图API的按钮被放置.

更改是传递给截图api的引擎.

var engine = new BABYLON.Engine(canvas, true, {    preserveDrawingBuffer: true, stencil: true });

它需要 preserveDrawingBuffer 和模具等选项设置为true.

按钮添加如下 :

ssButton = document.createElement("input");document.body.appendChild (ssButton);

点击事件被添加到上面的按钮，并调用 createscreenshot .它将更新屏幕末尾的屏幕截图.用于图像src的数据具有创建的屏幕截图URL.

演示

               BabylonJs - Basic Element-Creating Scene                                       var canvas = document.getElementById("renderCanvas");         var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });         var createScene  = function() {            var scene = new BABYLON.Scene(engine);                        // Setup environment            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);                        var camera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1, 0.8, 20, new BABYLON.Vector3(0, 0, 0), scene);            camera.attachControl(canvas, true);            var gmat = new BABYLON.StandardMaterial("mat1", scene);            gmat.alpha = 1.0;                        //gmat.diffuseColor = new BABYLON.Color3(1, 0, 0);            var texture = new BABYLON.Texture("images/mat.jpg", scene);            gmat.diffuseTexture = texture;            var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 150, height:15}, scene);            ground.material = gmat;            var mat = new BABYLON.StandardMaterial("mat1", scene);            mat.alpha = 1.0;            mat.diffuseColor = new BABYLON.Color3(1, 0, 0);                        var texture = new BABYLON.Texture("images/rugby.jpg", scene);            mat.diffuseTexture = texture;            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, diameterX: 3}, scene);            sphere.position= new BABYLON.Vector3(15,1,0);            sphere.material = mat;            var faceColors = new Array();            faceColors[1] = new BABYLON.Color4(0,1,0,1);   // green front            var matcone = new BABYLON.StandardMaterial("mat1", scene);            matcone.alpha = 1.0;            matcone.diffuseColor = new BABYLON.Color3(0.9, 0, 2);                        var texture = new BABYLON.Texture("images/cone.jpg", scene);            matcone.diffuseTexture = texture;            var cone = BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);            cone.position= new BABYLON.Vector3(12,1,0);            cone.material = matcone;            var matplane = new BABYLON.StandardMaterial("matplane", scene);            matplane.alpha = 1.0;            matplane.diffuseColor = new BABYLON.Color3(0.9, 0, 2);                        var texture = new BABYLON.Texture("images/board.jpg", scene);            matplane.diffuseTexture = texture;            var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width: 5, height : 5}, scene);            plane.position= new BABYLON.Vector3(9,2.5,0);            plane.material = matplane;                        var disc = BABYLON.MeshBuilder.CreateDisc("disc", {tessellation: 3}, scene);            disc.position= new BABYLON.Vector3(5,1,0);            var mattorus = new BABYLON.StandardMaterial("matoct", scene);            mattorus.alpha = 1.0;                        var texture = new BABYLON.Texture("images/ring.jpg", scene);            mattorus.diffuseTexture = texture;                        var torus = BABYLON.MeshBuilder.CreateTorus("torus", {thickness: 0.5}, scene);            torus.position= new BABYLON.Vector3(3,1,0);            torus.material = mattorus;            var matoct = new BABYLON.StandardMaterial("matoct", scene);            matoct.alpha = 1.0;                        var texture = new BABYLON.Texture("images/d1.png", scene);            matoct.diffuseTexture = texture;            var octahedron = BABYLON.MeshBuilder.CreatePolyhedron("oct", {type: 1, size: 3}, scene);                        octahedron.position= new BABYLON.Vector3(-2,5,0);            octahedron.material = matoct;            var matico = new BABYLON.StandardMaterial("matico", scene);            matico.alpha = 1.0;                        var texture = new BABYLON.Texture("images/diamond.jpg", scene);            matico.diffuseTexture = texture;                        var icosphere = BABYLON.MeshBuilder.CreateIcoSphere("ico", {radius: 5, radiusY: 3, subdivisions: 2}, scene);            icosphere.position= new BABYLON.Vector3(-13,3,0);            icosphere.material = matico;                        //add screenshot button            var ssButton = document.getElementById("takescreenshot");            if (ssButton == null) {               ssButton = document.createElement("input");               document.body.appendChild(ssButton);            }                        ssButton.id = "takescreenshot";            ssButton.type = "button";            ssButton.style.position = "fixed";            ssButton.style.right = "0px";            ssButton.style.top = "100px";            ssButton.value = "create screenshot";                        ssButton.onclick = function () {               BABYLON.Tools.CreateScreenshot(engine, camera, { width: 1024, height: 300 },               function (data) {                  var img = document.createElement("img");                  img.src = data;                  document.body.appendChild(img);               });            };            return scene;         }         var scene = createScene();         engine.runRenderLoop(function() {            scene.render();         });