激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

實現(xiàn)和平精英中3D模型渲染到2D界面的模型展示效果 - 火星時代教育

發(fā)布時間：2024-05-16 12:36:23 瀏覽量：177次

引言

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

在游戲開發(fā)中常常需要在UI界面上顯示一個3D模型，例如時裝界面里人物換裝展示、Boss挑戰(zhàn)界面里選擇Boss展示等等。

本文將介紹一下在Cocos游戲開發(fā)中實現(xiàn)"火星時代教育"中3D模型渲染到2D界面的模型展示效果。

本期知識點

1. RenderTexture

渲染貼圖是Camera或Canvas組件的渲染目標對象，渲染管線會使用它的RenderWindow作為渲染的目標窗口。

我們可以把相機畫面渲染到它上面，然后將精靈Sprite的貼圖資源設置成它。

2. Camera

渲染場景中的相機對象，由項目層的Camera管理。

我們可以通過它的targetTexture指定此相機的渲染輸出目標貼圖，默認為屏幕。

3. SpriteFrame

精靈幀資源。

我們通過SpriteFrame的texture設置貼圖對象資源，可以是TextureBase類型。

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

接下來我們來實現(xiàn)"火星時代教育"中3D模型渲染到2D界面的模型展示效果。

1. 環(huán)境

引擎版本：Cocos Creator 3.8.1

編程語言：TypeScript

2. 資源準備

創(chuàng)建一個新工程，筆者用3.8.2體驗，大家用3.8.1打開項目即可。

按照下面結(jié)構(gòu)拼一下UI。cocos是背景圖，ModelSprite是渲染到的目標精靈，Camera是拍模型的攝像機。

然后把商城上的雞帶走并做成預制體借用一下。

3. 編寫代碼

新建一個ModelRtt組件，并且拖到ModelSprite上。其中包含幾個屬性。

  • modelUrl, 模型的路徑，直接通過resources.load加載。
  • modelOffsetY, 模型的偏移，用于調(diào)整模型顯示的位置。
  • orthoHeight, 相機的正交視角高度，用于調(diào)整模型的大小。
  • modelSprite, 目標精靈。
export class ModelRtt extends Component {    @property(CCString)    modelUrl: string = "";    @property(CFloat)    modelOffsetY: number = 0;    @property(CFloat)    orthoHeight: number = 0;    modelSprite: Sprite = null;}

然后編寫loadPrefab方法通過resources.load加載模型。

loadPrefab() {    if (!this.modelUrl || !this.modelSprite) {        error('Please provide a valid prefab path and target sprite.');        return;    }    resources.load(this.modelUrl, Prefab, (err, prefab) => {        if (err) {            error('Failed to load the prefab:', err);            return;        }        this.createModel(prefab);    });}

最后通過以下步驟完成3D模型渲染到2D界面。

  • 創(chuàng)建RenderTexture，大小建議512、1024或者2048。
const size = this.node.getComponent(UITransform).contentSize;const modelRtt = new RenderTexture();modelRtt.reset({    width: size.width,    height: size.height});
  • 創(chuàng)建模型，并且設置偏移。
const newNode = new Node();newNode.parent = find("/");const modelNode: Node = instantiate(prefab);modelNode.parent = newNode;modelNode.setPosition(new Vec3(0, this.modelOffsetY, 0));
  • 進行拖拽事件的監(jiān)聽和實現(xiàn)模型轉(zhuǎn)動。
let flag = false;this.node.on(NodeEventType.TOUCH_START, (event: EventTouch) => { flag = true; }, this);this.node.on(NodeEventType.TOUCH_END, (event: EventTouch) => { 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);
  • 獲取我們在場景中創(chuàng)建的攝像機，并且設置一些相關參數(shù)。(這里面用動態(tài)添加的Camera不會動態(tài)渲染，暫時不做研究)。
// const camera = new Node("Camera").addComponent(Camera); //todo：動態(tài)添加的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實例】實現(xiàn)和平精英中3D模型渲染到2D界面的模型展示效果
原文鏈接：
https://juejin.cn/post/7311603519601147945

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定