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

パーツを切り替える

アニメーションで作ったボタンを複製して用意する

アニメーションができたので、次はパーツを切り替えるボタンも用意したいと思います。

手順としてはアニメーションのボタン作成と同じです。
Presetは重なってしまわない様に「Top Right Anchor & Pivot」にしておきます。
名前もアニメーションと区別できる様に変えておきましょう。

切り替えるパーツごとに共通のタグを付与する

アニメーションはあらかじめEntityごとにセットしたものを呼び出しましたが、
切り替えは表示・非表示の切り替えで実現します。

Watch_bodyとWatch_body2といった様に、Enabledのチェックボックスでそれぞれ表示・非表示の設定されているEntityがあります。
今回はこの同じ名前のEntityたちに同じタグを付与します。ここでは watchBody としています。

ボタンのScriptを作成する

表示・非表示を切り替えるためのスクリプトを作成します。

このスクリプトはアニメーションと同じくButtonにAdd Scriptします。

displayToggle.js を作成。


var DisplayToggle = pc.createScript('displayToggle');

DisplayToggle.attributes.add("targetEntity", {type: "entity"});

DisplayToggle.prototype.initialize = function() {
　　this.entity.element.on("click", () => {
　　　　if(!this.targetEntity.enabled) {
　　　　　　let targetEntities = this.entity.root.findByTag(this.targetEntity.tags.list());
　　　　　　for(let i=0; i<targetEntities.length; i++) {
      　　　　　targetEntities[i].enabled = false;
　　　　　　}
　　　　　　this.targetEntity.enabled = true;
　　　　}
　　});
};

スクリプト属性で設定したEntityと同じタグのEntityを参照して、
該当するタグを持つEntityを非表示にします。
非表示にしたのちに、targetEntityのEntityを表示するという処理を実行します。

なので、切り替えるパーツごとにボタンを用意する必要があるので、Entityをもう一つ用意します。