tresjs

TresJS

Three.js で 3D シーンを構築するための Vue 3 フレームワークです。Three.js オブジェクトをラップする宣言的なコンポーネントを提供します。

パッケージ： @tresjs/core（必須）、@tresjs/cientos（ヘルパー）、@tresjs/post-processing（エフェクト）

インストール

# Core (required)
pnpm add three @tresjs/core

# Helpers - controls, loaders, materials, staging
pnpm add @tresjs/cientos

# Post-processing effects
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 の設定、コンポーザブル、イベント、プリミティブ
• 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 と EffectComposerPmndrs の比較、Bloom、glitch、DOF、エフェクトの重ね合わせ

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