TresJS

Three.js を使用して 3D シーンを構築する Vue 3 フレームワーク。Three.js オブジェクトをラップする宣言的コンポーネント。

パッケージ: @tresjs/core (必須)、@tresjs/cientos (ヘルパー)、@tresjs/post-processing (エフェクト)

インストール

# Core (必須)
pnpm add three @tresjs/core

# ヘルパー - コントロール、ローダー、マテリアル、ステージング
pnpm add @tresjs/cientos

# ポストプロセッシング エフェクト
pnpm add @tresjs/post-processing

クイックリファレンス

作業内容	ロードするファイル
TresCanvas、useTres、useLoop	references/core.md
コントロール、ローダー、マテリアル	references/cientos.md
Bloom、glitch、DOF エフェクト	references/effects.md
一般的なパターン、レシピ	references/cookbook.md

ファイルのロード

タスクに基づいてロード:

• references/core.md - TresCanvas セットアップ、composables、イベント、プリミティブ
• references/cientos.md - OrbitControls、useGLTF、Environment、マテリアル
• references/effects.md - EffectComposer、bloom、glitch、DOF
• references/cookbook.md - モデルのロード、カメラセットアップ、アニメーション

すべてのファイルを一度にロードしないでください。 関連するものだけをロードしてください。

コアコンセプト

TresCanvas

WebGL レンダラーとシーンを作成するルートコンポーネント:

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>

<template>
  <TresCanvas shadows alpha>
    <TresPerspectiveCamera :position="[5, 5, 5]" />
    <TresMesh>
      <TresBoxGeometry />
      <TresMeshStandardMaterial color="orange" />
    </TresMesh>
    <TresAmbientLight :intensity="0.5" />
    <TresDirectionalLight :position="[3, 3, 3]" :intensity="1" />
  </TresCanvas>
</template>

コンポーネントの命名規則

すべての Three.js クラスは Tres プレフィックス付きの Vue コンポーネントとして利用可能:

• THREE.PerspectiveCamera → <TresPerspectiveCamera />
• THREE.Mesh → <TresMesh />
• THREE.BoxGeometry → <TresBoxGeometry />
• THREE.MeshStandardMaterial → <TresMeshStandardMaterial />

コンストラクタ引数は :args プロップで指定:

<TresPerspectiveCamera :args="[75, 1, 0.1, 1000]" />

リアクティビティ

プロップはリアクティブ - 変更は 3D シーンに反映:

<script setup>
const color = ref('orange')
const position = ref([0, 0, 0])
</script>

<template>
  <TresMesh :position="position">
    <TresMeshStandardMaterial :color="color" />
  </TresMesh>
</template>

Primitive コンポーネント

既存の Three.js オブジェクトを直接インジェクト:

<script setup>
import { useGLTF } from '@tresjs/cientos'
const { scene } = await useGLTF('/model.glb')
</script>

<template>
  <primitive :object="scene" />
</template>

利用可能なガイダンス

references/core.md - TresCanvas プロップ、useTres、useLoop、useGraph、イベント、パフォーマンス

references/cientos.md - OrbitControls、useGLTF、useTexture、Environment、Sky、マテリアル、シェイプ

references/effects.md - EffectComposer vs EffectComposerPmndrs、bloom、glitch、DOF、エフェクトスタッキング

references/cookbook.md - 3D モデルのロード、コントロール付きカメラ、アニメーションループ、ポストプロセッシング