Zenn
🐷

ThrelteでThree.jsをもっと簡単に書く

2024/12/19に公開
WebGL
Three.js
Svelte
Astro
threlte
tech

Threlteとは

Threlteは、SvelteでThree.jsの機能を使うことができるフレームワークです。webGLを簡単に書けるThree.jsをさらに簡単に書くことができます。要素をコンポーネントとして扱うことができ、より直感的に3DCGを構築できます。

この記事では、Threlteでどのようなことが可能かを紹介します。

記述の例

はじめに、同じ内容をThree.jsとThrelteとで書いたコードを載せます。
どのくらい簡単になるか理解できると思います。

Three.js

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 15, 10000 );
const controls = new OrbitControls( camera, renderer.domElement );

camera.position.set( 0, 20, 100 );
controls.update();

const geometry = new THREE.SphereGeometry( 1, 1, 1 ); 
const material = new THREE.MeshStandardMaterial({color: 0x6699FF, roughness: 0.5});
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

function animate() {
  requestAnimationFrame( animate );
  controls.update();
  renderer.render( scene, camera );
}

Threlte

<Canvas>
  <T.PerspectiveCamera makeDefault position={[0, 20, 100]} fov={15} far={10000}>
    <OrbitControls enableZoom={true} enableDamping />
  </T.PerspectiveCamera>
  <T.Mesh>
    <T.SphereGeometry />
    <T.MeshStandardMaterial color={#6699FF} roughness={0.1} />
  </T.Mesh>
</Canvas>

開発環境について

Threlte公式の開発環境はSvelteKitを使用してますが、今回はAstro + Svelteの環境にThrelteを追加しました。Svelteはv4、Threlteはv7を使用しています。
Svelteの最新バージョンは5で、Threlteはそれに対応したバージョン8をBeta版としてリリースしているのですが、まだ全て移行していません。追々対応予定です。

以下、制作したデモサイトとGitHubです。
https://ymnkx.github.io/threlte/
https://github.com/ymnkx/threlte

制作したコンテンツ紹介

まずは、シンプルなシーン

DEMO

Threlteを使う時、まずはCanvasを用意し、そのなかにSceneを構築します。

<Canvas>...</Canvas>

このサンプルのSceneの中には、Camere、球体、Sky、Grid、影を含めています。

Camera

<T.PerspectiveCamera makeDefault position={[-15, 2, 15]} fov={15} far={10000}>
  <OrbitControls enableZoom={true} enableDamping target.y={1.5} />
</T.PerspectiveCamera>

球体

<T.Mesh position.y={1.2}>
<T.SphereGeometry />
<T.MeshStandardMaterial roughness={0.1} metalness={1} color="#999999" />
</T.Mesh>

Sky

<Sky azimuth={180} elevation={2} turbidity={10} rayleigh={3} />

Grid

<Grid
  position.y={-0.001}
  cellColor="#000000"
  sectionColor="#ffffff"
  sectionThickness={0}
  fadeDistance={30}
  cellSize={2}
/>

影

<ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />

glTFの表示も簡単

DEMO

glTFは、3Dランタイム向けのファイル形式です。glTFの登場により、モデリングツールやプラットフォームに依存せず、3Dデータがオープンに使用可能になりました。
サンプルには、Three.jsのサンプルデータを使用してます。glTFは、urlを指定するだけで表示可能です（サンプルでは、materialを切り替えるために useGltf を使用してます）

<GLTF url="..." />

カメラをコントロールする

DEMO

Three.jsのカメラの機能でよく使うのは、Perspective CameraとOrbit Controlsです。ユーザーの操作で3Dを動かす事ができるようになります。

<T.PerspectiveCamera makeDefault position={[-30, 0, 0]} fov={15} far={10000}>
  <OrbitControls enableZoom={true} enableDamping />
</T.PerspectiveCamera>

ただ、より自由にカメラを操作したい場合は、camera-controlsを導入すると便利です。Threlteのexampleでも使用しています。サンプルでは camera-controls を導入しています。

ひと通り試す

3Dの代表的な要素である、Geometory、Material、Textureを試しました。コードはGitHubを参照してください。

Geometory

DEMO

Material

DEMO

Texture

DEMO

点で遊ぶ

Points

カオスやバタフライ効果の説明で使われるローレンツアトラクタの式を利用しました。Three.jsのPointsとPointsMaterialを使用して空間に点を配置してます。Points自体は正方形なので、AlphaMapで円形に切り取ってます。

3DGSが面白い！

3DGS

3DGS（Gaussian Splatting）は、写真を元に3Dのシーンやオブジェクトを再構築する技術です。こちらは別の記事で詳しく紹介する予定です。

その他

まとめ

Threlteを使うことで、より簡単にWebサイトで3DCGを扱うことができます。Svelte以外にも同じようなフレームワークがあるので、使い慣れたJSフレームワークに合わせて使ってみてはいかがでしょうか？

JSフレームワーク Three.jsフレームワーク
React react-three-fiber(r3f)
Vue TresJs
Svelte Threlte

Discussion