3D模型渲染到2D UI上

指尖上的生活2023-12-17 18:52

前言

在3D游戏开发中，有时需要将3D角色模型渲染到2D UI界面上，比如王者的角色选择界面。

本文以Cocos Creator 3.8版本来实现3D模型和UI渲染在同一界面。

思路

引擎默认使用 前向渲染管线，前向渲染管线的渲染流程是先渲染3D后渲染UI，因此UI总是覆盖在3D内容上面，要实现3D内容和2D内容一起渲染有两种方式：

Render Texture: 不将内容直接渲染到屏幕上的情况下进行渲染, 这种方式被称为"离屏渲染"（Off-screen Rendering）。
UIMeshR*enderer: 将 3D 模型从 3D 渲染管线转换到 2D 渲染管线的带有转换功能的渲染组件。

使用这两种方式都可以达成目标，本文使用Render Texture来实现。

执行

在 资源管理器 中点击左上方的 + 按钮，然后选择 渲染纹理，即可创建渲染纹理资源：

在相机组件中，给相机的 TargetTexture 属性赋予 RenderTexture 可以将相机照射的结果绘制到 RenderTexture 上。

将3D角色拖入到编辑器中，调整相机，让3D角色处于相机的视野范围之内

设置好Canvas节点下的Sprite的SpriteFrame为刚创建的Render Texture

这样就可以在2D UI渲染3D模型：

接着通过拖动事件来让角色旋转起来

代码：

typescript 复制代码

 start() {
        this.bg.on(NodeEventType.TOUCH_MOVE, (event: EventTouch) => {
                this.girl.eulerAngles = new Vec3(0, this.girl.eulerAngles.y + event.getDeltaX(), 0);
        }, this);
}

效果：