negl機能一覧 / Exports / MeshUI

Class: MeshUI

メッシュに対するマウスのインタラクションを制御します。
Hook の裏で動いているクラスのため、基本的には直接使用しません。

このクラスはnegl内部でインスタンス化され、meshUIオブジェクトとして提供されます。

取得方法

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

Table of contents

Methods

• getHoveringMesh
• getHoveringOb
• preventDefault
• reset
• resetUIData
• stopPropagation
• unwatch
• watch

Methods

getHoveringMesh

▸ getHoveringMesh(): undefined | Object3D<Event>

ホバー中のメッシュがあれば対象のメッシュを返却します。

Returns

undefined | Object3D<Event>

Obect3D (opens in a new tab)

getHoveringOb

▸ getHoveringOb(): undefined | Ob

ホバー中のメッシュがあれば紐づくObオブジェクトを返却します。

Returns

undefined | Ob

preventDefault

▸ preventDefault(): void

メッシュクリック時のデフォルト制御を一時的に停止します。
例えば、button要素とメッシュが重なって表示されている場合にbuttonのクリックイベントのみを実行し、メッシュのクリックイベントを発火させたくない場合には次のように記述します。

buttonElement.addEventListener('click', () => {
 // ...
 // メッシュのクリックイベントの発火を停止
 meshUI.stopPropagation();
});

以下の処理が停止対象となります。

• HTML内のdata-click-1によって登録されたアクション、および画面遷移
• リンククリックによる画面遷移

Returns

void

reset

▸ reset(): void

監視対象の初期化を行います。

Returns

void

resetUIData

▸ resetUIData(mesh): void

マウスのUIに関する情報を初期化します。

// OBクラスに含まれるメッシュを監視対象から除外
meshUI.resetUIData(mesh);

Parameters

Returns

void

stopPropagation

▸ stopPropagation(): void

メッシュクリックイベント発火を一時的に停止します。

例えば、button要素とメッシュが重なって表示されている場合にbuttonのクリックイベントのみを実行し、メッシュのクリックイベントを発火させたくない場合には次のように記述します。

buttonElement.addEventListener('click', () => {
 // ...
 // メッシュイベントの発火を停止
 meshUI.stopPropagation();
});

以下のフックに登録された処理が停止対象となります。

• hook.on(hook.MOUSE_MESH_CLICK, ...)

Returns

void

unwatch

▸ unwatch(obOrSelector): void

メッシュを監視対象から除外します。

// OBクラスに含まれるメッシュを監視対象から除外
meshUI.unwatch(o);
// or 
meshUI.unwatch('.css-selector');
// or 
meshUI.unwatch(domElement);

Parameters

Returns

void

watch

▸ watch(obOrSelector): void

Ob オブジェクトに含まれる Mesh (opens in a new tab) のUI監視対象に追加します。

// メッシュをマウスの監視対象に追加
meshUI.watch(o);
meshUI.watch('.css-selector');

注意
data-interactiveを付与したものは自動的にUIの監視対象になります。

<!-- 以下のHTMLに紐づくエフェクトは自動的に監視対象 -->
<div data-interactive data-webgl="some-effect"></div>

Parameters

Returns

void