negl機能一覧 / Exports

negl機能一覧

Table of contents

Classes

• Gui
• Hook
• INode
• Loader
• MeshUI
• Mouse
• Negl
• Ob
• Scroller
• Transition
• Utils
• Viewport
• World

Interfaces

• Config
• MouseState
• Page
• TransitionState

Type Aliases

• DefaultUniforms
• HookOptions
• ObConstructorArgs
• ObOrSelector
• ProgressAction
• ScrollDelta
• Texes

Variables

• config
• gui
• hook
• loader
• meshUI
• mouse
• negl
• scroller
• transition
• utils
• viewport
• world

Functions

• setup
• start

Type Aliases

DefaultUniforms

Ƭ DefaultUniforms: Object

Obクラスで作成したShaderMaterial (opens in a new tab)に設定されるuniformsのデフォルト値です。

Type declaration

HookOptions

Ƭ HookOptions: Object

フックオプション Hook.on の第三引数のオプションです。

Type declaration

ObConstructorArgs

Ƭ ObConstructorArgs: Object

Obクラスのコンストラクタの引数の型です。

Type declaration

ObOrSelector

Ƭ ObOrSelector: Ob | Element | string

Obオブジェクト、HTML要素、またはセレクタ文字列

ProgressAction

Ƭ ProgressAction: (progress: number, total: number) => void

Type declaration

▸ (progress, total): void

ローディングの進捗を受け取るコールバック関数です。ローディング時に画像などの読み込み状況に応じてアニメーションを付けたい場合に使用することができます。

import { loader } from "negl";
// or
const { start } = setup();
const negl = await start((progress, total) => {
  console.log(`${progress}枚目の読み込みが完了。読み込み対象は[${total}]枚。`);
});
// > 1枚目の読み込みが完了。読み込み対象は3枚。
// > 2枚目の読み込みが完了。読み込み対象は3枚。
// > 3枚目の読み込みが完了。読み込み対象は3枚。

Parameters

Returns

void

ScrollDelta

Ƭ ScrollDelta: Object

スクロール変化量保持オブジェクト

Type declaration

Texes

Ƭ Texes: Map<string, Texture | undefined>

テクスチャマップ

Variables

config

• Const config: Config

ライブラリ全体の設定を保持します。 設定の上書きは setup 関数の実行時に行うことができます。

import { setup } from "negl";
 
function init() {
 const myConf = { world: { clearColor: "#ff0000" }} // 背景色を赤色に設定
 const { start } = await setup(myConf);
 const negl = await start();
 negl.renderStart();
 // 背景が赤色で表示される。
}
init();

gui

• gui: Gui

lil-gui (opens in a new tab)の制御を行うGuiクラスのオブジェクトです。

パラメータを変更するGUIの追加を行いたい場合に使用します。

画面の右上に lilGUI の UI を表示するためには、config.debug に true を設定し、config.addon.lilGUI に lilGUI のクラスを設定します。

import lilGUI from "lil-gui";
 
const { start } = setup({
 addon: { lilGUI },
 debug: true
});

hook

• Const hook: Hook

特定のイベントに対する処理の登録、削除を制御するHookクラスのオブジェクトです。 イベントが発生した際に登録したコールバック関数が実行されます。

取得方法

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

詳細はonを参照してください。

loader

• Const loader: Loader

アセット（画像、動画）の読み込み管理を行うLoaderオブジェクトです。

新しく画像や動画をテクスチャとして読み込むことができます。

meshUI

• meshUI: MeshUI

メッシュに対するマウスのユーザーインターフェイス(UI)を制御するMeshUIクラスのオブジェクトです。

マウスのクリックやホバーの状態を受け取りたいメッシュを監視対象として追加、削除したり、メッシュに対するクリックイベントの伝播の停止やデフォルト制御の停止などを行うことができます。

[注意] メッシュへのインタラクション制御は hook にコールバック関数を登録することで実装できます。その為、このオブジェクト自体を使用する機会は極めて稀です。

取得方法

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

監視対象に追加したメッシュにマウスが作用すると以下の処理が実行されます。

• 以下のフックの発火 MOUSE_MESH_ENTER、MOUSE_MESH_LEAVE、MOUSE_MESH_CLICK

注意
data-interactiveを付与したものは自動的にUIの監視対象になります。詳細はMeshUIを確認してください。

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

mouse

• mouse: Mouse

マウスの制御を行う Mouse クラスのオブジェクトです。

neglではマウスの位置情報を内部で保持しています。これはマウスに追従するアニメーションや、メッシュへのインタラクション のマウス座標、もしくはシェーダに渡る uMouse、uHover の座標に用いられます。

negl

• negl: Negl

negl ライブラリのオブジェクトです。

scroller

• scroller: Scroller

スクロールの制御を行う Scroller クラスのオブジェクトです。

transition

• transition: Transition

ページ遷移制御を行うTransitionクラスのオブジェクトです。

neglでは config.transition.spaMode を true にすることで SPA としてアプリを動かすことができます。SPAモードにした場合はリンククリック時やメッシュクリック時の画面ロードがなくなります。

utils

• Const utils: Utils

negl 内部で使用する関数を保持するUtils クラスのオブジェクトです。

viewport

• viewport: Viewport

画面サイズとカメラの値を管理する Viewport クラスのオブジェクトです。

neglではマウスの位置情報を内部で保持しています。これはマウスに追従するアニメーションや、メッシュへのインタラクションのマウス座標、もしくはシェーダに渡るuMouse、uHoverの座標に用いられます。

world

• world: World

Worldクラスのオブジェクト

シーンの初期化、カメラの配置、メッシュ（Obクラス）の管理、レンダリングなどの3D空間の制御とメッシュの制御を行います。 プロパティやメソッドの詳細はWorldクラスを参照してください。

取得方法

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

Functions

setup

▸ setup(options?): Object

negl ライブラリの設定を行います。negl ライブラリを使用する際に一番最初に呼ぶ関数です。

Parameters

Returns

Object

start メソッドを含むオブジェクトを返却します。start メソッドを実行するとneglの初期化処理が実行されます。また、startの引数に渡したコールバック関数（ProgressAction）では画像の読み込み進捗を受け取ることができます。

start

▸ start(progressAction): Promise<undefined | Negl>

neglライブラリの初期化を行います。この関数が実行された後にneglの部品（world, scroller, mouseなど）が使用可能な状態になります。

Parameters

Returns

Promise<undefined | Negl>