3d模型资源怎末通过代码截图?

2d图片,通过 Laya.stage.drawToCanvas,可以截图,并通过 HtmlCanvas.toBase64保存成 base64数据保存。
 
3d模型资源,是如何截图 可以保存成 base64数据哪? 
 
已邀请:

Laya_XS

赞同来自:

将要绘制的3d场景绘制到相机,然后在创建一个离屏的画布,将相机渲染到纹理,然后在通过drawTexture的方法绘制,然后后面的操作你应该知道怎么处理了,参考代码:
public scene3D:Laya.Scene3D;
constructor() {
super();

//添加3D场景
this.scene3D = Laya.stage.addChild(new Laya.Scene3D()) as Laya.Scene3D;

//添加照相机
var camera: Laya.Camera = (this.scene3D.addChild(new Laya.Camera(0, 0.1, 100))) as Laya.Camera;
camera.transform.translate(new Laya.Vector3(0, 3, 3));
camera.transform.rotate(new Laya.Vector3(-30, 0, 0), true, false);

//添加方向光
var directionLight: Laya.DirectionLight = this.scene3D.addChild(new Laya.DirectionLight()) as Laya.DirectionLight;
directionLight.color = new Laya.Vector3(0.6, 0.6, 0.6);
directionLight.transform.worldMatrix.setForward(new Laya.Vector3(1, -1, 0));

//添加自定义模型
var box: Laya.MeshSprite3D = this.scene3D.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createBox(1, 1, 1))) as Laya.MeshSprite3D;
box.transform.rotate(new Laya.Vector3(0, 45, 0), false, false);
var material: Laya.BlinnPhongMaterial = new Laya.BlinnPhongMaterial();
Laya.Texture2D.load("res/layabox.png", Laya.Handler.create(null, function(tex:Laya.Texture2D) {
material.albedoTexture = tex;
}));
box.meshRenderer.material = material;
}

onAwake()
{
this.addBtn.on(Laya.Event.CLICK,this,this.onAddClick);
}

onAddClick()
{
//渲染到纹理的相机
var renderTargetCamera:Laya.Camera = this.scene3D.addChild(new Laya.Camera(0, 0.1, 100)) as Laya.Camera;
renderTargetCamera.transform.translate(new Laya.Vector3(0, 3, 3));
renderTargetCamera.transform.rotate(new Laya.Vector3(-30, 0, 0), true, false);
//选择渲染目标为纹理
renderTargetCamera.renderTarget = new Laya.RenderTexture(512, 512);
//渲染顺序
renderTargetCamera.renderingOrder = -1;
//截图绘制
var rtex = new Laya.Texture(renderTargetCamera.renderTarget, Laya.Texture.DEF_UV);
var sp = new Laya.Sprite();
Laya.stage.addChild(sp);
sp.graphics.drawTexture(rtex);
//后面就正常截图获取数据即可
}
代码是参考官方3d的demo示例改的,你可以参考下。

156*****215

赞同来自:

注意的是使用了该属性的摄像机将禁用渲染到屏幕的功能。此句话怎么理解?是否无法截图?
 

156*****215

赞同来自:

这按照代码是操作的过程

Laya_XS

赞同来自:

