本チュートリアルの動画を YouTube から試聴しながらの学習をお奨めしております。
「 3D モデルコンフィギュレーター」のチュートリアルへようこそ!
目次
概要
このチュートリアルでは、PlayCanvas を用いて、3D 空間上の時計パーツのカスタマイズを可能にするコンフィギュレーターコンテンツを作成します。PlayCanvas で構成されるコンフィギュレーターの基本構造を学習し、その知識を応用して、様々な製品のコンフィギュレーターコンテンツを作成できるようにしましょう。
完成したコンフィギュレーターは以下のものです。
Chapter01 - Projectをフォークする
チュートリアルで使用するプロジェクトはこちら
https://playcanvas.com/project/1011719/overview/tutorialconfiguratorfork
これをフォークして進めていきます。
Chapter02 - アニメーションを設定する
Anim State Graph について
PlayCanvas では、アニメーションの再生管理をノードベースで行うことができる Anim State Graph という機能があります。この機能を利用することで、簡単に複数のアニメーションを切り替えることができます。
詳しくはこちら参照
- https://developer.playcanvas.com/en/tutorials/anim-blending/
- https://support.playcanvas.jp/hc/ja/articles/900006040726
各パーツの 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 で確認すると、ボタンがカメラの動きに追従しているのが確認できます。また、ボタンをクリックすると全てのアニメーションが同時に再生されることが確認出来ます。
チュートリアルは以上となります。お疲れさまでした。
コメント
0件のコメント
サインインしてコメントを残してください。