Svelte で3D表示を行うライブラリ Threlte #4: シーンコントロールツールセット Theatre.js for Threlte

Last updated at 2024-02-28Posted at 2024-01-28

シリーズ

Svelte で 3D 表示を行うライブラリ Threlte #1: パッケージの作成とライブラリ概要
Svelte で 3D 表示を行うライブラリ Threlte #2: エクストラパッケージを使用する
Svelte で 3D 表示を行うライブラリ Threlte #3: glTF シーンを扱う
Svelte で 3D 表示を行うライブラリ Threlte #4: シーンコントロールツールセット Theatre.js for Threlte
Svelte で3D表示を行うライブラリ Threlte #5: XR への対応

Theatre.js for Threlte

シーンの中ではオブジェクトのエディットやマテリアルのエディットなども UI として提供したくなることもある。

こうした要求に対して、Theatre.js というものがある。
Threlte では、このツールセットを Svelte コンポーネントとして扱う事が出来量にするパッケージの提供があり、これを取り込むことによって簡単に Theatre.js の UI を展開することが出来る様になっている。

今回はこの Theatre の組み込み方や使い方に関して触れていく。

インストール

Theatre は別パッケージとして扱われているので、別途インストールする必要がある。

npm install @threlte/theatre @theatre/core @theatre/studio

@threlte/theatre
- Theatre.js コンポーネントを Threlte(Svelte) コンポーネントとして扱える様にするパッケージ。
@theatre/core
- Theatre.js 本体
@theatre/studio
- Theatre.js のエディタ UI 部分を管理しているパッケージ。

基礎の組み込み

まずは、Theatre コンポーネントをアプリケーションに組み込む。
Scene の上流階層に入れるイメージ。

App.svelte

<script lang="ts">
	import { Canvas } from '@threlte/core';
	import { Theatre } from '@threlte/theatre';
	import Scene from './Scene.svelte';
</script>

<Canvas>
	<Theatre>
		<Scene />
	</Theatre>
</Canvas>

すると、この時点で画像の様に Theatre.js の UI が追加される。（とてもサクっと！

パラメーターコントロールを可能にする

`<SheetObject>` の追加

コントロールを可能にするには、まず <SheetObject> で認識させたいオブジェクトをコンポーネント構造に組み込む必要がある。

key 要素は、その子コンポーネントとなるものをグループ化する目的で名前を付ける。
複数設定していくことは可能だが、key の値は「ID」としての認識を受けるので、内部でマテリアルパラメーターなどを同期させたい場合などの特殊な場合を省いて、基本はユニークにすべきだと思われる。

Scene.svelte

<script lang="ts">
    import { SheetObject } from '@threlte/theatre';
</script>

<!-- 省略 -->

<SheetObject key="Sphere">
    <T.Mesh position.y={1.2}>
        <T.SphereGeometry />
        <T.MeshStandardMaterial color="grey" roughness={0.0} />
    </T.Mesh>
</SheetObject>


<SheetObject key="Box">
	<T.Mesh position={[-1.5, 1.2, 0]}>
		<T.BoxGeometry />
		<T.MeshStandardMaterial color="grey" roughness={0.0}>
		</T.MeshStandardMaterial>
	</T.Mesh>
</SheetObject>

パラメーターコントロール

シーンオブジェクトのパラメーターをコントロールできるようにするには、以下の二つを設定する。

<SheetObject> への let:Sync の追加。
<Scyn> を、コントロールしたいコンポーネントの子コンポーネントとして追加。

Scene.svelte

+<SheetObject key="Sphere" let:Sync>
	<T.Mesh position.y={1.2}>
		<T.SphereGeometry />
		<T.MeshStandardMaterial color="white">
+			<Sync color roughness metalness />
		</T.MeshStandardMaterial>
	</T.Mesh>
</SheetObject>

上記の key の値を同値にして、同様の <Sync> を含む場合、それらのオブジェクトは先に宣言された方のパラメーター更新と同じ影響を受けてしまう。

Scene.svelte

<SheetObject key="Sphere" let:Sync>
	<T.Mesh position.y={1.2}>
		<T.SphereGeometry />
		<T.MeshStandardMaterial color="grey" roughness={0.0}>
			<Sync color roughness metalness />
		</T.MeshStandardMaterial>
	</T.Mesh>
</SheetObject>

<SheetObject key="Sphere" let:Sync>
	<T.Mesh position={[-1.5, 1.2, 0]}>
		<T.BoxGeometry />
		<T.MeshStandardMaterial color="grey" roughness={0.0}>
			<Sync color roughness metalness />
		</T.MeshStandardMaterial>
	</T.Mesh>
</SheetObject>

Transform コントロール

シーンオブジェクトの Transform をコントロールする場合は、以下の二つを設定する。

<SheetObject> への let:Transform の追加。
<Transform> をコントロールしたいコンポーネントの親コンポーネントとして追加。

Scene.svelte

+<SheetObject key="Sphere" let:Transform>
+	<Transform>
		<T.Mesh position.y={1.2}>
			<T.SphereGeometry />
			<T.MeshStandardMaterial color="grey" roughness={0.0} />
		</T.Mesh>
+	</Transform>
</SheetObject>

要素の一括適用

例えば透過処理設定を内包するコンポーネント全体に対して行いたい場合がある場合、<Declare> 要素を使用する。

Scene.svelte

<SheetObject let:Declare>
  <Declare
    props={{ transparent: false }}
    let:values
  >
    <T.MeshBasicMaterial transparent={values.transparent} />
  </Declare>
</SheetObject>