PlayCanvas

PlayCanvasのマテリアル・テクスチャをスクリプトで動的に変更する方法

いきさつ

スクリプトのバージョンがあがった後でどうやるのかわからなかったので投稿します。

こんな感じの状態でモデル表示し、
Screen Shot 2018-02-02 at 10.15.58.png

スペースキーを押すとマテリアル・テクスチャを変化させます。
Screen Shot 2018-02-02 at 10.16.05.png

スクリプト

  • マテリアル変更スクリプト
var Cube2 = pc.createScript('cube2');

Cube2.prototype.initialize = function() {
};

Cube2.prototype.update = function(dt) {
    if (this.app.keyboard.isPressed(pc.KEY_SPACE)) {
        var oldMaterial = this.entity.model.model.meshInstances[0].material;
        var newMaterial = oldMaterial.clone();
        newMaterial.diffuse.set(0, 0, 1);
        newMaterial.update();
        this.entity.model.model.meshInstances[0].material = newMaterial;
    }
};
  • テクスチャ変更スクリプト
var Cube = pc.createScript('cube');

Cube.attributes.add("textures",
  {
    type: "asset", 
    assetType: "texture", 
    array: true, 
    title: "Textures"
  }
);

Cube.prototype.initialize = function() {
};

Cube.prototype.update = function(dt) {
    if (this.app.keyboard.isPressed(pc.KEY_SPACE)) {
        var texture = this.textures[1].resource;        
        var mesh = this.entity.model.meshInstances[0];
        mesh.material.diffuseMap = texture;
        mesh.material.update();
    }
};

以上