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())
  },
})

概要​

パラメータ​

戻り値​

例​

概要

パラメータ

戻り値

例