[0]3d模型资源怎末通过代码截图？

2d图片，通过 Laya.stage.drawToCanvas,可以截图，并通过 HtmlCanvas.toBase64保存成 base64数据保存。
 
3d模型资源，是如何截图 可以保存成 base64数据哪？ 
 
2021-06-15 添加评论 免费帖
分享

没有找到相关结果

    已邀请:

    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示例改的，你可以参考下。
    2021-06-30 0 4
    分享

    156*****215

    赞同来自:

    注意的是使用了该属性的摄像机将禁用渲染到屏幕的功能。此句话怎么理解？是否无法截图？
     
    2021-07-22 0 0
    分享

    156*****215

    赞同来自:

    这按照代码是操作的过程
    2021-07-23 0 1
    分享

    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
    2021-07-23 0 1
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先

    公司简介 | 联系方式 | 人才招聘

    LayaAir引擎2D开发者3群（QQ群）：674885952    LayaAir引擎3D开发者8群（QQ群）：693598845

    Copyright © 2025

    商务合作
    商务合作