【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 上。

实现步骤

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

核心代码

refreshRenderTexture(): void {let renderTex = new RenderTexture();// 处理锯齿  方案：放大RTconst 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;}

稍微再优化一下，在 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();// 处理锯齿  方案：放大RTconst 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 哟，谢谢哟]

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

【CocosCreator 3.x】使用 UIMeshRenderer 组件实现 3D 渲染在 UI 上 =＞攻略
前言在游戏开发时,我们为了让角色更加真实立体,我们会使用 3D 模型代替 2D 的龙骨或者 Spine 动画. 比如我们的选择角色的界面,如果我们的角色是 3D 模型,界面的 UI (例如名字.背 ...
电子元器件封装（3D或2D）下载攻略
提示:!!!不要过度依赖,用在项目的时候以实际器件的DATASHEET为主,注意检查网上资料是否有错!!! 方法一:嘉立创--立创商城(2D) 搜索你想要的元器件点击数据手册点击立即使用,选择导出 ...
不用去电影院 3D电影格式/播放全攻略
在立体3D应用中,3D电影是目前最为主流.普及程度最高的娱乐方式.立体3D做为一种正在发展中的技术,尚未统一的标准常常使得用户感到迷惑,究竟哪种格式更好?对设备的要求是什么?本文将针对3D电影的格式. ...
WPF/Silverlight深度解决方案：(七)HLSL自定义渲染特效之完美攻略(中)
通过上一节的解说,大家是否已经对HLSL有了较深刻的认识和理解,HLSL的渲染不仅仅局限于静态处理,通过时时更新HLSL代码的各全局变量值同样可以实现动画形式的渲染,非常Cool对吧~.那么本节我将向 ...
HLSL自定义渲染特效之完美攻略(中)
通过上一节的解说,大家是否已经对HLSL有了较深刻的认识和理解,HLSL的渲染不仅仅局限于静态处理,通过时时更新HLSL代码的各全局变量值同样可以实现动画形式的渲染,非常Cool对吧~.那么本节我将向 ...
flutter 卡顿_Flutter渲染性能优化全攻略（解决应用卡顿）
大规模应用开发过程中,性能优化是重中之重,其中包括了包体积,UI 渲染.交互等多个方面. 在之前的文章中,我通过 Flutter 应用的混淆为入口,探讨了应用包体积优化的实践方案,本文,我把话题再次转 ...
3D 渲染和建模的最佳显卡推荐，值得一看
购买用于 3D 渲染和建模的显卡时应考虑的事项为创意工作购买显卡时,最重要的是了解最重要的规格,认清自己的技能水平和工作范围,因此不要多付钱. 我们的指南将让您更好地了解要查找的内容以及如何浏览市场 ...
【Unity】3D模型或粒子渲染在UI上层
方法有很多,我只介绍一种我认为最简单有效的方法,用非常取巧的手段,使用RenderTexture + Camera 在ScrollView里展示3D模型. 效果: 1.首先创建一个RenderText ...
Unity3D RenderTexture实现3D立绘
NGUI有个Demo,实现了这个功能,UI界面显示一个3D模型,但是这种方法并不具备适用性. 现在我们的项目中还没用到这种超前的3D界面设计,我们常用的UI都是由大堆的UI通过层级堆叠出来的. 那按照 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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