参考代码,提供了两个方案,你可以选择一种适合你的:
import { ui } from "./../ui/layaMaxUI";
/**
* 本示例采用非脚本的方式实现,而使用继承页面基类,实现页面逻辑。在IDE里面设置场景的Runtime属性即可和场景进行关联
* 相比脚本方式,继承式页面类,可以直接使用页面定义的属性(通过IDE内var属性定义),比如this.tipLbll,this.scoreLbl,具有代码提示效果
* 建议:如果是页面级的逻辑,需要频繁访问页面内多个元素,使用继承式写法,如果是独立小模块,功能单一,建议用脚本方式实现,比如子弹脚本。
*/
export default class GameUI extends ui.test.TestSceneUI {
public scene3D:Laya.Scene3D;
constructor() {
super();
//添加3D场景
this.scene3D = Laya.stage.addChild(new Laya.Scene3D()) as Laya.Scene3D;

//添加照相机
var camera: Laya.Camera = (this.scene3D.addChild(new Laya.Camera(0, 0.1, 100))) as Laya.Camera;
camera.transform.translate(new Laya.Vector3(0, 3, 3));
camera.transform.rotate(new Laya.Vector3(-30, 0, 0), true, false);

//添加方向光
var directionLight: Laya.DirectionLight = this.scene3D.addChild(new Laya.DirectionLight()) as Laya.DirectionLight;
directionLight.color = new Laya.Vector3(0.6, 0.6, 0.6);
directionLight.transform.worldMatrix.setForward(new Laya.Vector3(1, -1, 0));

//添加自定义模型
var box: Laya.MeshSprite3D = this.scene3D.addChild(new Laya.MeshSprite3D(Laya.PrimitiveMesh.createBox(1, 1, 1))) as Laya.MeshSprite3D;
box.transform.rotate(new Laya.Vector3(0, 45, 0), false, false);
var material: Laya.BlinnPhongMaterial = new Laya.BlinnPhongMaterial();
Laya.Texture2D.load("res/layabox.png", Laya.Handler.create(null, function(tex:Laya.Texture2D) {
material.albedoTexture = tex;
}));
box.meshRenderer.material = material;
}

onAwake()
{
this.addBtn.on(Laya.Event.CLICK,this,this.onAddClick);
this.add2Btn.on(Laya.Event.CLICK,this,this.onAddClick2);
}

onAddClick2()
{
var gl:WebGL2RenderingContext = (Laya.WebGLContext as any).mainContext;
var width:number = gl.drawingBufferWidth;
var height:number = gl.drawingBufferHeight;
var pixels:Uint8Array = new Uint8Array(width*height*4);
gl.readPixels(0,0,width,height,gl.RGBA,gl.UNSIGNED_BYTE,pixels);

//像素反转处理
var halfHeight:number = height/2|0;
var bytesPreRow:number = width * 4;
// make a temp buffer to hold one row
var temp:Uint8Array = new Uint8Array(width * 4);
for(var y=0;y<halfHeight;++y)
{
var topOffset = y * bytesPreRow;
var bottomOffset = (height - y - 1) * bytesPreRow;
// make copy of a row on the top half
temp.set(pixels.subarray(topOffset,topOffset + bytesPreRow));
// copy a row from the bottom half to the top
pixels.copyWithin(topOffset,bottomOffset,bottomOffset+bytesPreRow);
// copy the copy of the top half row to the bottom half
pixels.set(temp,bottomOffset);
}

var sp:Laya.Sprite = new Laya.Sprite();
var w: number = gl.drawingBufferWidth;
var h: number = gl.drawingBufferHeight;
var texture2d: Laya.Texture2D = new Laya.Texture2D(w,h,Laya.TextureFormat.R8G8B8A8,false,false);
texture2d.setPixels(pixels);
var tex: Laya.Texture = new Laya.Texture(texture2d);
var sp:Laya.Sprite = new Laya.Sprite();
sp.graphics.drawTexture(tex);
Laya.stage.addChild(sp);

var htmlCanvas:Laya.HTMLCanvas = Laya.Sprite.drawToCanvas(sp,sp['_renderType'],720,1280,0,0);
var newHtmlCanvas:Laya.HTMLCanvas = new Laya.HTMLCanvas(true);
newHtmlCanvas.size(720,1280);
newHtmlCanvas.context.drawImage(htmlCanvas.source,0,0,720,1280,0,0,720,1280);
var base64:string = newHtmlCanvas.source.toDataURL();
console.log(base64);
var img = new window.Image;
img.src = base64;
document.body.appendChild(img);
}

onAddClick()
{
//渲染到纹理的相机
var renderTargetCamera:Laya.Camera = this.scene3D.addChild(new Laya.Camera(0, 0.1, 100)) as Laya.Camera;
renderTargetCamera.transform.translate(new Laya.Vector3(0, 3, 3));
renderTargetCamera.transform.rotate(new Laya.Vector3(-30, 0, 0), true, false);

//渲染顺序
renderTargetCamera.renderingOrder = -1;
var renderTexture:any = new Laya.RenderTexture(512,512);
Laya.Camera.drawRenderTextureByScene(renderTargetCamera,this.scene3D,renderTexture);
//截图绘制
var rtex = new Laya.Texture(renderTargetCamera.renderTarget, Laya.Texture.DEF_UV);
var sp = new Laya.Sprite();
Laya.stage.addChild(sp);
sp.graphics.drawTexture(rtex);

//将截屏的区域生成图片
var htmlCanvas:Laya.HTMLCanvas = Laya.Sprite.drawToCanvas(sp,sp['_renderType'],720,1280,0,0);
var newHtmlCanvas:Laya.HTMLCanvas = new Laya.HTMLCanvas(true);
newHtmlCanvas.size(720,1280);
newHtmlCanvas.context.drawImage(htmlCanvas.source,0,0,720,1280,0,0,720,1280);
var base64:string = newHtmlCanvas.source.toDataURL();
console.log(base64);

var img = new window.Image;
img.src = base64;
document.body.appendChild(img);
}
}

备注采用第二种方式的时候需要在Main.ts主入口里初始化之前打开缓冲区处理:Config.preserveDrawingBuffer = true;附件是:示例demo

要回复问题请先

商务合作
商务合作