Class: Hook

import { hook } from "negl";
// or
window.negl.hook

// コールバック関数
function logTick(world) {
  console.log(world.tick);
}
 
// hook.RENDERのフックにコールバック（logTick）を登録
hook.on(hook.RENDER, logTick);
 
setTimeout(() => {
  // hook.RENDERのフックからコールバック（logTick）を削除
  hook.off(hook.RENDER, logTick);
}, 3000); // 3秒後
 
// 3秒間`tick`の値がログに出力される。

import { hook } from "negl";
 
// マウスがメッシュに入った時に一回発火（
hook.on(hook.BEFORE_PAGE_INIT, (negl) => {
   console.log(negl); // neglをログに出力
})
// マウスがメッシュに入った時に一回発火（HTMLタグに`data-interactive`を要付与）
hook.on(hook.MOUSE_MESH_ENTER, ({ mouse }) => {
   console.log(mouse.getClipPos()); // マウス位置をクリップ座標でログに出力
})
 
// マウスがメッシュに入った時に一回発火（HTMLタグに`data-interactive`を要付与）
hook.on(hook.MOUSE_MESH_ENTER, ({ mesh }) => {
   mesh.scale.set(2,2,1); // マウスが重なった `mesh` をx,y軸方向に2倍に拡大
})
 
// マウスがメッシュから出た時に一回発火（HTMLタグに`data-interactive`を要付与）
hook.on(hook.MOUSE_MESH_LEAVE, ({ mesh }) => {
   mesh.scale.set(1,1,1); // マウスが出た `mesh` を元の大きさに戻す
});
 
// マウスをクリックした時に発火（HTMLタグに`data-interactive`を要付与）
hook.on(hook.MOUSE_MESH_CLICK, ({ mesh }) => {
   // クリックしたメッシュを右方向に 100 移動
   mesh.position.x += 100;
});
 
// 注意） MOUSE_MESH_* のフックはHTMLタグに`data-interactive`を付与してください。
// <img data-webgl="some-effect" data-tex-1="/example.jpg" data-interactive />
 
// スクロール中に発火
hook.on(hook.SCROLL, scroller => {
   const { delta } = scroller;
   console.log(delta.x, delta.y); // スクロールの変化量をログに出力
});
 
// 毎フレームの処理
hook.on(hook.RENDER, world => {
   // 注意）`requestAnimationFrame` のタイミングで連続的に実行されます。
   // 重い処理は書かないでください。
   console.log(world.tick); // tickのカウントをログに表示
});
 
// 画面リサイズ時に連続的に発火
hook.on(hook.RESIZE, viewport => {
   console.log(viewport.width); // canvasの横幅を取得
});
 
// 画面リサイズの終了時に発火
hook.on(hook.RESIZE_DELAY, viewport => {
   console.log(viewport.width); // canvasの横幅を取得
});