【100个Cocos实例】实现和平精英中3D模型渲染到2D界面的模型展示效果

引言

3D模型渲染到2D界面的模型展示效果

在游戏开发中常常需要在UI界面上显示一个3D模型，例如时装界面里人物换装展示、Boss挑战界面里选择Boss展示等等。

本文将介绍一下在Cocos游戏开发中实现和平精英中3D模型渲染到2D界面的模型展示效果。

本文源工程在文末获取，小伙伴们自行前往。

本期知识点

1.RenderTexture

渲染贴图是 Camera 或 Canvas 组件的渲染目标对象，渲染管线会使用它的 RenderWindow 作为渲染的目标窗口。

我们可以把相机画面渲染到它上面，然后将精灵Sprite的贴图资源设置成它。

2.Camera

渲染场景中的相机对象，由项目层的 Camera 管理。

我们可以通过它的targetTexture指定此相机的渲染输出目标贴图，默认为空，直接渲染到屏幕。

3.SpriteFrame

精灵帧资源。

我们通过SpriteFrame的texture设置贴图对象资源，可以是 TextureBase 类型。

话不多说，一起来做个实例。

3D模型渲染到2D界面实例

接下来我们一步一步来实现和平精英中3D模型渲染到2D界面的模型展示效果。

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

创建一个新工程，笔者用3.8.2体验，大家用3.8.1打开项目即可。

按照下面结构拼一下UI。cocos是背景图，ModelSprite是渲染到的目标精灵，Camera是拍模型的摄像机。

然后把商城上的鸡带走并做成预制体借用一下。

3.编写代码

新建一个ModelRtt组件，并且拖到ModelSprite上。其中包含几个属性。

• modelUrl,模型的路径，直接通过resources.load加载。
• modelOffsetY,模型的偏移，用于调整模型显示的位置。
• orthoHeight,相机的正交视角高度，用于调整模型的大小。
• modelSprite,目标精灵。

export class ModelRtt extends Component {
   
    @property(CCString)
    modelUrl: string = "";
    @property(CCFloat)
    modelOffsetY: number =</