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

XR8.Threejs.xrScene()

XR8.Threejs.xrScene()

概要

xrシーン、カメラ、レンダラー(オプション)、カメラフィードテクスチャー、レイヤーシーン(オプション)へのハンドルを取得します。

パラメータ

なし

戻り値

以下のオブジェクトです。{ scene, camera, renderer, cameraTexture, layerScenes }

プロパティタイプ説明
sceneScenethree.jsのシーンです。
cameraCamerathree.jsのメインカメラです。
rendererRendererthree.jsのレンダラーです。
cameraTexture [Optional]Textureカメラフィードがキャンバスサイズに切り取られたthree.jsのテクスチャーです。 XR8.Threejs.configure({renderCameraTexture: true})を呼び出すことで有効化されます。
layerScenes [Optional]Record<String, LayerScene>レイヤー名とthree.jsのレイヤーシーンのマッピングです。 XR8.Threejs.configure({layerScenes: ['sky']})を呼び出すことで有効になるレコードが含まれます。

layerScenesオブジェクトのLayerSceneは、以下のプロパティを持ちます。

プロパティタイプ説明
sceneSceneこのレイヤーのthree.jsのシーンです。 この空に追加されたコンテンツは、このレイヤーが検出されたカメラフィードのエリアにいるときのみ表示されます。 例えば、Sky Effectでは、立方体は空にしか表示されません。 XR8.LayersController.configure({layers: {sky: {invertLayerMask: true}}})を使うと、これを反転して、空にない時だけキューブが表示されるようになります。
cameraCameraこのレイヤーのthree.jsカメラです。 メインカメラに位置と回転を同期させます。

const {scene, camera, renderer, cameraTexture} = XR8.Threejs.xrScene()

例)空のシーン

XR8.LayersController.configure({layers: {sky: {}}})
XR8.Threejs.configure({layerScenes: ['sky']})
...
const {layerScenes} = XR8.Threejs.xrScene()
createSkyScene(layerScenes.sky.scene, layerScenes.sky.camera)