negl機能一覧 / Exports / World

Class: World

シーン、カメラ、メッシュ、Obオブジェクト、ポストプロセッシングなどのthree.js (opens in a new tab)を使った3D空間の全体的な制御を行います。 このクラスの機能を使用する際は既にインスタンス化されたworld変数を使用してください。

Since

1.0.0

Table of contents

Properties

• camera
• clock
• delta
• os
• renderer
• scene
• tick

Methods

• addOb
• addRaycastingTarget
• createOb
• displayMeshes
• disposeMesh
• getObByEl
• getObByElAll
• getObByMesh
• getObjByEl
• hideMeshes
• removeOb
• removeObj
• render
• updateCamera

Properties

camera

• camera: Camera

THREE.Camera (opens in a new tab)オブジェクト

clock

• clock: Clock

THREE.Clock (opens in a new tab)オブジェクト

delta

• delta: number = 0

THREE.Clock#getDelta (opens in a new tab)の戻り値

os

• os: Ob[] = []

Obオブジェクトの

renderer

• renderer: WebGLRenderer

THREE.WebGLRenderer (opens in a new tab)オブジェクト

scene

• scene: Scene

THREE.Scene (opens in a new tab)オブジェクト

tick

• tick: number = 0

レンダリング開始時点からのティック回数

Methods

addOb

▸ addOb(o): void

Obオブジェクトをシーン内に追加します。

注意
HTML内のdata-webglで指定したObオブジェクトやcreateObで作成したObオブジェクトは自動的にシーンに追加されます。

Parameters

Returns

void

addRaycastingTarget

▸ addRaycastingTarget(obOrSelector): void

[廃止]

Parameters

Returns

void

Deprecated

MeshUI#watch を代わりに使用してください。

createOb

▸ createOb(elOrHtmlStr, options?): Promise<Ob>

HTML文字列、またはDOM要素からObオブジェクトを作成します。
これまではHTML内にエフェクトの元となるHTMLを必ず記述する必要がありましたが、JSから作成したい場合にこのメソッドを使用します。

const templateOb = await world.createOb(`
 <img data-webgl="template" data-interactive data-click-1="/detail.html" />
`)

Parameters

Returns

Promise<Ob>

displayMeshes

▸ displayMeshes(os): void

引数で渡されたObオブジェクト配列に含まれるメッシュのvisible (opens in a new tab)プロパティを全てtrue（表示）の状態にします。

Parameters

Returns

void

disposeMesh

▸ disposeMesh(mesh): void

メッシュに含まれる全てのMaterialとGeometryを再起的に破棄（dispose）します。

Parameters

Returns

void

getObByEl

▸ getObByEl(obOrSelector): undefined | Ob

セレクタ文字列、またはDOM要素からObオブジェクトを取得します。

Parameters

Returns

undefined | Ob

DOMに紐づくObオブジェクト

const panelO = world.getObByEl('.panel-selector');
panelO.mesh.visible = false; // メッシュを非表示

getObByElAll

▸ getObByElAll(selector): (undefined | Ob)[]

セレクタ文字列に一致する全てのDOM要素に紐づくObオブジェクトを含む配列を取得します。

Parameters

Returns

(undefined | Ob)[]

DOMに紐づくObオブジェクト配列

const panelOs = world.getObByElAll('.panel-selector');
panelOs[0].mesh.visible = false; // 一つ目のメッシュを非表示
panelOs[1].mesh.position.x += 500; // 二つ目のメッシュの位置を右に`500`移動

getObByMesh

▸ getObByMesh(targetMesh): undefined | Ob

メッシュに紐づくObクラスを取得します。

Parameters

Returns

undefined | Ob

targetMeshを含むObクラス

getObjByEl

▸ getObjByEl(obOrSelector): undefined | Ob

[廃止]

Parameters

Returns

undefined | Ob

Deprecated

getObByEl を代わりに使用してください。

hideMeshes

▸ hideMeshes(os): void

引数で渡されたObオブジェクト配列に含まれるメッシュのvisible (opens in a new tab)プロパティを全てfalse（非表示）の状態にします。

Parameters

Returns

void

removeOb

▸ removeOb(o, dispose?): true | void

Obオブジェクトをシーン内から削除します。

Parameters

Returns

true | void

removeObj

▸ removeObj(o, dispose?): void

[廃止]

Parameters

Returns

void

Deprecated

removeOb を代わりに使用してください。

render

▸ render(): void

canvasへのレンダリングの処理を実行します。
このメソッドは requestAnimationFrame でループ実行されます。

また、render メソッド内では以下の処理により画面描写を行っています。

this.renderer.render(this.scene, this.camera);

その為、もしEffectComposer等でパスを適用したい場合は config.world.autoRender を false に設定し、以下のようにして composer.render を実行してください。

// デフォルトの renderer.render の実行を無効化
config.world.autoRender = false;
 
composer = new EffectComposer(world.renderer);
const renderPass = new RenderPass(world.scene, world.camera);
composer.addPass(renderPass);
 
// hook.RENDERに登録（requestAnimationFrame のループ内で実行されるようになる）
hook.on(
  hook.RENDER,
  () => {
    // composer.render を requestAnimationFrame のタイミングで実行
    composer.render();
  },
  // priority: -1000 で実行の優先度を下げる
  { priority: -1000 }
);

また、Travelサイトでは getComposer.js という composer を取得する関数をご用意しています。こちらを使えば、裏側の処理を気にせず、composer を使用することができます。

getComposer.jsは以下のフォルダに格納されています。 travel/src/scripts/parts/helper/getComposer.js

Returns

void

updateCamera

▸ updateCamera(viewport): void

画面幅が変更した際のカメラのfovとaspectを更新します。

Parameters

Returns

void