【CocosCreator 3.x】使用 RenderTexture 实现 3D 渲染在 UI 上 =＞ 攻略

前言
目前在 Cocos Creator 实现 3D 渲染在 UI上的常用方法有2种，使用 UIMeshRenderer 组件 和 使用 RenderTexture 。

介绍
RenderTexture，意为渲染纹理，它是一张在 GPU 上的纹理资源。通常我们会把它设置到相机的 目标纹理 上，使相机照射的内容通过离屏的 frambuffer 绘制到该纹理上。一般可用于制作汽车后视镜，动态阴影等功能。

引用 Cocos Creator 官方对于渲染纹理 RenderTexture 的描述

实现原理
想必看到这里，大家应该猜到了。没错！
通过将摄像机的 目标纹理 设置为渲染纹理 RenderTexture，我们可以将相机照射范围内的内容绘制在 RenderTexture 上。我们再将 RenderTexture 作为 图片 Sprite 组件的显示内容，就可以实现将 3D 模型渲染在 UI 上。

实现步骤

1. 新建一个场景，导入模型资源和 UI 资源后，将 3D 模型从资源管理器上拖拽到层级管理器上。
2. 调整一下摄像机 Camera3D ，设置摄像机的 visibility 为 UI_3D，把 3D 模型的 layer 设置为 UI_3D。（备注：摄像机和节点的 Layer 配合使用，实现分组渲染。那么 Camera3D 相机只会渲染分组为 UI_3D 的节点，避免场景中其他节点的影响）
   
3. 在场景中新建一个 UI 的 Canvas 节点和 UI 相机。再创建一个带有图片 Sprite 组件的节点 modelSprite 将渲染纹理 RenderTexture 显示在 UI 界面上。
   （注意：在 Cocos Creator 3.x，你只需要从资源管理器中拖拽一张图片到层级管理器上，如果场景下没有 Canvas 节点，会默认创建一个 Canvas 节点和相机，并创建一个图片节点将图片挂载在 Canvas 上。）
4. 设置 Canvas 下节点的分组 layer 为 UI_2D，并将 Canvas 节点下的相机的 visibility 设置为 UI_2D。
   
5. 编写代码，在代码中动态创建渲染纹理并绑定到相机的目标纹理上。

核心代码

refreshRenderTexture(): void {
    
    
   let renderTex = new RenderTexture();
   
   // 处理锯齿  方案：放大RT
   const rt_scale = 3;
   renderTex.initialize({
    
    
       width: 350 * rt_scale,
       height: 610 * rt_scale
   });
   
   let spriteframe: SpriteFrame = this.modelSprite.spriteFrame!;
   let sp: SpriteFrame = new SpriteFrame();
   sp.reset({
    
    
       originalSize: spriteframe.originalSize,
       rect: spriteframe.rect,
       offset: spriteframe.offset,
       isRotate: spriteframe.rotated,
       borderTop: spriteframe.insetTop,
       borderLeft: spriteframe.insetLeft,
       borderBottom: spriteframe.insetBottom,
       borderRight: spriteframe.insetRight,
   });
   
   this.camera.targetTexture = renderTex;
   sp.texture = renderTex;
   sp.flipUVY = true;
   this.modelSprite.spriteFrame = sp;
   }

6. 稍微再优化一下，在 UI 上添加几个按钮（Button）来控制模型的显示、隐藏和旋转。
   完整代码

import {
    
     _decorator, Component, Node, Camera, Sprite, RenderTexture, SpriteFrame, Vec3 } from 'cc';
const {
    
     ccclass, property, type } = _decorator;

@ccclass('ReaderTexture')
export class ReaderTexture extends Component {
    
    
    @type(Sprite)
    modelSprite!: Sprite;
    @type(Camera)
    camera!: Camera ;
    @type(Node)
    player!: Node;

    private isRotate: boolean = false;

    start() {
    
    
        this.isRotate = false;
        this.player.active = false;
        this.refreshRenderTexture();
    }
    btnShowPlayerEvent(): void {
    
    
        this.player.active = true;
    }
    btnHidePlayerEvent(): void {
    
    
        this.isRotate = false;
        this.player.active = false;
    }
    btnRotatePlayerEvent(): void {
    
    
        this.isRotate = true;
    }
    update(deltaTime: number) {
    
    
        if (this.isRotate) {
    
    
            let eulerAngles: Vec3 = this.player.eulerAngles;
            eulerAngles.y++;
            this.player.eulerAngles = eulerAngles;
        }
    }

    refreshRenderTexture(): void {
    
    
        let renderTex = new RenderTexture();

        // 处理锯齿  方案：放大RT
        const rt_scale = 3;
        renderTex.initialize({
    
    
            width: 350 * rt_scale,
            height: 610 * rt_scale
        });

        let spriteframe: SpriteFrame = this.modelSprite.spriteFrame!;
        let sp: SpriteFrame = new SpriteFrame();
        sp.reset({
    
    
            originalSize: spriteframe.originalSize,
            rect: spriteframe.rect,
            offset: spriteframe.offset,
            isRotate: spriteframe.rotated,
            borderTop: spriteframe.insetTop,
            borderLeft: spriteframe.insetLeft,
            borderBottom: spriteframe.insetBottom,
            borderRight: spriteframe.insetRight,
        });

        this.camera.targetTexture = renderTex;
        sp.texture = renderTex;
        sp.flipUVY = true;
        this.modelSprite.spriteFrame = sp;
    }
}

介绍到这里，使用 RenderTexture 实现 3D 渲染到 UI 上的攻略就完成了，是不是很简单呢？

[关注我，了解更多 Cocos Creator 用法]

更多参考可以访问
Cocos Creator 3.5.x demo 版本
https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.5.x/demo/2d/Creator3.5.0_RenderTexture
Cocos Creator 3.4.x demo 版本
https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.4.x/demo/Creator3.4.2_RenderTexture
Cocos Creator 3.0.x demo 版本
https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.x/demo/Creator3.0.0_RenderTexture
[如果喜欢，可以点个 gitee 关注和 star 哟，谢谢哟]