要捕获您当前正在使用的屏幕,使用打印屏幕按键无法以高分辨率拍摄屏幕截图. 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.
<!doctype html> <html> <head> <meta charset = "utf-8"> <title>BabylonJs - Basic Element-Creating Scene</title> <script src = "babylon.js"></script> <style> canvas {width: 100%; height: 100%;} </style> </head> <body> <canvas id = "renderCanvas"></canvas> <script type = "text/javascript"> 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(); }); </script> </body> </html>
在这个演示中,我们使用了图像 mat.jpg,rugby.jpg, cone.jpg,board.jpg,ring.jpg,d1.png,diamond.jpg .图像存储在本地的图像/文件夹中,也粘贴在下面以供参考.您可以下载任何您选择的图像并在演示链接中使用.