本チュートリアルの動画を YouTube から試聴しながらの学習をお奨めしております。

「 3D モデルコンフィギュレーター」のチュートリアルへようこそ！

概要

このチュートリアルでは、PlayCanvas を用いて、3D 空間上の時計パーツのカスタマイズを可能にするコンフィギュレーターコンテンツを作成します。PlayCanvas で構成されるコンフィギュレーターの基本構造を学習し、その知識を応用して、様々な製品のコンフィギュレーターコンテンツを作成できるようにしましょう。

完成したコンフィギュレーターは以下のものです。

Chapter01 - Projectをフォークする

チュートリアルで使用するプロジェクトはこちら

https://playcanvas.com/project/1011719/overview/tutorialconfiguratorfork

これをフォークして進めていきます。

Chapter02 - アニメーションを設定する

Anim State Graph について

PlayCanvas では、アニメーションの再生管理をノードベースで行うことができる Anim State Graph という機能があります。この機能を利用することで、簡単に複数のアニメーションを切り替えることができます。

詳しくはこちら参照

各パーツの Entity にアニメーションを設定する

Assets の /Configurator/3Dmodel/~ に各パーツごとのディレクトリがあります。
それぞれ 3D モデルのデータやマテリアルなどがあります。

その中の Anim State Graph のデータを使用します。
これが今回使うアニメーションのデータです。

Anim Component の設定

HIERARCHYから Clock_Arm_band を選択します。

ADD COMPONENT から Animation / Anim を選択します。

Clock_Arm_band2にも同様にADD COMPONENT から Animation / Anim を選択します。

Root Bone には、設定しているこの Entity 自身を登録します。
State Graph に先ほどの Anim State Graph のデータを登録します。
すると、下に Layer:Base といった項目が表示されます。

Layer:Base の Initial State は初期状態のことで、これにもアニメーションを入れます。
あらかじめ用意していたアニメーションのデータ（Scene.glb）があるのでこれを入れます。

Launch で確認すると、アニメーションがループして動いているのが確認できます。

少し速度が速いので、各 Anim Component の Speed を 1 から 0.1 に変更して調整します。

アニメーションを制御するための準備をする

現状は初期状態でアニメーションがループする状態になっています。
これを何かアクションが起きてから動かす、ための処理を追加していきます。

Anim State Graph の編集画面(ダブルクリックで専用エディターが開きます)から、PARAMETERS に「startAnimation」というNameのパラメータを作成します。
これは Script からアニメーションをアクションさせたい時に使用するパラメータを作成ができます。

今回は、アニメーションが On/Off になったことがわかれば良いので、Type は「Boolean」に設定します。

次に新しい State を作成します。
グラフの編集画面で右クリックから「Add new state」で新しいStateを作成できます。

作成したら Name を animation にします。

次は State から State へ移るための Transition を設定します。
State を右クリックから「Add transition」で設定。

これを Initial State と animation に相互に設定します。

矢印の Transition をクリックすると右に TRANSITION の設定が表示されます。

Transition の設定ができ、Duration や Offset などを設定できます。

Durationは 0.2

Conditionsは「New Conditions」で新しく作成します。
これは設定した Parameter のアクションを受け取った際にトランジションする、
といった処理を実行してくれます。

ここには先ほど作った、startAnimation を設定します。
startAnimation は Boolean で判定するので、
startAnimation が True の時はアニメーションするため、チェックボックスはTrueにします。

逆に、アニメーションから初期状態に戻る場合の Transition では
同様の設定内容にして、Condition の startAnimation を False にしておきます。

また State の設定に戻ります。
Initial State は初期状態でアニメーションはさせないので、speed を 0 に設定。
あとループする必要もないので、Loop のチェックボックスを外します。

animation をクリックし、STATE の設定からアニメーションデータを設定します。
LINKED ENTITIES にはこの Anim State Graph を設定している Entity の情報が表示されます。
この Entity に該当するアニメーションのデータ「Scene.glb」を設定します。

Clock_Arm_band2 にも同じ設定をおこなっています。設定が完了したら、Launch で確認しましょう。

ボタンを作ってアニメーションさせよう

Anim State Graph でアニメーションさせる準備ができたので、次はそのアニメーションをさせるためのボタンを作っていきます。

ボタンは Element Component を使って作成していきます。

2D Screen、Group、Button と Entity に追加します。

