negl 機能一覧 / Exports / Ob

Class: Ob

Ob クラスはエフェクト制御を行うクラスです。エフェクト（three.js で言うところのメッシュ）を作成する際は Ob クラスを継承して作成してください。Ob クラスを継承することで、画面スクロール、画面リサイズ、画像のアスペクト比調整、マウスクリックによるイベント発火等が簡単に実装できるようになります。Ob クラスは応用編で作成したものを拡張した形になりますので、Ob クラスの基本的な使用方法は応用編 (opens in a new tab)を参照してください。

Ob クラスの使用例はエフェクトを参照してください。

例外的なメッシュの追加方法

基本的には Ob クラスを継承してエフェクトは作成しますが、スクロール制御や画面のリサイズ制御が必要ない場合はメッシュやライトを three.js のシーンに直接挿入することも出来ます。ただ、直接シーンに追加されたメッシュに関しては negl は制御を行いませんので、独自で制御する必要があります。

Ob を使わずに直接シーンにメッシュやライトを追加

// メッシュをObを使わずに作成
const material = new MeshBasicMaterial({ color: "#ff0000" });
const geometry = new PlaneGeometry(500, 500);
const mesh = new Mesh(material, geometry);
 
// ライトの作成
const ambientLight = new AmbientLight("#ffffff", 0.3);
 
// メッシュとライトをシーンに追加
// * world.sceneが画面に表示されているシーンとなるため、このシーンに追加すると画面に表示されます。
world.scene.add(mesh, ambientLight);
// このようにしてシーンに追加されたエフェクトにはリサイズ制御などは効きません。

Properties

Methods

Properties

$

• $: Object

DOM 要素を保持するためのプロパティです。 $.el にはエフェクトが紐づく DOM 要素が格納されます。

Index signature

▪ [key: string]: HTMLElement | HTMLElement[]

Type declaration

Name	Type
`el`	`HTMLElement`

dataAttrs

• dataAttrs: Object

DOM 要素の dataset（data-*のキーと値が格納されているオブジェクト）のコピーを保持します。

Index signature

▪ [key: string]: string | undefined

defines

• defines: Object = {}

ShaderMaterial#defines (opens in a new tab)オブジェクト setupDefines の戻り値が設定されます。

Index signature

▪ [key: string]: any

fixed

• fixed: boolean

fixed フラグ true スクロールによるエフェクトの追従を自動で行います。false、スクロールに追従しません。

fragmentShader

• fragmentShader: string = ""

ShaderMaterial#fragmentShader (opens in a new tab)文字列 setupFragment の戻り値が設定されます。

geometry

• geometry: BufferGeometry

Geometry (opens in a new tab)オブジェクト setupGeometry の戻り値が設定されます。

hoveringMesh

• Optional hoveringMesh: Object3D<Event>

マウスホバー中のMesh (opens in a new tab)オブジェクト

isCache

• isCache: boolean = false

true の時、キャッシュから取得されたオブジェクト。false の時、それ以外。

material

• material: Material

Material (opens in a new tab)オブジェクト setupMaterial の戻り値が設定されます。

mesh

• mesh: Object3D<Event>

Mesh (opens in a new tab)オブジェクト setupMesh の戻り値が設定されます。

originalRect

• originalRect: DOMRect

$.el プロパティに格納された DOM 要素のの画面初期表示時の DOMRect (opens in a new tab) を保持します。

rect

• rect: DOMRect

$.el プロパティに格納された DOM 要素の DOMRect (opens in a new tab) の状態を保持します。画面幅が更新されるたびに最新の DOMRect で更新されます。

resizing

• resizing: boolean

リサイズフラグリサイズ処理を実行中は true、それ以外 false。

scale

• scale: Object

メッシュのスケールを保持します。これは画面の初期表示時からどれだけメッシュが伸縮しているかを数値で保持します。メッシュのスケールを変更した際はこのプロパティの値も変更してください。

Type declaration

Name	Type
`depth`	`number`
`height`	`number`
`width`	`number`

scrollPos

• scrollPos: Object

現在のスクロール位置をワールド座標で保持します。

横方向のスクロールは現状対応していません。

Type declaration

Name	Type
`x`	`number`
`y`	`number`

texes

• texes: Texes

テクスチャマップ

uniforms

• uniforms: Object = {}

ShaderMaterial#uniforms (opens in a new tab)オブジェクト setupUniforms の戻り値が設定されます。

Index signature

▪ [uniform: string]: IUniform

vertexShader

• vertexShader: string = ""

ShaderMaterial#vertexShader (opens in a new tab)文字列 setupVertex の戻り値が設定されます。

Methods

afterInit

▸ afterInit(): void | Promise<void>

Ob オブジェクトの作成後に実行します。

Returns

void | Promise<void>

beforeCreateMesh

▸ beforeCreateMesh(): void

メッシュの作成前に実行する処理を記載します。

Returns

void

click

▸ click(«destructured»): void

メッシュクリック時の挙動を制御します。

