Skip to content

クリック(タップ)イベント処理

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)の配列が入ります。手前のオブジェクトの後ろに 別のオブジェクトが重なっている場合もまとめて取得できるので、 「一番手前だけ」でない処理を書きたいときはこちらを使ってください。