Appearance
クリック(タップ)イベント処理
3Dのオブジェクトがクリック(スマホではタップ)されたときの処理を 書くことができます。方法は2つあります。
ObjectA3.setClickListener()
一番簡単なのは、オブジェクトにsetClickListener()でリスナーを 登録する方法です。以下のサンプルでは、オブジェクトをクリックすると 大きさが切り替わります。
js
import * as a3 from 'a3js';
const view = new a3.Window(600,300);
const obj = new a3.SampleObject();
// オブジェクトがクリック(タップ)されたときの処理を登録
let big = false;
obj.setClickListener((o)=>{
console.log('クリックされた!');
big = !big;
const s = big ? 1.5 : 1.0;
o.setScale(s,s,s);
});
view.scene.add(obj);リスナーにはクリックされたオブジェクト自身が渡されます。 サウンドの初期化(a3.initSound())のようにユーザー操作が必要な 処理をここで行うこともできます。
Viewのclick3dイベント
もう1つは、Viewのclick3dイベントを使う方法です。Viewは HTML要素なので、通常のDOMイベントと同じように addEventListener()で登録します。
js
view.addEventListener('click3d',(e)=>{
console.log(e.detail.value); // クリック位置にあるオブジェクトの配列
});e.detail.valueにはクリックされた位置にあるオブジェクト (ObjectA3)の配列が入ります。手前のオブジェクトの後ろに 別のオブジェクトが重なっている場合もまとめて取得できるので、 「一番手前だけ」でない処理を書きたいときはこちらを使ってください。