Ob クラスでは次のフローで click 時の挙動を制御しています。もし、メッシュクリック時の挙動を変更したい場合はこのメソッドをオーバーライドしてください。

Ob クラスの click イベントの制御

getClickIdx の戻り値により data-click-* の値を取得します。
data-click-* に設定されている値が
- クラスに存在するメソッドだった場合 -> そのメソッドを実行します。
- URL、もしくは newTab から始まる文字列だった場合 -> ページ遷移を行います。

Parameters

Name	Type
`«destructured»`	`Object`
› `event`	`Event`
› `meshUI`	`MeshUI`
› `transition`	`Transition`

Returns

void

disableOriginalElem

▸ disableOriginalElem(): void

Ob の元になった HTML 要素の画面から除外します。処理内容は以下の通りです。

disableOriginalElem(): void {
  this.$.el.draggable = false;
  this.$.el.style.opacity = "0";
}

Returns

void

getClickIdx

▸ getClickIdx(): number

戻り値で返却したdata-click-*のアクションを実行します。例えば、getClickIdx で 1 を返却するように実装すると data-click-1 の値に設定されたアクションが実行されます。実装を上書きしない場合は 1 が返ります。

なお、data-click-*の使い方については data-click を参照してください。

<!-- URL任意のURLに画面遷移。例）`1`を返却。`/detail.html`への画面遷移 -->
<!-- 別タブで画面を開く。例）`2`を返却。`/detail.html`を別タブで開く -->
<!-- `3`が返却された場合は`data-click-3`に設定されたObクラスのメソッド`goNext`を実行 -->
<div
  data-webgl="some-effect"
  data-interactive
  data-click-1="/detail.html"
  data-click-2="newTab,/detail.html"
  data-click-3="goNext"
></div>

Returns

number

getResolution

▸ getResolution(rect?, mediaElement?): Vector4

テクスチャと HTML 要素の大きさのアスペクト比から uResolution を設定します。

Parameters

Name	Type	Description
`rect?`	`DOMRect`	要素の矩形を渡します。省略された場合は this.rect が使用されます。
`mediaElement?`	`HTMLImageElement` \| `HTMLVideoElement`	画像、または動画。省略した場合は data-tex-1 に設定されたメディアが使用されます。

Returns

Vector4

uResolution に設定する Vector4 オブジェクト x: DOM の横幅 y: DOM の縦幅 z: 横幅に掛ける縦横比 w: 縦幅に掛ける縦横比

getWorldPosition

▸ getWorldPosition(rect, viewport): Object

HTML の座標からワールド座標の位置を取得します。

Parameters

Name	Type
`rect`	`DOMRect`
`viewport`	`Viewport`

Returns

Object

Name	Type
`x`	`number`
`y`	`number`

onBeforeCompile

▸ onBeforeCompile(shader): void

シェーダのコンパイル前にシェーダコードを変更します。 Ob クラスではシェーダの texture を texture2D に変換する以下のコードを記述しています。

if (shader.isWebGL2) return; // WebGL 2.0の場合、変更は不要
 
