火星网校
玩游戏就要把3D模型搬上2D舞台 | 火星时代教育
发布时间：2024-05-16 12:35:52 浏览量：218次
引言
玩游戏就要把3D模型搬上2D舞台
在游戏开发中常常需要在UI界面上展示一个3D模型，比如时装界面里角色换装展示、Boss挑战界面里选择Boss展示等等。
本文将介绍一下在Cocos游戏开发中实现和平精英中3D模型渲染到2D界面的模型展示效果。
火星时代教育是一家专注数字艺术教育的培训机构，已有30年历史。我们开设包括游戏设计、动画培训、AI绘画、影视后期制作等多门课程。想了解更多？点击咨询
本期知识点
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.资源准备
创建一个新工程，按照指定结构布局UI界面。确保你已准备好所有资源。
将商城上的角色预制体嵌入到你的项目中，准备好各个元素。
3.编写代码
根据需求编写代码，确保ModelRtt组件可以在ModelSprite上实现。设定各项属性，包括模型路径、偏移、视角高度等。
最后，加载模型并渲染到相应的Sprite上。
export class ModelRtt extends Component { @property(CCString) modelUrl: string = ""; @property(CCFloat) modelOffsetY: number = 0; @property(CCFloat) orthoHeight: number = 0; modelSprite: Sprite = null;}完成以上步骤后，3D模型渲染到2D界面的效果即可实现。
- 创建大小为512、1024或2048的RenderTexture。
const size = this.node.getComponent(UITransform).contentSize;const modelRtt = new RenderTexture();modelRtt.reset({ width: size.width, height: size.height});- 创建模型，并设置偏移。
const newNode = new Node();newNode.parent = find("/");const modelNode: Node = instantiate(prefab);modelNode.parent = newNode;modelNode.setPosition(new Vec3(0, this.modelOffsetY, 0));- 实现拖拽事件监听和模型转动效果。
let flag = false;this.node.on(NodeEventType.TOUCH_START, () => { flag = true; }, this);this.node.on(NodeEventType.TOUCH_END, () => { flag = true; }, this);this.node.on(NodeEventType.TOUCH_MOVE, (event: EventTouch) => { if (flag) { modelNode.eulerAngles = new Vec3(0, modelNode.eulerAngles.y + event.getDeltaX(), 0); }}, this);- 获取创建的相机并设置相关参数。（动态添加的相机暂不做研究）
// const camera = new Node("Camera").addComponent(Camera); //todo：动态添加的Camera模型不会动 const camera = this.node.getComponentInChildren(Camera);camera.clearFlags = Camera.ClearFlag.SOLID_COLOR; //设置缓冲清楚标志位camera.projection = renderer.scene.CameraProjection.ORTHO; //设置相机投影类型camera.orthoHeight = this.orthoHeight; //设置正交视角高度camera.clearColor = new Color(0, 0, 0, 0); //设置透明camera.targetTexture = modelRtt; //设置目标RenderTexturecamera.node.parent = newNode;camera.node.position = new Vec3(0, 0, 10);- 设置目标精灵的精灵帧。
const spriteFrame = new SpriteFrame();spriteFrame.texture = modelRtt;spriteFrame.flipUVY = true;this.modelSprite.spriteFrame = spriteFrame;4.效果演示
【100个Cocos实例】实现和平精英中3D模型渲染到2D界面的模型展示效果
原文链接：
https://juejin.cn/post/7311603519601147945
热门课程推荐
热门资讯
-
探讨游戏引擎的文章，介绍了10款游戏引擎及其代表作品，涵盖了RAGE Engine、Naughty Dog Game Engine、The Dead Engine、Cry Engine、Avalanche Engine、Anvil Engine、IW Engine、Frostbite Engine、Creation引擎、Unreal Engine等引擎。借此分析引出了游戏设计领域和数字艺术教育的重要性，欢迎点击咨询报名。
-
2. 手机游戏如何开发(如何制作传奇手游，都需要准备些什么？)
如何制作传奇手游，都需要准备些什么？提到传奇手游相信大家都不陌生，他是许多80、90后的回忆；从起初的端游到现在的手游，说明时代在进步游戏在更新，更趋于方便化移动化。而如果我们想要制作一款传奇手游的
-
3. B站视频剪辑软件「必剪」：免费、炫酷特效，小白必备工具
B站视频剪辑软件「必剪」，完全免费、一键制作炫酷特效，适合新手小白。快来试试！
-
游戏中玩家将面临武侠人生的挣扎抉择,战或降?杀或放?每个抉定都将触发更多爱恨纠葛的精彩奇遇。《天命奇御》具有多线剧情多结局,不限主线发展,高自由...
-
5. Bigtime加密游戏经济体系揭秘，不同玩家角色的经济活动
Bigtime加密游戏经济模型分析，探讨游戏经济特点，帮助玩家更全面了解这款GameFi产品。
-
6. 3D动画软件你知道几个?3ds Max、Blender、Maya、Houdini大比拼
当提到3D动画软件或动画工具时,指的是数字内容创建工具。它是用于造型、建模以及绘制3D美术动画的软件程序。但是,在3D动画软件中还包含了其他类型的...
-
7. 3D动漫建模全过程，不是一般人能学的会的，会的多不是人?
步骤01:面部,颈部,身体在一起这次我不准备设计图片,我从雕刻进入。这一次,它将是一种纯粹关注建模而非整体绘画的形式。像往常一样,我从Sphere创建它...
-
8. 如何自己开发一款游戏(游戏开发入门必看：五大独立游戏开发技巧)
游戏开发入门必看：五大独立游戏开发技巧无论您是刚刚起步开发自己的第一款游戏，还是已经制作了几款游戏，本篇文章中的5大独立游戏开发技巧都可以帮助您更好地设计下一款游戏。无论你对游戏有着什么样的概念，都
-
三昧动漫对于著名ARPG游戏《巫师》系列，最近CD Projekt 的高层回应并不会推出《巫师4》。因为《巫师》系列在策划的时候一直定位在“三部曲”的故事框架，所以在游戏的出品上不可能出现《巫师4》
-
想让你的3D打印模型更坚固？不妨尝试一下Cura参数设置和设计技巧，让你轻松掌握！
