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

效果預覽

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

模型材質資源

在 Creator 3D 中，一個 3D 物體主要由 ModelComponent 組件進行渲染，其中包含兩大部分：

1. Mesh：物體的形狀，它是一組3維座標上的點集
2. Material：物體的表現，材質資源以及材質所使用的紋理貼圖

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

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

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

設置好後你就能夠看到 Cube 上的像石頭同樣的材質表現了。

使用腳本修改材質紋理

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

注意 3D 物體上的貼圖不是Cocos Creator中的 SpriteFrame，而是 Texture2D 類型，下面是 Texture一、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與紋理對象，看下圖：

用material.setProperty也是同理，若是你是使用的標準Effect，也是用一樣的方法：

只須要將材質屬性中的屬性名，首字母小寫就能夠了！

小結

本篇介紹了使用 material.setProperty 修改材質紋理。最後咱們思考一個問題，若是有兩個 3D 物理，使用了同一個材質資源，在編輯器中修改材質貼圖你會發現兩個物理都會同時發生變化，看下圖：

若是咱們是用代碼，在運行時修改了任意一個 3D 物體上的材質屬性，另外一個 3D 物體的材質會變嗎？Shawn作了一下測試，但並無變，看下面的效果：

以前 Shawn 在想，若是運行時也會變的話，好比生成一桌子的麻將牌，豈不是要爲每一紋理建立一個材質資源，如今好像擔憂多了！

最後感謝你的閱讀，原創不易，求個贊！願咱們在前進的道路上砥礪前行，共同成長！