【CocosCreator 3.x】使用 UIMeshRenderer 组件实现 3D 渲染在 UI 上 =＞攻略-Toy模板网

这篇具有很好参考价值的文章主要介绍了【CocosCreator 3.x】使用 UIMeshRenderer 组件实现 3D 渲染在 UI 上 =＞攻略。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

前言

在游戏开发时，我们为了让角色更加真实立体，我们会使用 3D 模型代替 2D 的龙骨或者 Spine 动画。
比如我们的选择角色的界面，如果我们的角色是 3D 模型，界面的 UI （例如名字、背景图等）都是 2D 的，那么我们怎么实现 3D 模型和界面的 UI 一起渲染在同一个界面呢？换句话说，我们怎么实现把 3D 模型渲染在 UI 上呢？

思路

使用 Creator 引擎提供的 UIMeshRenderer 组件。

介绍

引擎的渲染流程（渲染管线）：

引擎在渲染 3D 和渲染 UI 是分开的，并不是同时渲染的。
按照引擎默认的渲染管线（前向 forward 渲染管线）的流程是，引擎会先渲染 3D 后渲染 UI。
结合 Camera 的特性，越早渲染的会优先绘制。所以最终的表现是，如果 3D 和 UI 放在一起渲染的话，那么 UI 会盖在 3D 的上面（3D 模型被 UI 盖住了看不到了，或者显示不全）

这是由于 3D 和 UI 放在一起，会导致一些渲染的问题，所以如果我们能把 3D 模型的数据提交延迟到和 UI 一起提交，那么我们就可以实现 UI 和 3D 模型一起渲染的效果。所以我们需要借助今天的主角“UIMeshRenderer”。

Creator 官方文档的介绍是，UIMeshRenderer 是一个将 3D 模型从 3D 渲染管线转换到 2D 渲染管线的带有转换功能的渲染组件。该组件支持 3D 模型和粒子在 UI 上的显示，没有这个组件，即使模型和粒子节点在 UI 里也不会被渲染。
【CocosCreator 3.x】使用 UIMeshRenderer 组件实现 3D 渲染在 UI 上 =＞攻略
这是来自 Creator 3.5.2 版本的引擎代码 ui-meshrenderer.ts 中部分。

实现步骤

以 Creator 3.5.2 版本为例，我们新建一个场景，把 3D 模型和 UI 素材导入到项目下。
将 UI 和 3D 模型拖到层级管理器上。3D 模型也放置在 Canvas 路径下。player 为我们的 3D 模型。
在 player 节点上的 MeshRenderer 组件下，挂载我们的 UIMeshRenderer 组件。（挂载 UIMeshRenderer 组件的方式，我们可以通过属性编辑器上的添加组件，然后选择 UIMeshRenderer 即可）

备注：
需要为每个 MeshRenderer 组件挂载 UIMeshRenderer 组件；
当拖拽 3D 模型或者 UI 到层级管理器上运行时不显示时，检查一下节点的 Layer 选项。默认的 Layer 可能为 DEFAULT，而相机的 Visibility 选项在 Canvas 下默认是 UI_2D 和 UI_3D 是勾选的，可能会导致运行时不被渲染（剔除）。修改的方式：一种是修改节点的Layer 为相机 Camera 的 Visibility 选项；一种是将相机的 Visibility 选项勾选 DEFAULT 选项。
节点的 layer 是和相机的 Visibility 选项配合使用，共同解决哪些物体需要被渲染，那么物体不被渲染。

介绍到这里，实现 3D 渲染到 UI 上的方法是不是很简单。

思考题
这边介绍的是 3D 模型，那么如果是个骨骼动画呢？怎么使用 UIMeshRenderer 组件呢？

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

更多参考可以访问
Cocos Creator 3.5.x demo 版本
https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.5.x/demo/2d/Creator3.5.0_UIMeshRenderer
Cocos Creator 3.4.x demo 版本
https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.4.x/demo/Creator3.4.2_UIMeshRenderer
Cocos Creator 3.0.x demo 版本
https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.0.x/demo/Creator3.0.0_UIMeshRenderer
[如果喜欢，可以点个 gitee 关注和 star 哟，谢谢哟]文章来源地址https://www.toymoban.com/news/detail-451820.html

到了这里，关于【CocosCreator 3.x】使用 UIMeshRenderer 组件实现 3D 渲染在 UI 上 =＞攻略的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！