// WebGL1.0の場合はtexture関数が見つからないため、texture2Dにシェーダのコードを置換
shader.vertexShader = shader.vertexShader.replace(/texture\(/g, "texture2D(");
shader.fragmentShader = shader.fragmentShader.replace(
  /texture\(/g,
  "texture2D("
);

Parameters

Name	Type
`shader`	`Shader`

Returns

void

pauseVideo

▸ pauseVideo(texId?): void

動画テクスチャを停止します。

Parameters

Name	Type
`texId`	`string`

Returns

void

playVideo

▸ playVideo(texId?): Promise<void>

動画テクスチャを再生します。

Parameters

Name	Type
`texId`	`string`

Returns

Promise<void>

render

▸ render(tick, delta): void

フレーム毎に実行したい処理を記述します。

Parameters

Name	Type
`tick`	`number`
`delta`	`number`

Returns

void

resize

▸ resize(duration?): Promise<void>

画面幅の変更に伴うエフェクトの位置や大きさの変更を行います。処理内容は以下の通りです。

async resize(duration: number = 1): Promise<void> {
  this.resizing = true;
 
  const {
    $: { el },
    mesh,
    originalRect,
  } = this;
 
  const nextRect = INode.getRect(el)!;
  const { x, y } = this.getWorldPosition(nextRect, viewport);
 
  if (mesh === undefined) return;
 
  const p1 = new Promise((onComplete) => {
    // utils.tween については{@link utils.tween こちら}を参照
    utils.tween(mesh.position, {
      x,
      y,
      duration,
      onComplete,
    })
  });
 
  // 大きさの変更
  const p2 = new Promise((onComplete) => {
    utils.tween(this.scale, {
      width: nextRect.width / originalRect.width,
      height: nextRect.height / originalRect.height,
      depth: 1,
      duration,
      onUpdate: () => {
        mesh.scale.set(this.scale.width, this.scale.height, this.scale.depth);
      },
      onComplete
    })
  });
 
  const p3 = new Promise((onComplete) => {
    if (!this.uniforms?.uResolution) return onComplete(null);
    const resolution = this.getResolution(nextRect);
    utils.tween(this.uniforms.uResolution.value, {
      x: resolution.x,
      y: resolution.y,
      z: resolution.z,
      w: resolution.w,
      duration,
      onComplete,
    })
  });
 
  await Promise.all([p1, p2, p3]);
 
  this.rect = nextRect;
 
  this.resizing = false;
}

Parameters

Name	Type	Default value	Description
`duration`	`number`	`1`	config の　`viewport.resizeDuration` の値が渡ってきます。

Returns

Promise<void>

scroll

▸ scroll(): void

スクロールに伴うメッシュの位置情報を変更します。

Returns

void

setupDefines

▸ setupDefines(): Object

戻り値が ShaderMaterial.define に使用されます。

初期状態では PI を返却します。

{
  PI: Math.PI;
}

Returns

Object

setupFragment

▸ setupFragment(): string

ShaderMaterial に設定する fragment シェーダを返却します。オーバーライドして使用してください。シェーダを使用しないマテリアル（例えば、MeshStandardMaterial）の場合は空のメソッドでオーバーライドしてください。

シェーダを使わない場合は何も返却しないメソッドを定義してください。

setupFragment(): FragmentShader {
 return;
}

Returns

string

setupGeometry

▸ setupGeometry(): BufferGeometry

ジオメトリを返却します。初期状態では PlaneGeometry を返却します。

new PlaneGeometry(this.rect.width, this.rect.height, 1, 1);

Returns

BufferGeometry

setupMaterial

▸ setupMaterial(): Material

マテリアルを返却します。初期状態では ShaderMaterial を返却します。

const material = new ShaderMaterial({
  defines: this.defines,
  vertexShader: this.vertexShader,
  fragmentShader: this.fragmentShader,
  uniforms: this.uniforms,
  transparent: true,
});
material.onBeforeCompile = this.onBeforeCompile;
return material;

Returns

Material

setupMesh

▸ setupMesh(): Object3D<Event>

返却されたメッシュが this.mesh に設定されます。

Returns

Object3D<Event>

setupTexes

▸ setupTexes(uniforms): Object

ShaderMaterial の uniforms に設定する値を返却します。（テクスチャ用）

Parameters

Name	Type
`uniforms`	`Object`

Returns

Object

setupUniforms

▸ setupUniforms(): Object

戻り値が ShaderMaterial.uniforms に使用されます。初期状態では DefaultUniforms が返却されます。

Returns

Object

setupVertex

▸ setupVertex(): string

ShaderMaterial に設定する VertexShader シェーダを返却します。オーバーライドして使用してください。シェーダを使用しないマテリアル（例えば、MeshStandardMaterial）の場合は空のメソッドでオーバーライドしてください。

シェーダを使わない場合は何も返却しないメソッドを定義してください。

setupVertex(): FragmentShader {
 return;
}

Returns

string

init

▸ Static init(«destructured»): Promise<Ob>

Ob クラスの初期化用静的メソッドです。

Ob クラス内で使用するテクスチャは texes の変数として Ob クラスのコンストラクタに渡していますが、テクスチャの取得は非同期処理トなるため、コンストラクタ関数内に記述することは出来ません。その為、この静的メソッド内で Ob 内で使用するテクスチャを取得し、インスタンス化を行っています。Ob クラスの init 関数の実装は以下の通りです。

static async init({ el, type }: { el: HTMLElement; type: string }): Promise<Ob> {
 const texes = await loader.getTexByElement(el); // テスクチャを取得
 const o = new this({ texes, el, type });        // インスタンス化
 return o;                                       // インスタンスを返却
}

Parameters

Name	Type
`«destructured»`	`Object`
› `el`	`HTMLElement`
› `type`	`string`

Returns

Promise<Ob>

Negl Scroller

Class: Ob

例外的なメッシュの追加方法

Table of contents

Properties

Methods

Properties

$

Index signature

Type declaration

dataAttrs

Index signature

defines

Index signature

fixed

fragmentShader

geometry

hoveringMesh

isCache

material

mesh

originalRect

rect

resizing

scale

Type declaration

scrollPos

Type declaration

texes

uniforms

Index signature

vertexShader

Methods

afterInit

Returns

beforeCreateMesh

Returns

click

Parameters

Returns

disableOriginalElem

Returns

getClickIdx

Returns

getResolution

Parameters

Returns

getWorldPosition

Parameters

Returns

onBeforeCompile

Parameters

Returns

pauseVideo

Parameters

Returns

playVideo

Parameters

Returns

render

Parameters

Returns

resize

Parameters

Returns

scroll

Returns

setupDefines

Returns

setupFragment

Returns

setupGeometry

Returns

setupMaterial

Returns

setupMesh

Returns

setupTexes

Parameters

Returns

setupUniforms