Svelte で3D表示を行うライブラリ Threlte #1: パッケージの作成とライブラリ概要

はじめに

真っ新な状態で書くのであれば、3D ライブラリのパッケージとして Three.js がある。

そして、例えば、React の場合は react-three-fiber がある。
こういったライブラリは、Three.js の生の状態を書き溜めていくのではなく、React や Svelte の様なコンポーネント運用を前提にライブラリ設計してくれているので、Web アプリとして作っていきたい時やスケールする開発にはとてもありがたい機構だ。

では、Svelte には？という事を調べたとき、いくつか出てくるが、どうやら sveltethree というものがある。だが、これはしばらく更新が止まっている様子だ。

そこでさらに探してみるところ、Threlte というライブラリに行き当たった。
幾つか出てくる中では導入の面構えもよく、かつ、レポジトリを見てみると現時点でも結構活発に更新が入っているようだ。これは今のところ一番よさそうだ。
ということで、これをしばらく試してみたので、基本的な使い方から応用編まで備忘録としてまとめてみる。

環境

• Svelte: 4.2.7
• Threlte(Core): 7.0.12

シリーズ

後日順次展開予定。

• 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 への対応

テンプレートからパッケージを作る

パッケージの作成

プロジェクトの作成方法は、npm create コマンドとして用意されている。

npm create threlte

これだけでテンプレートからライブラリが作成される。

途中 Select Threlte Packages という事で、いくつかの外部パッケージを選択させられるが、とりあえず @threlte/extras だけチェックを入れておけばいいと思う。
（詳しくは後ほど）

もろもろプロンプトに従って実行していくとパッケージが作成される。

開発環境の立ち上げ

パッケージ作成処理が終わったら、いつもの用に開発環境を立ち上げる。

npm run dev

URL 先を立ち上げると、次の用にカメラが回転している状態でのサンプルシーンが作成される。

ライブラリ概要

シーンの構成

Threlte での3Dシーン構成の根幹は、以下の二つの要素から始まる。

• <Canvas>
• <T>

<Canvas>

<Canvas> は、Canvas を構成する一番ベースになる要素。
特にここで特別なことをする必要はないが、必ず必要になるので忘れず定義づけておく。

App.svelte

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

<Canvas>
  <Scene />
</Canvas>

<T>

<T> は、Three.js のあらゆる export 設定されているコンポーネントを Svelte コンポーネントとして扱う。

Scene.svelte

<script lang="ts">
  import { T } from '@threlte/core'
</script>

<!-- パースペクティブカメラを設定 -->
<T.PerspectiveCamera
  makeDefault
  position={[-10, 10, 10]}
  fov={15}
/>

<!-- ディレクショナルライトを設定 -->
<T.DirectionalLight
  intensity={0.8}
  position.x={5}
  position.y={10}
/>

<!-- アンビエントライトを設定 -->
<T.AmbientLight intensity={0.2} />

<!-- メッシュのトランスフォーム（入れもの）を設定 -->
<T.Mesh
position.y={1.2}
position.z={-0.75}
>
  <!-- ボックスジオメトリを設定 -->
  <T.BoxGeometry />
  <!-- マテリアルを設定 -->
  <T.MeshStandardMaterial color="#0059BA" />
</T.Mesh>

この <T.(Three.js コンポーネント)> は、例えば <T.Mesh> の場合以下のようにも書ける。

<T is={Mesh}>
</T>

こう書くときもままあるが、基本的にはドットアノテーションを使った方が分かりやすいので、まずはそちらベースで書いていくのがいいだろう。

@threlte/core

@threlte/core は、Threlte のフレームワーク基盤を構成するパッケージ。
Threlte を使用する際には、まずはこれをインストールすることから始まる。

また、Threlte が隠蔽している Three.js の機能機能 Render や Camera、ToneMapping 等も、ここから提供される hooks を利用してアクセスする。

例えば、Tome Mapping をいじる場合、useThrelte() hooks を使用して次の様にアクセスする。

Scene.svelte

<script lang="ts">
    import { useThrelte } from "@threlte/core"
    import THREE from "three"

    const { toneMapping } = useThrelte()
    toneMapping.set(THREE.LinearToneMapping)
</script>

まぁ、最初のうちはこの core 昨日の深堀をする必要はなく、とりあえず <Canvas> と <T> から Threlte の利用は始まると終えて置けばよいが、より高度に Three.js の機能にアクセスしたり、拡張していく際にはこのパッケージが提供する機能に触れていくことになる、と覚えておけば良いだろう。

まとめ

Threlte の利用は <Canvas> と <T> から始まる。

---

次のシリーズを読む
Svelte で 3D 表示を行うライブラリ Threlte #2: エクストラパッケージを使用する