Cocos 3.0 使用UIMeshRenderer将3D模型或

参考
https://docs.cocos.com/creator/3.3/manual/zh/ui-system/components/editor/ui-model.html
Creator3D :太厉害了！3D模型原来可以这样显示在2DUI上
Creator 3.0怎么在2D场景里面跑3D人物？

一、官方文档

UIMeshRenderer 是一个将 3D 模型从 3D 渲染管线转换到 2D 渲染管线的带有转换功能的渲染组件。该组件支持 3D 模型和粒子在 UI 上的显示，没有这个组件，即使模型和粒子节点在 UI 里也不会被渲染。

该组件的添加方式是在 层级管理器 中选中带有或继承自 MeshRenderer 组件的节点，然后点击 属性检查器 下方的 添加组件 按钮，选择 UI-> UIMeshRenderer 即可。而粒子则是添加到粒子节点上。通常结构如下所示：

image.png

注意，如果结点是多层结构，则每一层带有或继承自 MeshRenderer 组件的节点，都要添加UIMeshRenderer。如果运行后看不到，需要检查canvas中Camera的visibility设置。

二、示例

1.UIMeshRenderer 方式

https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/UIMeshRendererDemo
绑定了MeshRenderer组件的3d节点必须放在Canvas下，也就是2DUI层

image.png

3d节点的大小，3d节点添加了MeshRenderer组件，并且放置到Canvas下，那么他的大小将不会按照3d节点在摄像机下的大小显示，而是按照3d节点相对Canvas的大小来显示，通常模型的大小需要缩放到在UI层下的实际预览大小

image.png

材质，当大小和层级调整好以后你会发现模型是显示出来了，但是是黑的，，大家的默认effect 应该是builtin-standard吧，只需要将其改为builtin-unlit就可以了

2.RenderTexture方式

https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/RenderTextureDemo

• 原理就是 把 3D 相机照射的内容绘制到 UI 的精灵帧上
• 那么主要就是3d摄像机，需要创建一个摄像机，然后将你所需要显示在ui上的3d节点移动到摄像机的视觉范围内
• 创建Sprite用来摄像机渲染出来的显示
• 在实现过程中可能会出现，本来只想显示指定的模型，但是会将摄像机的缓冲颜色也显示出来，这里菜鸟是将摄像机的ClearColor的透明度直接调为0，

@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 {
        this.isRotate = false;
        this.player.active = false;

        const _colorAttachment = new GFXColorAttachment();
        const _depthStencilAttachment = new GFXDepthStencilAttachment();

        let renderTex = new RenderTexture();
        renderTex.reset({
            width: 350,
            height: 610,
            passInfo: {
                colorAttachments: [_colorAttachment],
                depthStencilAttachment: _depthStencilAttachment,
                subPasses : []
            }
        });

        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;
        this.modelSprite.spriteFrame = sp;
    }
}

3.骨骼动画-RenderTexture方式

https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.0/2DDemo/RenderTextureDemoForSkeletalAnimation