メインコンテンツへスキップ

XR8.Threejs.pipelineModule()

XR8.Threejs.pipelineModule()

概要

three.jsの環境とライフサイクルとのインターフェイスを提供するパイプラインモジュールです。 XR8.Threejs.pipelineModule()onStartメソッドが呼ばれた後、 XR8.Threejs.xrScene()を用いてthree.jsシーンを照会することができます。 XR8.addCameraPipelineModule()が2番目のモジュールでXR8.addCameraPipelineModule(XR8.Threejs.pipelineModule())を呼び出した に呼ばれる場合に限り、XR8.Threejs.xrScene()を参照し、別のパイプラインモジュールのonStartメソッドの中でセットアップが可能です。

  • onStartでは、 three.js のレンダラーとシーンが作成され、カメラフィードに描画するように設定されます。
  • onUpdateでは、three.jsのカメラは、携帯電話の動きで制御されます。
  • onRenderでは、レンダラーのrender()メソッドが呼び出されます。

なお、このモジュールがカメラフィードを実際にキャンバスに描画することはありません。GlTextureRendererが代わりに行います。 背景にカメラフィードを追加するには、このモジュールをインストールする前にXR8.GlTextureRenderer.pipelineModule()をインストールしてください(シーンの描画前にレンダリングされるようにするためです)。

パラメータ

なし

戻り値

XR8.addCameraPipelineModule()経由で追加できるthree.jsのパイプラインモジュールです。

// XrController.pipelineModule()を追加し、6DoFカメラモーション推定を可能にします。
XR8.addCameraPipelineModule(XR8.XrController.pipelineModule())

// カメラフィードをキャンバスに描画するGlTextureRendererを追加します。
XR8.addCameraPipelineModule(XR8.GlTextureRenderer.pipelineModule())

// Three.js.pipelineModule()を追加します。これはthree.jsシーン、カメラ、レンダラーを作成し、
// 6DoFカメラモーションをベースにシーンカメラを制御します。
XR8.addCameraPipelineModule(XR8.Threejs.pipelineModule())

// カメラループにカスタムロジックを追加します。 // これは、各カメラフレームを処理するための主要なライフサイクルの瞬間に
// ロジックを提供するカメラパイプラインモジュールで行われます。 この場合、
// シーン初期化のためのonStartロジックと、シーン更新のためのonUpdateロジックを追加することになります。
XR8.addCameraPipelineModule({
// カメラパイプラインモジュールには、名前が必要です。 どんなものでも構いませんが、
// アプリ内で一意である必要があります。
name: 'myawesomeapp',

// onStartは、カメラフィードが始まった時に一度だけ呼ばれます。 この場合、コンテンツを追加するためにアクセスする前に、
// XR8.Threejs のシーンが準備されるのを待つ必要があります。
onStart: ({canvasWidth, canvasHeight}) => {
// three.js のシーンを取得します。 XR8.Threejs.pipelineModule().onStart()で作成されたものです。 // 今ここでアクセスできるのは、'myawesomeapp'が
// XR8.Threejs.pipelineModule()の後にインストールされたためです。
const {scene, camera} = XR8.Threejs.xrScene()

// シーンにいくつかのオブジェクトを追加し、開始カメラ位置を設定します。
initScene({scene, camera})

// xrコントローラの6DoF位置とカメラのパラメータをシーンと同期させます。
XR8.XrController.updateCameraProjectionMatrix({
origin: camera.position,
facing: camera.quaternion,
})
},

// onUpdateはレンダリング前にカメラループごとに1回呼ばれます。 three.jsのジオメトリシーンは、
// 通常はここで発生します。
onUpdate: () => {
// シーン内のオブジェクトの位置などを更新
updateScene(XR8.Threejs.xrScene())
},
})