如何在 Creator3D 中切換模型貼圖，超級簡單

原創

2019-10-26 11:57

效果預覽

前兩天有夥伴在 QQ 上詢問，如何在 Creator 3D 中切換模型貼圖。Shawn 之前也沒嘗試過，不過根據之前 Cocos Creator 的經驗以及這幾天對 Creator 3D 的學習，簡單嘗試了一下，方法可行，在此將它分享給大家。

模型材質資源

在 Creator 3D 中，一個 3D 物體主要由 ModelComponent 組件渲染，其中包含兩大部分：Mesh 和 Material，而模型的紋理就在材質屬性上進行控制。

在 Creator3D 編輯中，我們可通過圖形化拖動的方式修改材質貼圖，如下圖：

上圖中，先使用引擎內置的無光照的 Effect，它的選項看起來沒那麼多，可以減少畏懼感，我們將一 ground 的圖片拖動到 test.mtl 材質資源上。

然後將 test 材質拖動到 Cube 物體的 ModelComponent 組件上：

設置好後你就可以看到 Cube 上的像石頭一樣的材質表現了。

使用腳本修改材質紋理

我這裏創建了一個 test.ts 的腳本文件，用於修改材質上的紋理資源，先看下組件屬性：

注意 3D 物體上的貼圖不是Cocos Creator中的 SpriteFrame，而是 Texture2D 類型，下面是 Texture1、Texture2屬性定義：

@ccclass("test")
export class test extends Component {

    @property({type: Texture2D })
    texture1: Texture2D = null;

    @property(Texture2D)
    texture2: Texture2D = null;

}

複雜數據類型需要給 @property 輸入一個 type 參數，同時下面一行，需要給變量設置爲null，不然在屬性面板上不顯示。

紋理資源已經設置好了，如何通過代碼訪問或修改材質呢？經過Shawn的一陣摸索，發現還是非常簡單的，使用材質對像的getProperty、setProperty就可以搞定：

swithcTextue() {
    //獲取ModelComponent組件
    let modelComponent = this.getComponent(ModelComponent);
    //獲取0號材質
    let material = modelComponent.materials[0];
    //獲取紋理
    let texture = material.getProperty('mainTexture');
    //設置紋理
    material.setProperty('mainTexture', texture === this.texture1 ? this.texture2 : this.texture1);
}

material.setProperty的參數是Key和Value，分別對應材質面板上的Key與紋理對象，看下圖：