TresJSとは？Vue向けDeclarative Three.js

ページ内ナビ

概要

TresJS Core 5.9.2はVue custom renderer上でThree.js sceneを構築するframeworkです。TresCanvas配下でThree.js classを<TresMesh>等のVue componentとして扱い、Vueのcomponent/composable modelから3D sceneを記述できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

Three.js classをTres prefixのVue componentとして利用する

Three.js classをTresMesh、TresBoxGeometry等のcomponentとして宣言でき、scene graphをtemplate上で組み立てられます。

出典：[1]

TresCanvasとVue custom rendererで3D scene lifecycleを管理する

TresCanvasをrootとしてVue custom rendererがThree.js object treeを管理し、Vue composableやreactivityと3D renderingを組み合わせられます。

出典：[1][3]

WebGPU判定やportal等の最近のcore featureを利用できる

5.9.0ではWebGPU renderer判定のisWebGPURendererとreactive isWebGPU、MeshPortalMaterial/TresPortalが追加されています。

出典：[6]

向いている用途

Vue teamが3D/WebGL UIを既存component modelで構築したい場合に向く

Three.js imperative APIだけでscene全体を管理する代わりに、Vue component・props・composableへ3D UIを寄せたいprojectに適します。

出典：[1]

導入前の確認

Core 5.9.2はVue >=3.4とThree.js >=0.133を要求する

package metadataはVue >=3.4、Three.js >=0.133をpeer dependencyとして定義しています。またViteではcustom renderer用template compiler optionの設定が推奨されています。

出典：[2][1]

5.9.2はdependency alignment releaseで、5.9.1ではThree.js型互換を修正した

5.9.2は主にeslint configのdependency更新です。直前の5.9.1では@types/three 0.186でmath prop typeが失われる問題を修正しています。

出典：[4][5]

参考にした公式資料

[1]TresJS Core 5.9.2 README(2026-10-05)
[2]@tresjs/core 5.9.2 package metadata(2026-10-05)
[3]TresJS Core public exports(2026-10-05)
[4]TresJS Core 5.9.2 release(2026-10-05)
[5]TresJS Core 5.9.1 release(2026-10-05)
[6]TresJS Core 5.9.0 release(2026-10-05)
[7]TresJS MIT license(2026-10-05)

編集部からの補足

@tresjs/core 5.9.2はVue >=3.4とThree.js >=0.133をpeer dependencyとして要求します。Three.jsの型versionも含めて揃え、custom renderer特有のtemplate compiler設定をVite構成へ反映してください。

3ステップで試す

1
TresJS Core 5.9.2・Vue・Three.jsを固定して導入する
一時npm projectへreview対象のCoreとpeer dependencyを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/tresjs.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @tresjs/core@5.9.2 vue@3.5.43 three@0.186.0
2
package versionを確認する
TresJS、Vue、Three.jsが想定versionで解決されていることを確認します。
test "$(node -e "const fs=require('fs');const v=p=>JSON.parse(fs.readFileSync(p)).version;console.log(v('node_modules/@tresjs/core/package.json')+'/'+v('node_modules/vue/package.json')+'/'+v('node_modules/three/package.json'))")" = '5.9.2/3.5.43/0.186.0'
3
主要Core APIのexportを確認する
browserを起動せず、root canvasとcompiler設定のexportを確認します。
test "$(node --input-type=module -e "import * as T from '@tresjs/core';console.log(['TresCanvas','templateCompilerOptions'].every(k=>k in T))")" = 'true'

公式READMEで確認

成長

成長の推移 · 直近30日

3,750 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 32
Open PR: 10

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

composable
declarative
threejs
vite
vue
webgl
custom-renderer

Stars: 3,750
Forks: 204
Watchers: 16
Open Issues: 91
Contributors: 77
所有者種別: Organization
主要言語: Vue
ライセンス: MIT
リポジトリ最終更新: 2026/10/02