チュートリアル - 3Dモデルコンフィギュレーター 5/6 – PlayCanvas

指定のマテリアルの色を変更する

指定のマテリアルの色を変更できる様にします。

マテリアルの色を指定するために、カラーコードを選択できる様にする必要があります。
※カラーコード： #ff0000、rgb(255,255,255)など

先と同じ様にボタンを用意。
他のものと被らない様に右下にPresetで「Bottom Right Anchor & Pivot」を設定。
Entityの名前やボタンの中のTextも合わせて変えておこう。

マテリアルの色を変えるスクリプト作成

指定のマテリアルの色を変更するスクリプトを作成します。

colorToggle.jsを作成。


var ColorToggle = pc.createScript('colorToggle');

ColorToggle.attributes.add("mainCamera", {type: "entity" });
ColorToggle.attributes.add("targetMaterial", {type: "asset", assetType: "material"});

ColorToggle.prototype.initialize = function() {
     let newColor = this.targetMaterial._resources[0].diffuse;
     let colorInput = document.createElement("input");
     colorInput.type = "color";
     colorInput.value = newColor.toString();
     colorInput.style.position = "fixed";
     colorInput.style.top = ( this.app.graphicsDevice.canvas.clientHeight - this.mainCamera.camera.worldToScreen(this.entity.getPosition()).y) + "px";
     colorInput.style.left = ( this.app.graphicsDevice.canvas.clientWidth - this.mainCamera.camera.worldToScreen(this.entity.getPosition()).x) + "px";
     colorInput.style.transform = "translate(-50%, -50%)";
     colorInput.style.pointerEvents = "none";
     colorInput.style.opacity = 0;
     document.body.appendChild(colorInput);

     this.entity.element.on("click", () => {
         let event = new MouseEvent( "click" ) ;
         window.setTimeout(function() {
             colorInput.dispatchEvent(event);
         }.bind(this), 90);
     });

     colorInput.addEventListener("change", () => {
         let changeColor = new pc.Color().fromString(colorInput.value);
         this.targetMaterial._resources[0].diffuse.set(changeColor.r, changeColor.g, changeColor.b, changeColor.a);
         this.targetMaterial._resources[0].update();
     });
};

色を変更するためのUIにはHTMLのブラウザに依存したカラーピッカーを使用します。
input要素のtype="color"を使用します。
ここで取得したカラーコードをマテリアルのdiffuseに適用して色の変更を実現しています。

スクリプト属性にはmainCameraとtargetMaterial。
mainCameraは、主に使用しているカメラのEntityを設定。
targetMaterialには、色を変更したいマテリアルを選択します。
変更するマテリアルは、Clock_Arm_band のバンドというEntityに適用されているバンドブラウンです。