國慶，中秋收假了，菜鳥在這里給大家道聲祝福：

同時可能不少人都已經知道，就在放假前，「Creator3D 1.2.0 正式版」 已經發布。菜鳥后邊的自學demo也將全部用1.2.0，大家在打開demo時一定要注意版本奧。

前言

今天菜鳥分享一個小的技術點：「3D模型應該怎樣顯示到2D的ui層上邊」。最近逛論壇經常看見有關于這個問題的帖子，正好菜鳥后邊也要用到，那就提前研究一下。下邊將實現的兩種方式簡單說明一下。

效果

咱們還是先來看看效果：

1.UIMeshRenderer 組件實現效果

剛接觸1.2.0版本的人可能對這個比較陌生，在之前的版本他有另一個名字「UIModel」，在1.2.0版本改名成了「UIMeshRenderer」

2.RenderTexture 實現效果

正文

1.UIMeshRenderer實現方式

首先建議大家看一下「UIMeshRenderer組件」的官方文檔，這種方式的實現基本上不涉及代碼，但是有幾個特別需要注意的問題，我大概說下

• 1.菜鳥習慣將3d節點與2d的ui節點分開放，2d的ui節點默認在Canvas下。3d的節點會創建一個父節點放置，也就是統一放置到ModelContro下，類似于這樣：

• 2.添加MeshRenderer組件到3d模型節點，
  • 官方文檔是這樣說的

添加方式是在層級管理器中選中帶有或繼承自 MeshRenderer 組件的節點，
然后點擊 屬性檢查器 下方的 添加組件 按鈕，選擇 UI/MeshRenderer即可

• 3.添加了MeshRenderer組件后大家預覽可能發現并沒有效果
  • 接下來就是這種方式的需要注意的重點了：
  • 「1：綁定了MeshRenderer組件的3d節點必須放在Canvas下，也就是2DUI層」
  • 「2：3d節點的大小，3d節點添加了MeshRenderer組件，并且放置到Canvas下，那么他的大小將不會按照3d節點在攝像機下的大小顯示，而是按照3d節點相對Cavase的大小來顯示，通常模型的大小需要縮放到在UI層下的實際預覽大小」
  • 「3：材質，當大小和層級調整好以后你會發現模型是顯示出來了，但是是黑的，如圖：」

• • 「你已經到了最后一步了，大家的默認effect 應該是builtin-standard吧，只需要將其改為builtin-unlit就可以了」

2.RenderTexture 實現方式

這種方式主要是通過代碼來實現的，「把 3D 相機照射的內容繪制到 UI 的精靈幀上」。 在菜鳥出demo的時候是國慶前，文檔和API都還沒有更新，還是之前版本的。1.2.0版本對部分參數進行了調整。現在好像API調整了，文檔還是之前的，但是沒啥影響。 下邊咱們說一下重點：

• 1.原理就是 把 3D 相機照射的內容繪制到 UI 的精靈幀上
• 2.那么主要就是3d攝像機，需要創建一個攝像機，然后將你所需要顯示在ui上的3d節點移動到攝像機的視覺范圍內
• 3.創建Sprite用來顯示攝像機渲染出來的顯示
• 4.代碼實現

const _colorAttachment = new GFXColorAttachment(); const _depthStencilAttachment = new GFXDepthStencilAttachment(); let renderTex = new RenderTexture(); renderTex.reset({width: 500,height: 700,passInfo: {colorAttachments: [_colorAttachment],depthStencilAttachment: _depthStencilAttachment,} });let spriteframe: SpriteFrame = this.camerSprite.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; this.camerSprite.spriteFrame = sp;//對比和之前版本的代碼，兩點調整： //- 1.SpriteFrame 屬性調整 //- 2.renderTex.reset 參數的調整

• 5.在實現過程中可能會出現，本來只想顯示指定的模型，但是會將攝像機的緩沖顏色也顯示出來，如圖：

這里菜鳥是將攝像機的ClearColor的透明度直接調為0，

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的android显示3d模型_Creator3D:太厉害了！3D模型原来可以这样显示在2DUI上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。