メッシュでマウスの入力を受け取ってみよう
negl ではメッシュのクリックなどを自動的に検知し、関数を実行できるhookを追加しました。また、クリック以外にも以下のイベントが hook.on によって検知可能です。
メッシュに対するマウスのイベント
| フックタイプ | 発火タイミング | コールバックの引数 |
|---|---|---|
| MOUSEMOVE | マウスが動いている間連続的に発火 | mouse |
| MOUSE_MESH_ENTER | マウスがメッシュに入った時 | { mesh (opens in a new tab), mouse, ob, meshUI } |
| MOUSE_MESH_HOVER | メッシュにホバーしている時 | { mesh (opens in a new tab), mouse, ob, meshUI } |
| MOUSE_MESH_LEAVE | マウスがメッシュから出た時 | { mesh (opens in a new tab), mouse, ob, meshUI } |
| MOUSE_MESH_CLICK | マウスがメッシュをクリックした時 | { mesh (opens in a new tab), mouse, ob, meshUI } |
補足
- コールバックの引数に渡ってくる
meshは イベントが発生したメッシュとなります。 - コールバックの引数に渡ってくる
obは イベントが発生した Ob オブジェクトとなります。
メッシュをクリックしたタイミングでログを出力してみよう
メッシュがクリックされた際に関数を実行してみましょう。
メッシュがクリックされた際に関数を実行するためには hook.MOUSE_MESH_CLICK フックを利用します。次のようにするとメッシュがクリックされたタイミングで Hello がアラートで表示されます。
index.html（.page-container内のみ抜粋）
<div class="page-container">
<!-- MOUSE_MESH_*のイベント発火には data-interactive の付与が必須です。-->
<div
data-interactive
class="test-effect"
data-webgl="template"
data-tex-1="/img/dog.jpg"
data-tex-2="/img/cat.jpg"
></div>
<style>
.test-effect {
width: 500px;
height: 500px;
}
</style>
</div>index.js
import { setup } from "negl";
const obResolver = async (type) => {
const module = await import(`./parts/glsl/${type}/index.js`);
return module.default;
};
(async () => {
const { start } = setup({
resolver: {
ob: obResolver,
},
});
const { world, negl } = await start();
// MOUSE_MESH_CLICK にコールバックを登録
hook.on(hook.MOUSE_MESH_CLICK, ({ mesh }) => {
alert("クリックされたメッシュ：", mesh);
});
negl.renderStart();
})();MOUSE_MESH_CLICK フックにコールバック関数を登録すると、監視対象（data-interactive が付与されているエフェクト）がクリックされたタイミングでコールバック関数が実行されます。
💡
監視対象のメッシュは mesh.visible (opens in a new tab) が true である必要があります。mesh.visible = false の場合はクリックしても反応しませんので、注意してください。
💡
特定のエフェクトでのみ処理を実行したい場合は Ob.click を上書きしてください。
例えば、次のような click-alert エフェクトを実装した場合はアラートで Clicked と表示されます。
click-alert/index.js
import { Ob } from "negl";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragment.glsl";
export default class extends Ob {
setupVertex() {
return vertexShader;
}
setupFragment() {
return fragmentShader;
}
click() {
// クリックのタイミングで Clicked がアラートで表示される。
window.alert("Clicked");
}
}<img data-interactive data-webgl="click-alert" data-tex-1="/img/sample.jpg" />それ以外のクリックイベントに関する説明はdata-click-*を参照してください。