Group と Button の Preset は「Top Left anchor & Pivot」を設定します。

Button を適切なサイズに変更します。
Text も「Animation 01」などと変更します。

Button をクリック時にアニメーションさせるために Script を追加します。

animationToggle.js を作成します。


var AnimationToggle = pc.createScript('animationToggle');

AnimationToggle.attributes.add("targetEntity", {type: "entity", array:true });

AnimationToggle.prototype.initialize = function() {
　　this.entity.element.on("click", () => {
　　　　for(let i=0; i<this.targetEntity.length; i++) {
　　　　　　if(!this.targetEntity[i].anim.getBoolean('startAnimation')) {
　　　　　　　　this.targetEntity[i].anim.setBoolean('startAnimation', true);
　　　　　　} else {
　　　　　　　　this.targetEntity[i].anim.setBoolean('startAnimation', false);
　　　　　　}
　　　　}
　　});
};

スクリプト属性にセットした targetEntity を参照します。
その Entity の中にある Anim Component を参照します。
プロパティで作成した start Animation の Boolean のプロパティを処理します。
この Boolean を判定して、アニメーションを遷移してくれます。

Button に Script Component から Add Script で animationToggle.js を追加します。

Parse ボタンを押して、スクリプト属性で設定した targetEntity を設定します。
Anim Component を設定した Entity を選択します。

ここでは、Clock_Arm_band と Clock_Arm_band2 の Entity をセットしています。

ここで Launch で確認すると、腕時計のベルトが巻けるのが確認できると思います。

これを各アニメーションごとにボタンを作成して、アニメーションを動く様に設定してみましょう。

パーツを切り替える

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

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

手順としてはアニメーションのボタン作成と同じです。
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 をもう一つ用意します。

Launch で確認します。

Display02 を押すと、Watch_body2 に切り替わり、Display01 を押すと、Watch_body に切り替わります。

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

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

マテリアルの色を指定するために、カラーコードを選択できる様にする必要があります。
※カラーコード： #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 に適用されているバンドブラウンというマテリアルです。

Launch で確認。

ボタンをクリックすると、カラーピッカーが表示され、色を選択。
その後、カラーピッカーを閉じると色が反映されるのが確認できます。

3D空間上に置くボタンを作成する

3D Screen を使用したボタン

各パーツに Chapter02 で行った Anim State Graph と Anim Component の設定を行います。

ASSETS 欄にある各パーツのフォルダ内に Anim State Graph とアニメーションデータがありますので、個別に設定してください。

カメラ操作に追従する、3D Screen での全アニメーション再生ボタンを作成します。

Entity に、3D Screen、Group、Button と親子関係を組み追加します。

Group と Button のプリセットは「Center Anchor & Pivot 」を設定します。
Button を適切なサイズに変更します。Group のポジションを Watch_Body の手前に移動させます。
テキストも「All Animation」などと、任意で変更します。

Button に Add Script で animationToggle.js を追加します。

Parse ボタンを押して、スクリプト属性で設定した targetEntity を全て登録します。

Launch で確認すると、ボタンがカメラの動きに追従しているのが確認できます。また、ボタンをクリックすると全てのアニメーションが同時に再生されることが確認出来ます。

チュートリアルは以上となります。お疲れさまでした。

このセクションの記事

腕時計の3Dモデルコンフィギュレーターを作成しよう

「 3D モデルコンフィギュレーター」のチュートリアルへようこそ！

目次

概要

Chapter01 - Projectをフォークする

Chapter02 - アニメーションを設定する

Anim State Graph について

各パーツの Entity にアニメーションを設定する

Anim Component の設定

アニメーションを制御するための準備をする

ボタンを作ってアニメーションさせよう

パーツを切り替える

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

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

ボタンの Script を作成する

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

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

3D空間上に置くボタンを作成する

3D Screen を使用したボタン

コメント

このセクションの記事

「 3D モデルコンフィギュレーター」のチュートリアルへようこそ！

目次

概要

Chapter01 - Projectをフォークする

Chapter02 - アニメーションを設定する

Anim State Graph について

各パーツの Entity にアニメーションを設定する

Anim Component の設定

アニメーションを制御するための準備をする

ボタンを作ってアニメーションさせよう

パーツを切り替える

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

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

ボタンの Script を作成する

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

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

3D空間上に置くボタンを作成する

3D Screen を使用したボタン

関連記事