diff --git a/docs/.vitepress/config/index.ts b/docs/.vitepress/config/index.ts index 0a55fb5c3..39abedbc7 100644 --- a/docs/.vitepress/config/index.ts +++ b/docs/.vitepress/config/index.ts @@ -11,6 +11,7 @@ export default defineConfig({ locales: { root: { label: 'English', lang: 'en-US', link: '/', ...enConfig }, es: { label: 'Español', lang: 'es-ES', link: '/es/', ...esConfig }, + ja: { label: '日本語', lang: 'ja-JP', link: '/ja/', ...esConfig } /* zh: { label: '简体中文', lang: 'zh-CN', link: '/zh/', ...zhConfig }, */ }, -}) \ No newline at end of file +}) diff --git a/docs/.vitepress/config/ja.ts b/docs/.vitepress/config/ja.ts new file mode 100644 index 000000000..d89caa9bc --- /dev/null +++ b/docs/.vitepress/config/ja.ts @@ -0,0 +1,147 @@ +import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress' + +export const jaConfig: LocaleSpecificConfig = { + themeConfig: { + editLink: { + pattern: 'https://github.com/tresjs/tres/edit/main/packages/docs/:path', + text: 'このページへの変更を提案する', + }, + sidebar: [ + { + text: 'ガイド', + items: [ + // This shows `/guide/index.md` page. + { text: '紹介', link: '/ja/guide/' }, + { text: 'はじめる', link: '/ja/guide/getting-started' }, + { text: '初めてのシーン', link: '/ja/guide/your-first-scene' }, + { text: 'Nuxt', link: '/ja/guide/nuxt' }, + { text: 'トラブルシュート', link: '/ja/guide/troubleshooting' }, + { text: 'v1からの移行', link: '/ja/guide/migration-guide' }, + ], + }, + { + text: 'API', + items: [ + { text: 'TresCanvas', link: '/ja/api/tres-canvas' }, + { + text: 'インスタンス, 引数やプロパティ', + link: '/ja/api/instances-arguments-and-props', + }, + { + text: 'コンポーザブル', + link: '/ja/api/composables', + }, + { + text: 'イベント', + link: '/ja/api/events', + }, + ], + }, + + { + text: 'Advanced', + + items: [ + { text: 'Extending', link: '/ja/advanced/extending' }, + { text: 'primitive', link: '/ja/advanced/primitive' }, + { + text: '注意事項', + link: '/ja/advanced/caveats', + }, + ], + }, + { + text: 'デバグ', + items: [ + { text: '開発ツール', link: '/ja/debug/devtools' }, + ], + }, + { + text: '使用例', + collapsed: true, + items: [ + { text: '軌道制御', link: '/ja/examples/orbit-controls' }, + { text: '基本アニメーション', link: '/ja/examples/basic-animations' }, + { text: 'グループ', link: '/ja/examples/groups' }, + { text: 'テクスチャを読み込む', link: '/ja/examples/load-textures' }, + { text: 'モデルを読み込む', link: '/ja/examples/load-models' }, + { text: 'テキストを読み込む', link: '/ja/examples/text-3d' }, + { text: '光と影', link: '/ja/examples/lights-shadows' }, + { text: 'シェーダ', link: '/ja/examples/shaders' }, + ], + }, + { + text: 'Directives', + collapsed: true, + items: [ + { text: 'v-log', link: '/ja/directives/v-log' }, + { text: 'v-light-helper', link: '/ja/directives/v-light-helper' }, + { text: 'v-always-look-at', link: '/ja/directives/v-always-look-at' }, + { text: 'v-distance-to', link: '/ja/directives/v-distance-to' }, + ], + }, + { + text: '生態系', + items: [ + { + text: 'Cientos 💛', + link: 'https://cientos.tresjs.org/', + }, + { + text: 'Nuxtモジュール', + link: 'https://github.com/Tresjs/nuxt', + }, + { + text: 'TresLeches 🍰', + link: 'https://tresleches.tresjs.org/', + }, + { + text: '後処理(近々)', + }, + ], + }, + ], + nav: [ + { text: 'ガイド', link: '/ja/guide/' }, + { text: 'API', link: '/ja/api/tres-canvas' }, + /* { text: 'API', link: '/api/' }, + { text: '設定', link: '/config/' }, */ + { + text: 'リソース', + items: [ + { text: 'チーム', link: '/ja/team' }, + { text: 'リリース', link: 'https://github.com/Tresjs/tres/releases' }, + { + text: 'プレーグラウンド', + link: 'https://playground.tresjs.org/', + }, + { + text: 'Github', + link: 'https://github.com/Tresjs/tres/', + }, + { + text: 'Issues', + link: 'https://github.com/Tresjs/tres/issues', + }, + { + text: '生態系', + items: [ + { + text: 'Cientos 💛', + link: 'https://cientos.tresjs.org/', + }, + { + text: 'Nuxtモジュール', + link: 'https://github.com/Tresjs/nuxt', + }, + { + text: 'TresLeches 🍰', + link: 'https://tresleches.tresjs.org/', + }, + ], + }, + ], + }, + ], + }, +} diff --git a/docs/ja/advanced/caveats.md b/docs/ja/advanced/caveats.md new file mode 100644 index 000000000..83ef75e41 --- /dev/null +++ b/docs/ja/advanced/caveats.md @@ -0,0 +1,109 @@ +# 注目 😱 + +Tres.jsの目標は、Vue.jsでThree.jsを使用する簡単な方法を提供し、最高のDXを提供することです。 ただし、注意すべき点がいくつかあります。 + +## ~~HMRとThree.js~~ + +:::info + +**TresJS** v1.7.0 🎉で修正されました。これで、ページをリロードしなくてもHMRを使用できるようになります。🥹 + +::: + +ホットモジュールリプレイスメント(HMR)は、ページをリロードせずにコードを更新できる機能です。 これは開発を大幅に高速化する優れた機能です。 そのため、**TresJS** は[Vite](https://vitejs.dev/)を使用します。 ただし、Three.jsでこれを正しく行うのは非常に複雑です。 + +なぜなら、Tresは宣言的にシーンを設定するからです。 これは、コンポーネントがマウントされるときにインスタンスを作成し、それをシーンに追加することを意味します。複雑なのは、シーンからインスタンスをいつ削除し、いつ追加し直すかを判断することにあります。 + +最小限のクリーンアップ メカニズムが実装されていますが、完全ではありません。 これは、特に[TemplateRefs](https://v3.vuejs.org/guide/component-template-refs.html)経由でインスタンスを参照する場合、変更を正しく確認するためにページをリロードする必要場合があります。 + +```vue + + + +``` + +`TresMeshStandardMaterial`コンポーネントのインスタンスの`color` プロパティを変更すると、変更は適用されますが、回転は機能しなくなります。 これは、インスタンスが削除されて再作成されるためです。 + +:::tip +**経験則**として、加えた変更が表示されない場合はとりあえず一回ページをリロードする必要があります。 +::: + +現在これに対するより良い解決策の開発に取り組んでいます 😁。 これをより最適に解決する方法を見つかった場合は、ぜひ連絡ください。 + +[HMR 廃棄ディスカッション](https://github.com/Tresjs/tres/issues/23) でディスカッションをフォローできます。 + +## リアクティビティー + +リアクティビティーが好きです 💚。Vue.jsの最も強力な機能の1つです。ただし、Three.jsを使用する場合は注意が必要です。 + +Vueの反応性は[プロキシ](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Proxy)に基づいています。 これにより、Vue 3はデータオブジェクトへの変更を自動的に追跡し、データが変更されるたびに対応するDOM要素を更新できるようになります。 + +シーンをレンダリングしてフレーム(60FPS)ごとに更新しているため、1秒あたり60回シーンを更新していることになります。更新されるオブジェクトがリアクティブである場合、Vueはこのオブジェクトを何度でも更新しようとします。それはパフォーマンスに悪影響がありますので、おすすめはしません😅。 + +以下は、プロキシオブジェクトと単純なオブジェクトの使用の違いを示すベンチマークです。 + +
+ プロキシ対単純オブジェクト +
図1 - 1秒あたりの実行数: オブジェクトとプロキシ。
+
+ +出典: [プロキシ対プレーンオブジェクト](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter) + +どうしてもリアクティビティーを使用する必要がある場合は、[shallowRef](https://vuejs.org/api/reactivity-advanced.html#shallowref)を使用してください。 + +`ref()`とは異なり、浅い参照の固有値はそのまま保存され、公開されます。`.value`へのアクセスのみがリアクティブです。出典: [Vue.js ドキュメント](https://vuejs.org/api/reactivity-advanced.html#shallowref) + +### 例 + +❌ 誤 + +```vue + + + +``` + +✅ 正 + +```vue + + + +``` diff --git a/docs/ja/advanced/extending.md b/docs/ja/advanced/extending.md new file mode 100644 index 000000000..4d8437030 --- /dev/null +++ b/docs/ja/advanced/extending.md @@ -0,0 +1,42 @@ +# 継承する 🔌 + +Tres は基本的な機能を提供しますが、サードパーティのエレメントを簡単に追加できます。 + +ほとんどの3Dシーンは基本ライブラリーの一部とならないの`OrbitControls`というものを利用しています。`three/addons/controls/OrbitControls`からインポートしたらご利用可能になります。 + +```js +import { OrbitControls } from 'three/addons/controls/OrbitControls' +``` + +## エレメントを動的に拡張する + +コンポーネントに動的に追加も可能です。 + +```vue {2,3,4,7,13,15} + + +``` diff --git a/docs/ja/advanced/primitive.md b/docs/ja/advanced/primitive.md new file mode 100644 index 000000000..c1caed4a0 --- /dev/null +++ b/docs/ja/advanced/primitive.md @@ -0,0 +1,44 @@ +# プリミティブ + +``コンポーネントは、TresJSの汎用性の高い低レベルコンポーネントであり、これを使用すると、任意のThree.jsオブジェクトを抽象化せずにVueアプリケーションで直接使用できます。Vueの反応性システムとThree.jsのシーングラフの間のブリッジとして機能します。 + +## 使い方 + +```html + + + +``` + +## プロパティーズ + +`object`: プロパティは、three.jsまたはその派生クラスの1つからの`Object3D`オブジェクトを期待します。 ``コンポーネントがレンダリングするメインオブジェクトです。`マテリアル`とともにプロパティに渡されます。 + +## モデルとの使用 + +``コンポーネントは、外部ソースからロードされたモデルなどの複雑なオブジェクトをレンダリングする場合に特に便利です。次の例は、GLTFファイルからモデルをロードし、``コンポーネントを使用してレンダリングする方法を示しています。 + +```html + + + + + + + +``` diff --git a/docs/ja/api/composables.md b/docs/ja/api/composables.md new file mode 100644 index 000000000..c7d8e64d2 --- /dev/null +++ b/docs/ja/api/composables.md @@ -0,0 +1,245 @@ +# コンポーザブル + +Vue 3 [Composition API](https://vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api)を使用すると、コンポーネント間で共有できる再利用可能なロジックを作成できます。 また、コンポーネントで使用できるカスタムフックを作成することもできます。 + +**TresJS**は、このAPIを大いに活用して、アニメーションの作成やシーンとの対話などに使用できる一連の構成可能な関数を作成します。また、Vueコンポーネント(テクスチャ、ローダーなど)だけでは不可能な、より複雑なシーンを作成することもできます。 + +**TresJS**のコアはこれらのコンポーザブルを内部で使用するため、コアが使用するのと同じAPIを使用することになります。たとえば、内部レンダーループで更新する必要があるコンポーネントは、「useRenderLoop」コンポーザブルを使用して、レンダラーがシーンを更新するたびに呼び出されるコールバックを登録します。 + +## useRenderLoop + +`useRenderLoop`コンポーザブルは**TresJS**アニメーションの中核です。ネイティブリフレッシュレートで呼び出されるコールバックを登録できます。これは**TresJS**で最も重要なコンポーザブルです。 + +```ts +const { onLoop, resume } = useRenderLoop(); + +onLoop(({ delta, elapsed, clock }) => { + // 最大60FPSのフレームごとに実行されます (モニターによって異なります) +}); +``` + +::: warning +このコンポーザブルの使用によるパフォーマンスへの影響に注意してください。フレームごとに実行されるため、コールバックに多くのロジックがある場合、アプリのパフォーマンスに影響を与える可能性があります。 特に、リアクティブ状態または参照を更新している場合はそうです。 +::: + +`onLoop`コールバックは、[THREEクロック](https://threejs.org/docs/?q=lock#api/en/core/Clock)に基づいて次のプロパティを持つオブジェクトを受け取ります。 + +- `delta`: 現在のフレームと最後のフレームの間のデルタ時間。最後のフレームからの秒単位の時間です。 +- `elapsed`: レンダリングループの開始からの経過時間。 + +このコンポーザブルは、[vueuse](https://vueuse.org/core/useRafFn/)の`useRafFn` に基づいています。 [@wheatjs](https://github.com/wheatjs)の素晴らしい貢献に感謝します。 + +### レンダリングの前後 + +レンダラーがシーンを更新する前後に呼び出されるコールバックを登録することもできます。たとえばFPSを測定するためにプロファイラーを追加する場合に便利です。 + +```ts +const { onBeforeLoop, onAfterLoop } = useRenderLoop(); + +onBeforeLoop(({ delta, elapsed }) => { + // レンダラーがシーンを更新する前に実行します + fps.begin(); +}); + +onAfterLoop(({ delta, elapsed }) => { + // レンダラーがシーンを更新した後に実行します + fps.end(); +}); +``` + +### 一時停止と再開 + +公開されている`pause`および`resume`メソッドを使用して、レンダリングループを一時停止および再開できます。 + +```ts +const { pause, resume } = useRenderLoop(); + +// レンダリング ループを一時停止します +pause(); + +// レンダリング ループを再開する +resume(); +``` + +また、`isActive`プロパティを使用してレンダー ループのアクティブ状態を取得することもできます。 + +```ts +const { resume, isActive } = useRenderLoop(); + +console.log(isActive); // false + +resume(); + +console.log(isActive); // true +``` + +## useLoader + +「useLoader」コンポーザブルを使用すると、[THREE.js ローダー](https://threejs.org/docs/#manual/en/introduction/Loading-3D-models)を使用してアセットをロードできます。ロードされたアセットを含むPromiseを返します。 + +```ts +import { GLTFLoader } from "three/addons/loaders/GLTFLoader"; + +const { scene } = await useLoader(THREE.GLTFLoader, "path/to/asset.gltf"); +``` + +`useLoader`コンポーザブルはPromiseを返すため、`async/await`または`then/catch`とともに使用できます。コンポーネントで使用している場合は、必ず「Suspense」コンポーネントでラップしてください。詳細については、[サスペンス](https://vuejs.org/guide/built-ins/suspense.html#suspense)を参照してください。 + +```vue + +``` + +## useTexture + +`useTexture`コンポーザブルを使用すると、[THREE.jsテクスチャローダー](https://threejs.org/docs/#api/en/loaders/TextureLoader)を使用してテクスチャをロードできます。ロードされたテクスチャを含むPromiseを返します。 + +```ts +const texture = await useTexture(["path/to/texture.png"]); +``` + +**useTexture** は、次のプロパティを持つオブジェクトも受け入れます。 + +- `map`: オブジェクトの表面に適用される基本的なテクスチャ +- `displacementMap`: オブジェクトの表面に凹凸やくぼみを追加するために使用されるテクスチャ +- `normalMap`: オブジェクトに表面の詳細とシェーディングのバリエーションを追加するために使用されるテクスチャ +- `roughnessMap`: オブジェクトの表面に粗さまたはマット仕上げを追加するために使用されるテクスチャ +- `metalnessMap`: オブジェクトの表面にメタリックな効果を追加するために使用されるテクスチャ +- `aoMap`: アンビエントオクルージョン(他のオブジェクトによって光がブロックされている領域の陰影)をオブジェクトに追加するために使用されるテクスチャです。 +- `alphaMap`: オブジェクトにアルファ(黒い部分を透明としてレンダリング) を追加するために使用されるテクスチャ。このマップを使用するにはマテリアルに`:trasparent="true"`を設定する必要があります +- `matcap`: このテクスチャはマテリアルの色とシェーディングをエンコードします。 + +その場合、ロードされたテクスチャを含むオブジェクトが返されます。 + +```ts +const { + map, + displacementMap, + normalMap, + roughnessMap, + metalnessMap, + aoMap, + alphaMap, + matcap, +} = await useTexture({ + map: "path/to/albedo.png", + displacementMap: "path/to/height.png", + normalMap: "path/to/normal.png", + roughnessMap: "path/to/roughness.png", + metalnessMap: "path/to/metalness.png", + aoMap: "path/to/ambien-occlusion.png", + alphaMap: "path/to/alpha.png", + matcap: "path/to/matcap.png", +}); +``` + +次に、テクスチャをマテリアルにバインドできます。 + +```vue + +``` + +上記のコンポーザブルと同様に、「useTextureコンポーザブルはPromiseを返して、「async/awaitまたは「then/catchで使用できます。コンポーネントで使用している場合は、必ず「Suspenseコンポーネントでラップしてください。 + +## useSeek + +「useSeekコンポーザブルは、複雑なThreeJSシーンとオブジェクトの子グラフを簡単に横断およびナビゲートするためのユーティリティを提供します。特定のプロパティに基づいて子オブジェクトを検索できるようにする4つの関数をエクスポートします。 + +```ts +const { seek, seekByName, seekAll, seekAllByName } = useSeek(); +``` + +シーク関数は3つのパラメータを受け入れます。 + +- `parent`: ThreeJSシーンまたはObject3D。 +- `property`: 検索条件に使用するプロパティ。 +- `value`: 照合するプロパティの値。 + +`seek`および`seekByName`関数はオブジェクトを走査し、指定されたプロパティと値を持つ子オブジェクトを返します。指定されたプロパティと値を持つ子が見つからない場合は、nullを返し、警告をログに記録します。 + +```ts +const carRef = ref(null); + +watch(carRef, ({ model }) => { + if (model) { + const car = model.children[0]; + + const body = seek(car, "name", "Octane_Octane_Body_0"); + body.color.set(new Color("blue")); + } +}); +``` + +同様に、`seekAll`および`seekAllByName`関数は、プロパティに指定された値が含まれる子オブジェクトの配列を返します。一致するものが見つからない場合は、空の配列が返され、警告がログに記録されます。 + +```ts +const character = ref(null); + +watch(character, ({ model }) => { + if (model) { + const bones = seekAll(character, type, "Bone"); + } +}); +``` + +## useTresContext + +このコンポーザブルは、複数の有用なプロパティを含む状態モデルへのアクセスを提供することを目的としています。 + +```ts +const { camera, renderer, camera, cameras } = useTresContext(); +``` + +::: warning +`TresCanvas`はコンテキストデータのプロバイダーとして機能するため、`useTresContext`は`TresCanvas`内でのみ使用できます。TresCanvasの親コンポーネンで必要な場合は、[TresCanvasによって公開されるコンテキスト](tres-canvas#exused-public-properties)を使用してください。 +::: + +```vue + + + +``` + +```vue +// MyModel.vue + + +``` + +### コンテキストのプロパティ + +| プロパティ | 説明 | +| -------------------- | -------------------------------------------------------------------------------------------------------------------------- | +| **camera** | 現在アクティブなカメラ | +| **cameras** | シーンに存在するカメラ | +| **controls** | The controls of your scene | +| **deregisterCamera** | カメラの登録を解除する方法。 カメラを手動で作成する場合にのみ必要です。 テンプレート内のカメラは自動的に登録解除されます。 | +| **extend** | コンポーネントカタログを拡張します。[拡張](/advanced/extending)を参照してください。 | +| **raycaster** | ポインターイベントに使用されるグローバルレイキャスター | +| **registerCamera** | カメラを登録する方法です。カメラを手動で作成する場合にのみ必要です。テンプレート内のカメラは自動的に登録されます。 | +| **renderer** | シーンの[WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer) | +| **scene** | [シーン](https://threejs.org/docs/?q=sce#api/en/scenes/Scene)。 | +| **setCameraActive** | カメラをアクティブに設定する方法 | +| **sizes** | キャンバスの幅、高さ、アスペクト比が含まれます | diff --git a/docs/ja/api/events.md b/docs/ja/api/events.md new file mode 100644 index 000000000..82c631643 --- /dev/null +++ b/docs/ja/api/events.md @@ -0,0 +1,27 @@ +# イベント + +**TresJS**コンポーネントは、操作時にポインターイベントを生成します。[THREE.Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D)から派生したthree.jsクラスを表すコンポーネントの場合に当てはまります (例: メッシュ、グループなど)。 + + + +## ポインタイベント + +```html + +``` + +| イベント | 実行条件 ... | イベント ハンドラ パラメータのタイプ | +| ------------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| click   | 同じオブジェクトに対してイベントpointerdownとpointerupが次々に起動される | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| pointer-move | ポインタがオブジェクトの上を移動している | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| pointer-enter | ポインタがオブジェクトに入っています | [Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16), [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | +| pointer-leave | ポインタがオブジェクトから離れます | [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent) | + +返された[Intersection](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/core/Raycaster.d.ts#L16)には、[Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D)がイベントをトリガーしたものです。「intersection.object」経由でアクセスできます。 + +デフォルトでは、イベントハンドラーを使用して他のオブジェクトの前に配置されたオブジェクトは、イベントのトリガーを妨げません。この動作は、プロップ`blocks-pointer-events`を使用することで実現できます。 diff --git a/docs/ja/api/instances-arguments-and-props.md b/docs/ja/api/instances-arguments-and-props.md new file mode 100644 index 000000000..c9e1d59f4 --- /dev/null +++ b/docs/ja/api/instances-arguments-and-props.md @@ -0,0 +1,144 @@ +# インスタンス + +**Trees**の中心となるアイデアは、3つのJS要素すべての自動生成されたカタログです。このカタログはThreeJSソース コードから生成されているため、常に最新です。 + +ThreeJSを使用する場合は、使用する要素をインポートする必要があります。たとえば、`PerspectiveCamera`を使用したい場合は、`three`パッケージからインポートする必要があります。 + +```js +import { PerspectiveCamera } from "three"; + +const camera = new PerspectiveCamera(45, width / height, 1, 1000); +``` + +**Tres**を使用すると、何もインポートする必要はありません。**Tres**は、キャメルケースで使用したい3つのオブジェクトに基づいて、Tresプレフィックス**を付けて**Vueコンポーネントを自動的に生成するためです。たとえば、`PerspectiveCamera`を使用したい場合は、``コンポーネントを使用します。 + +```vue + +``` + +つまり、プレーンなThreeJSを使用する場合と同じ[ドキュメント](https://threejs.org/docs/)を、Vueの機能を利用して使用できることを意味します。 + +## オブジェクトの宣言 + +この議論に従うと、次のようにインスタンスをレイアウトできるはずです。 ❌ + +```vue + +``` + +しかし、**Tres**ではこれは必要ありません。次のように宣言的にプロパティを定義できます。 ✅ + +```vue + +``` + +## 引数 + +一部のThreeJSオブジェクトには引数があります。たとえば、`PerspectiveCamera`コンストラクターには次の引数があります。 + +- `fov` - カメラの錐台の垂直視野 +- `aspect` - カメラの錐台のアスペクト比 +- `near` - 平面近くのカメラ錐台 +- `far` - カメラ錐台の遠方平面 + +これらの引数を`TresPerspectiveCamera`コンポーネントに渡すには、`args`プロパティを使用できます。 + +```vue + +``` + +これを行うと同じです: + +```ts +const camera = new PerspectiveCamera(45, 1, 0.1, 1000); +``` + +## Props (プロパティーズ) + +プロパティをコンポーネントに渡すこともできます。たとえば、`TresAmbientLight`には`intensity`プロパティがあるため、次のようにコンポーネントに渡すことができます。 + +```html + +``` + +### Set + +基礎となるオブジェクトに`.set()`メソッドがあるすべてのプロパティには、値を配列として受け取るためのショートカットがあります。たとえば、「TresPerspectiveCamera」には「Vector3」オブジェクトである「position」プロパティがあるため、次のようにコンポーネントに渡すことができます。 + +```html + +``` + +位置、回転、スケールなどの変換プロパティを指定するには、プロップ内で設定する軸を直接指定できる省略表現を使用できます。同様の省略表現がcolorプロパティにも使用できます。 + + + +```html + + + +``` + +::: warning +[three.js](https://threejs.org/docs/index.html#api/en/math/Euler)で回転プロパティを設定すると、デフォルトで「XYZ」順序が使用されます。速記法を使用して回転プロパティを設定する場合、角度を設定する順序が重要であることに注意することが重要です。詳細については、[オイラー角](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%82%A4%E3%83%A9%E3%83%BC%E8%A7%92)を参照してください。 +::: + +```vue + + + + + +``` + +### スカラー + +使用できる別のショートカットは、ベクターの残りの部分に同じ値を使用して、`Vector3`オブジェクトを予期するプロパティにスカラー値を渡すことです。 + +```html + ✅ +``` + +```html + ✅ +``` + +### カラー + +`color`プロパティを使用してコンポーネントに色を渡すことができます。プロパティは、色の名前またはhexの値を含む文字列を受け入れます。 + +```html + ✅ +``` + +```html + ✅ +``` + +### メソッド + +基礎となるプロパティの一部は実際にはメソッドであり、`TresPerspectiveCamera`には[Object3d](https://threejs.org/docs/#api/en/core/Object3D.lookAt)から継承した`lookAt`メソッドがあるため、渡すことができます。コンポーネントへの座標は次のようになります。 + +```html + +``` diff --git a/docs/ja/api/tres-canvas.md b/docs/ja/api/tres-canvas.md new file mode 100644 index 000000000..af61a4881 --- /dev/null +++ b/docs/ja/api/tres-canvas.md @@ -0,0 +1,104 @@ +# TresCanvas + +`TresCanvas`コンポーネントはTresの主要コンポーネントです。ThreeJSの`WebGLRenderer`を作成するものです。 + +```vue{2,5} + +``` + +## キャンバスサイズ + +`TresCanvas`コンポーネントは、親要素のサイズをキャンバスサイズとして使用します。ウィンドウサイズをキャンバスサイズとして使用したい場合は、`window-size`プロパティを`true`に設定します。 + +```vue + +``` + +また、CSSを使用してキャンバスのサイズを設定することもできます。 + +```css +html, +body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +#canvas { + height: 100%; + width: 100%; +} +``` + +## プリセット + +Tresには、「TresCanvasコンポーネント用のいくつかのプリセットが付属しています。`preset`プロパティを設定することで使用できます。 + +### Realistic + +「realistic」プリセットを使用すると、より現実的な3Dシーン用にレンダラーを簡単にセットアップできます。 + +```vue + +``` + +以下と同等です: + +```ts +renderer.shadows = true; +renderer.physicallyCorrectLights = true; +renderer.outputColorSpace = SRGBColorSpace; +renderer.toneMapping = ACESFilmicToneMapping; +renderer.toneMappingExposure = 3; +renderer.shadowMap.enabled = true; +renderer.shadowMap.type = PCFSoftShadowMap; +``` + +## Props (プロパティーズ) + +| プロパティ | 説明 | デフォルト | +| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | +| **alpha** | デフォルトのクリアアルファ値を制御します。trueに設定すると、値は0になります。それ以外の場合は1になります。 | false | +| **antialias** | アンチエイリアスを実行するかどうか。 | `true` | +| **camera** | レンダラーによって使用される手動カメラ。 | | +| **clearColor** | レンダラーがキャンバスをクリアするために使用する色。 | `#000000` | +| **context** | レンダラを既存の[RenderingContext](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext)に紐つくこと可能です。 | | +| **depth** | 描画バッファーに少なくとも16ビットの[深度バッファー](https://ja.wikipedia.org/wiki/Z%E3%83%90%E3%83%83%E3%83%95%E3%82%A1)があるかどうか。  |  `true` | +| **disableRender** | requestAnimationFrameでのレンダリングを無効にする(後処理に便利) | `false` | +| **failIfMajorPerformanceCaveat** | パフォーマンスが低い場合にレンダラーの作成が失敗するかどうかが検出されます。 詳細については、[WebGL仕様](https://registry.khronos.org/webgl/specs/latest/1.0/#5.2)を参照してください。 | `false` | +| **logarithmicDepthBuffer** | 対数深度バッファを使用するかどうか。1つのシーン内でスケールの大きな違いを扱う場合は、これを使用する必要がある場合があります。 この設定は、利用可能な場合はgl_FragDepthを使用します。これにより、[Early Fragment Test](https://www.khronos.org/opengl/wiki/Early_Fragment_Test) の最適化が無効になり、パフォーマンスが低下する可能性があることに注意してください。 | `false` | +| **outputColorSpace** | 出力エンコーディングを定義します | `LinearEncoding` | +| **powerPreference** | このWebGLコンテキストに適したGPUの構成を示すヒントをユーザー エージェントに提供します。 「high-performance」、「low-power」、または「default」のいずれかになります。 | `default` | +| **precision** | シェーダーの精度。 「highp」、「mediump」、または「lowp」を指定できます。 | デバイスでサポートされている場合は「highp」 | +| **premultipliedAlpha** | レンダラーが色に [事前乗算されたアルファ](https://en.wikipedia.org/wiki/Glossary_of_computer_graphics#premultiplied_alpha) があると想定するかどうか。 | `true` | +| **preserveDrawingBuffer** | 手動でクリアまたは上書きされるまでバッファを保持するかどうか。 | `false` | +| **shadows** | レンダラーでシャドウを有効にする | `false` | +| **shadowMapType** | シャドウマップタイプを設定する | `PCFSoftShadowMap` | +| **stencil** | 描画バッファーに少なくとも 8 ビットの [ステンシル バッファー](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%86%E3%83%B3%E3%82%B7%E3%83%AB%E3%83%90%E3%83%83%E3%83%95%E3%82%A1) があるかどうか。 | `true` | +| **toneMapping** | レンダラーによって使用されるトーン マッピング露出を定義します。 | `NoToneMapping` | +| **toneMappingExposure** | トーンマッピングの露出レベル。 | `1` | +| **useLegacyLights** | 従来の照明モードを使用するかどうか | `true` | +| **windowSize** | ウィンドウ サイズをキャンバス サイズとして使用するか、親要素として使用するか。 | `false` | + +### デフォルト + +Tresはできる限り自分の意見を言わないように努めています。そのため、`TresCanvas`コンポーネントにはほとんどデフォルト値が設定されません。[three.js](https://threejs.org/)のデフォルトを使用します。唯一の例外は「antialias」プロップです。デフォルトでは「true」に設定されています。 + +## 公開された公共プロパティ + +| プロパティ | 説明 | +| ---------- | ---------------------------------------------------------------- | +| context | [useTresContext](composables#usetrescontext)を参照してください。 | diff --git a/docs/ja/cookbook/basic-animations.md b/docs/ja/cookbook/basic-animations.md new file mode 100644 index 000000000..f5e5366ab --- /dev/null +++ b/docs/ja/cookbook/basic-animations.md @@ -0,0 +1,93 @@ +--- +title: 基本アニメーション +description: useRenderLoopというコンポーザブルを使用してオブジェクトをアニメーション化する方法。 +author: alvarosabu +thumbnail: /recipes/animations.png +difficulty: 0 +--- + +# 基本アニメーション + +このガイドは、TresJSでの基本的なアニメーションの開始に役立ちます。 + +キューブを使った簡単なシーンを構築します。次に、キューブをY軸とZ軸を中心に回転するようにアニメーション化します。 + + + +## useRenderLoop + +`useRenderLoop`コンポーザブルはTresJSアニメーションの中核です。これにより、レンダラーがブラウザのリフレッシュレートでシーンを更新するたびに呼び出されるコールバックを登録できます。 + +詳細な説明については、[useRenderLoop](/api/composables#userenderloop)のドキュメントを参照してください。 + +```ts +const { onLoop } = useRenderLoop(); + +onLoop(({ delta, elapsed }) => { + // 毎フレーム60FPSで実行します(モニターによって異なります) +}); +``` + +## キューブへの参照を取得する + +キューブをアニメーション化するには、その参照を取得する必要があります。これは、`ref`プロパティを使用して[テンプレート参照](https://vuejs.org/guide/essentials/template-refs.html)を`TresMesh`コンポーネントに渡すことで実行できます。これにより、THREEインスタンスが返されます。 + +パフォーマンスを向上させるために、通常のRefの代わりに[Shallow Ref](https://v3.vuejs.org/guide/reactivity-fundamentals.html#shallow-reactivity)を使用して参照を保存します。理由については[こちら](../advanced/caveats.md#reactivity)を参照してください。 + +```vue + + + +``` + +## キューブのアニメーション化 + +キューブへの参照ができたので、アニメーション化できます。`onLoop`コールバックを使用して、キューブの回転を更新します。 + +```ts +onLoop(({ delta, elapsed }) => { + if (boxRef.value) { + boxRef.value.rotation.y += delta; + boxRef.value.rotation.z = elapsed * 0.2; + } +}); +``` + +内部の[THREEクロック](https://threejs.org/docs/?q=clock#api/en/core/Clock)の`delta`または`elapsed`を使用してキューブをアニメーション化することもできます。 + +## なぜreactivityを使用しないのか? + +キューブをアニメーション化するのにリアクティブ性を使用しないのはなぜかと疑問に思うかもしれません。答えは簡単にパフォーマンスです。 + +```vue +// これはダメです ❌ + +``` + +キューブをアニメーション化するためにリアクティブを使用する誘惑に駆られるかもしれませんが、それは良い考えではありません。その理由は、[Vueのリアクティブはプロキシに基づいている](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vue)ため、1秒あたり60回以上更新されるレンダリング ループで使用するように設計されていないためです。 + +下記のページでは、[プロキシと通常のオブジェクトのベンチマーク](https://measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)が表示されています。ご覧のとおり、プロキシは通常のオブジェクトよりも5倍遅いです。 + + + +詳細については、[注意事項](../advanced/caveats.md#reactivity)セクションをご覧ください。 diff --git a/docs/ja/cookbook/groups.md b/docs/ja/cookbook/groups.md new file mode 100644 index 000000000..85e6ff194 --- /dev/null +++ b/docs/ja/cookbook/groups.md @@ -0,0 +1 @@ +# WIP diff --git a/docs/ja/cookbook/lights-shadows.md b/docs/ja/cookbook/lights-shadows.md new file mode 100644 index 000000000..85e6ff194 --- /dev/null +++ b/docs/ja/cookbook/lights-shadows.md @@ -0,0 +1 @@ +# WIP diff --git a/docs/ja/cookbook/load-models.md b/docs/ja/cookbook/load-models.md new file mode 100644 index 000000000..85e6ff194 --- /dev/null +++ b/docs/ja/cookbook/load-models.md @@ -0,0 +1 @@ +# WIP diff --git a/docs/ja/cookbook/load-textures.md b/docs/ja/cookbook/load-textures.md new file mode 100644 index 000000000..85e6ff194 --- /dev/null +++ b/docs/ja/cookbook/load-textures.md @@ -0,0 +1 @@ +# WIP diff --git a/docs/ja/cookbook/orbit-controls.md b/docs/ja/cookbook/orbit-controls.md new file mode 100644 index 000000000..85e6ff194 --- /dev/null +++ b/docs/ja/cookbook/orbit-controls.md @@ -0,0 +1 @@ +# WIP diff --git a/docs/ja/cookbook/shaders.md b/docs/ja/cookbook/shaders.md new file mode 100644 index 000000000..85e6ff194 --- /dev/null +++ b/docs/ja/cookbook/shaders.md @@ -0,0 +1 @@ +# WIP diff --git a/docs/ja/cookbook/text-3d.md b/docs/ja/cookbook/text-3d.md new file mode 100644 index 000000000..85e6ff194 --- /dev/null +++ b/docs/ja/cookbook/text-3d.md @@ -0,0 +1 @@ +# WIP diff --git a/docs/ja/debug/devtools.md b/docs/ja/debug/devtools.md new file mode 100644 index 000000000..9c13c3b1b --- /dev/null +++ b/docs/ja/debug/devtools.md @@ -0,0 +1,26 @@ +# 開発ツール + +ブラウザ上で3Dエクスペリエンスを作成するときに開発者が直面する最も難しいことの1つはデバッグです。ブラウザ「キャンバス」はブラックボックスみたいであり、内部で何が起こっているのかを知るのは困難です。[ThreeJS](https://threejs.org/)の命令的な性質により、デバッグが非常に困難になり、何が起こっているかを確認するには「console.log」に依存するか、シーンを微調整して検査するにはサードパーティに依存する必要があります。 + +そして、パフォーマンスの計測はそれ以上難しいです。 😱 + +![developer debugging 3D](/debug-3D.png) + +TresJSの目標の1つは、ブラウザ上で3Dシーンを扱うときに**最高の DX (開発者エクスペリエンス)**を提供することです。エコシステムの宣言的な性質に加え、Vue Devtools、Nuxt、ViteなどのVueエコシステムが提供するさまざまなソリューションのおかげで、開発者がシーンをデバッグするためのより良いツールを提供できます。 + +## 開発ツールの紹介 + +から、[公式Vue Chrome Devtools](https://devtools.vuejs.org/guide/installation.html)のカスタマイズされたインスペクター タブであるTresJS Devtoolsが導入されています。TresJSシーンとコンポーネントを検査できます。 + +![TresJS開発ツール](/vue-chrome-devtools.png) + +### 機能 + +- **シーン インスペクター**: Vue Devtoolsコンポーネントインスペクターと同様のツリー ビューを使用して、現在のシーンとそのコンポーネントを検査します。 +- **メモリ割り当て**: コンポーネントによって消費されているメモリの量を確認します。 +- **オブジェクト インスペクター**: シーン内で選択したオブジェクト (その子を含む)のプロパティを検査します。 +- **編集可能なプロパティ**: 選択したオブジェクトのプロパティを編集し、その変更をリアルタイムで確認できます。 + +![](/devtools-scene-inspector.png) + +新しいDevtoolsを楽しく試してみて、ご意見をお聞かせください。 🎉 diff --git a/docs/ja/directives/v-always-look-at.md b/docs/ja/directives/v-always-look-at.md new file mode 100644 index 000000000..1d07affbf --- /dev/null +++ b/docs/ja/directives/v-always-look-at.md @@ -0,0 +1,60 @@ +# v-always-look-at 👀 + +**TresJS**が提供する新しいディレクティブv-always-look-atを使用すると、[Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D)コマンドを簡単に追加できます。常に特定の位置を確認するには、Vector3またはArrayとして渡すことができます。 + +## 使い方 + +```vue{3,9} + + +``` + +`Box`がどこに移動しても、常に位置[0,0,0]を参照します。 + +### 組み込みメソッドのlook-atを使用してみてはいかがでしょうか? + +メソッド`:look-at`を使用すると、インスタンスがマウントされるときにその位置を1回だけ見るように指示するため、オブジェクトが変更されても更新されないということです。 + +### 他のインスタンスも見ることができます + +もう1つの利点は、次のように、たとえばカメラを使用して、動いているインスタンスを見ることができることです。 + +```vue{4,6,20,23} + + +``` diff --git a/docs/ja/directives/v-distance-to.md b/docs/ja/directives/v-distance-to.md new file mode 100644 index 000000000..ba91930d7 --- /dev/null +++ b/docs/ja/directives/v-distance-to.md @@ -0,0 +1,36 @@ +# v-distance-to + +2つのObject3D間の距離を計算しようとしたことがありますか? + +新しいディレクティブ`v-distance-to`を使用すると、これまでよりも簡単になり、測定を実行するターゲット オブジェクトを指定するだけで、結果がコンソールに表示されます。 + +さらに、測定しているオブジェクトを示す矢印が作成されます。 + +```vue{2,8,13} + + +``` + +`v-distance-to`の使用はリアクティブなので、`@tres/leches`と完全に連携します。 🍰 + +::: warning +`v-distance-to`は、renderLoop内で移動するオブジェクトを測定しません。 +::: diff --git a/docs/ja/directives/v-light-helper.md b/docs/ja/directives/v-light-helper.md new file mode 100644 index 000000000..7be2c5ddc --- /dev/null +++ b/docs/ja/directives/v-light-helper.md @@ -0,0 +1,35 @@ +# v-light-helper 🔆 + +**TresJS**が提供する新しいディレクティブv-light-helperを使用すると、たった1行のコードでヘルパーをライトにすばやく追加できます。😍 + +次のライトの種類を使うことができます。 + +- DirectionalLight +- PointLight +- SpotLight +- HemisphereLight + +## 使い方 + +```vue{2,8,11,14,17} + + +``` diff --git a/docs/ja/directives/v-log.md b/docs/ja/directives/v-log.md new file mode 100644 index 000000000..f88886bf3 --- /dev/null +++ b/docs/ja/directives/v-log.md @@ -0,0 +1,50 @@ +# v-log + +### 問題 + +インスタンスをログに記録する必要がある場合は、テンプレート参照を使用してログを記録する必要があります。 + +```vue + + + +``` + +単純なログのためだけに、これは膨大なコードだと思いませんか? + +## 使い方 + +**TresJS**が提供する新しいディレクティブv-logを使用すると、インスタンスに`v-log`を追加するだけで行うことができます。 + +```vue{2,10,12} + + +``` + +`v-log:material`などのプロパティの名前を持つ修飾子を渡すことができ、これにより`material`プロパティが直接ログに記録されること可能です。 😍 diff --git a/docs/ja/guide/getting-started.md b/docs/ja/guide/getting-started.md new file mode 100644 index 000000000..e62f7c5a9 --- /dev/null +++ b/docs/ja/guide/getting-started.md @@ -0,0 +1,92 @@ +# インストール + +TresJSのインストール方法は以下のようになります。 + +::: code-group + +```bash [pnpm] +pnpm add three @tresjs/core +``` + +```bash [npm] +npm install three @tresjs/core +``` + +```bash [yarn] +yarn add three @tresjs/core +``` + +::: + +> Vue 3.xとComposition APIがおすすめです。 + +## Typescript + +TresJSはTypescriptで書かれており、完全に型指定されています。 型指定がご利用には、必ずThreeの型宣言をインストールしてください。 + +::: code-group + +```bash [npm] +npm install @types/three -D +``` + +```bash [yarn] +yarn add @types/three -D +``` + +```bash [pnpm] +pnpm add @types/three -D +``` + +::: + +## 始める + +ほかのVueプラグインと同じようにTresJSをインストールができます。 + +```ts +import { createApp } from "vue"; +import Tres from "@tresjs/core"; +import App from "./App.vue"; + +export const app = createApp(App); + +app.use(Tres); +app.mount("#app"); +``` + +直接コンポーネント内使用することもできます。 + +```vue + + +``` + +::: tip +ツリーシェイキングがより効果的に機能し、使用するコンポーネントのみをインポートするため、パフォーマンスとパッケージサイズの理由からこれをお勧めします。 +::: + +## Vite + +バージョン2はカスタム レンダラーであるため、「[Vue warn]: Failed to resolve component」という警告を回避するには、アプリケーションの「vue-compiler」にTresコンポーネントを含めることができるように指示する必要があります。 + +以下のをVueプラグイン内の`vite.config.ts`ファイルに追加するだけで大丈夫です。 + +```ts +import { templateCompilerOptions } from "@tresjs/core"; + +export default defineConfig({ + plugins: [ + vue({ + // その他設定 + ...templateCompilerOptions, + }), + ], +}); +``` diff --git a/docs/ja/guide/index.md b/docs/ja/guide/index.md new file mode 100644 index 000000000..889852850 --- /dev/null +++ b/docs/ja/guide/index.md @@ -0,0 +1,112 @@ +# 導入 + + +
+ +
+
+ +::: code-group + +```bash [npm] +npm install @tresjs/core three +``` + +```bash [yarn] +yarn add @tresjs/core three +``` + +```bash [pnpm] +pnpm add @tresjs/core three +``` + +::: + +## Typescript + +TresJSはTypescriptで書かれており、完全に型指定されています。Typescriptを使用している場合は、入力の利点を最大限に活用できます。 必ずthreeのタイプをインストールしてください。 + +::: code-group + +```bash [npm] +npm install @types/three -D +``` + +```bash [yarn] +yarn add @types/three -D +``` + +```bash [pnpm] +pnpm add @types/three -D +``` + +::: + +## Vite + +Viteを使用している場合は、TresJSから`templateCompilerOptions`をvueプラグイン内の`vite.config.ts`にインポートして追加するだけです。 + +```ts +import { templateCompilerOptions } from '@tresjs/core' + +export default defineConfig({ + plugins: [ + vue({ + // その他設定 + ...templateCompilerOptions + }), + ], +}), +``` + +テンプレートコンパイラがカスタムレンダラーと連携してコンソールに警告を表示しないようにするために必要です。詳細については、[こちら](/ja/guide/troubleshooting.html)を確認してください。 + +## オンラインで試してみる + +### Playground + +公式[Playground](https://play.tresjs.org/)を使用して、TresJSをオンラインで試すことができます。 + + + +### StackBlitz + +TresJSをオンラインで試すための[StackBlitz](https://stackblitz.com/)スターターを用意しました。 + +![](/stackblitz-starter.png) + +## ショーケース + +TresJSで作成されたサンプルのショーケースもあります。[こちら](https://playground.tresjs.org/)をチェックしてください。 + +![](/tresjs-lab.png) + +## Tresを作った理由 + +[ThreeJS](https://threejs.org/) は、**WebGL**で3D Webサイトを作成するための素晴らしいライブラリです。常に更新されるライブラリでもあるため、[TroisJS](https://troisjs.github.io/) のようなラッパーメンテナーがすべての機能強化に追いつくのは困難です。 + +Reactエコシステムには、[React-three-fiber](https://docs.pmnd.rs/react-three-fiber)と呼ばれる印象的な **カスタムレンダリング**ソリューションがあり、再利用可能で宣言的にシーンを構築できます。状態に反応する自己完結型コンポーネントです。 + +VueJSエコシステムで同様のものを探していたところ、[Lunchbox](https://github.com/breakfast-studio/lunchboxjs)というライブラリを見つけました。 +R3Fと同じコンセプトで動作し、[カスタムVue3レンダラー](https://vuejs.org/api/custom-renderer.html)。ライブラリがR3Fと同じように成熟して機能が豊富になるように、ライブラリの改善にも貢献しています。 + +これに関する唯一の問題は、Vue 3でコンパイラーレンダラーを混合することは、Vueコミュニティがまだ取り組んでいることです。詳細については、[こちら](https://github.com/vuejs/vue-loader/pull/1645)を参照してください。 + +```ts +// Viteセットアップ例 +import { createApp } from "vue"; +import { createApp as createLunchboxApp } from "lunchboxjs"; +import App from "./App.vue"; +import LunchboxApp from "./LunchboxApp.vue"; + +// アプリをマウント +const app = createApp(App); +app.mount("#app"); + +// ランチボックスアプリ +const lunchboxApp = createLunchboxApp(LunchboxApp); +// HTMLにIDが「lunchbox」の要素があると仮定します +lunchboxApp.mount("#lunchbox"); +``` + +両方のライブラリからインスピレーションを得て、ThreeJS用のVueカスタムレンダラーを作成しました。それが **TresJS v2** となりました。 diff --git a/docs/ja/guide/migration-guide.md b/docs/ja/guide/migration-guide.md new file mode 100644 index 000000000..a7835fe1f --- /dev/null +++ b/docs/ja/guide/migration-guide.md @@ -0,0 +1,224 @@ +# マイグレーションガイド + +このガイドは、TresJSのv1から最新バージョンへの移行を支援することを目的としています。🤩✨. + +::: code-group + +```bash [pnpm] +pnpm update @tresjs/core +``` + +```bash [npm] +npm update @tresjs/core +``` + +```bash [yarn] +yarn upgrade @tresjs/core +``` + +::: + +## 変わったこと + +### Vueカスタムレンダラー + +**TresJS**は[Vue Custom Renderer](https://vuejs.org/api/custom-renderer.html#creatorenderer) 🎉 になり、`WebGLRenderer`と`Scene`を使用して、シーンをレンダリングするための**新しいVueアプリインスタンス**を作成します。 + +### TypescriptのサポートとIntellisense 🦾 + +![TresJS Intellisense](/v2-intellisense.gif) + +TresJSで最も**リクエストの多かった機能**でした。TresコンポーネントはVolarと連携して動作し、タイプ インテリセンスを提供するようになりました。 + +**TresJS**は、ThreeJSのカタログに基づいてすべてのコンポーネントのビルド時に型宣言を生成するようになりました。ThreeJSのすべてのコンポーネントを使用し、コンポーネントに対してタイプインテリセンスが提供されると意味します。 + +### Tresプラグインはオプションです 👍 + +`TresPlugin`はオプションになりました。`tresjs/core`からコンポーネントを直接インポートすることで、TresJSを使用せずにTresJSを使用できます。 + +```vue + + + +``` + +::: info +パフォーマンスとバンドルサイズの理由から推奨されます。ツリーシェイキングがより適切に機能し、使用するコンポーネントのみをインポートします。 +::: + +### TresSceneは不要になりました + +シーンが `` によって作成されるようになったため、``コンポーネントは非推奨になりました。 + +当初は、冗長性の観点からシーンに別のコンポーネントを用意し、プレーンな ThreeJSと同様に保つのが良いアイデアだと考えていましたが、実際には役に立たないことがわかりました。 + +次のようなシーンを作成できるようになりました。 + +```vue + +``` + +コードを移行するには、``コンポーネントを削除し、子を``コンポーネントに移動するだけです。 + +### `useCatalog`は非推奨になりました + +`useCatalog`関数は現在非推奨です。`@tresjs/core`からカタログを直接インポートできるようになりました。詳細については、こちらをご覧ください: [拡張](/advanced/extending.md) + +以下のようのコードを + +```ts {2,5,7} +// 誤 ❌ +import { useCatalog } from "@tresjs/core"; +import { TextGeometry } from "three/addons/geometries/TextGeometry"; + +const { extend } = useCatalog(); + +extend({ TextGeometry }); +``` + +これに変更してください。 + +```ts {2,6} +// 正 ✅ +import { extend } from "@tresjs/core"; +import { TextGeometry } from "three/addons/geometries/TextGeometry"; + +// エレメントをカタログに追加する +extend({ TextGeometry }); +``` + +### モデルの`ref`値の`getModel`は非推奨になりました + +`getModel`関数は現在非推奨です。`model`プロパティを直接使用できるようになりました。 + +以下のようのコードを + +```vue {7,9-12} +// 誤 ❌ + + +``` + +これに変更してください。 + +```vue {7,9-12} +// 正 ✅ + + +``` + +### カメラはコントロールの前にある必要があります 🎥 + +`TresOrbitControls`コンポーネントはツリー内のカメラの後にある必要があります。コントロールが機能するためにカメラを認識する必要があるためです。 + +以下のようのコードを + +```vue {3,5} +// 誤 ❌ + +``` + +これに変更してください。 + +```vue {3,5} +// 正 ✅ + +``` + +## UseTresはuseTresContextになりました + +v3では、プラグイン作成者やエコシステムパッケージがより柔軟で使いやすいように、状態ロジック全体を作り直しました。v2のようなストアを使用する代わりに、`provide/inject`に基づくコンテキスト プロバイダーを使用するようになりました。 + +`useTres`関数は、デモや実験の中断を避けるために`useTresContext`関数のエイリアスになりましたが、今後は`useTresContext`の使用を検討してください。 + +大きなリアクティブオブジェクトの代わりに、他のプロパティ間の`scene`参照と`renderer`参照を直接取得できるようになります。 + +以下のようのコードを + +```ts {2} +// 誤 ❌ +import { useTres } from "@tresjs/core"; + +const { state, setState } = useTres(); + +console.log(state.scene); +``` + +これに変更してください。 + +```ts {2} +// 正 ✅ +import { useTresContext } from "@tresjs/core"; + +const { scene, renderer } = useTresContext(); + +console.log(scene.value); +``` + +新しいコンテキストプロバイダーシステムの詳細については、[API DOCS](/api/composables.md)セクションを参照してください。 diff --git a/docs/ja/guide/nuxt.md b/docs/ja/guide/nuxt.md new file mode 100644 index 000000000..33def2359 --- /dev/null +++ b/docs/ja/guide/nuxt.md @@ -0,0 +1,58 @@ +# Nuxtのジュール `@tresjs/nuxt` + +![TresJS Nuxt Module](/nuxt-stones.png) + +npm package + +TresJS用の公式 Nuxtモジュールができています 🎉. + +リポジトリーは[ここ](https://github.com/Tresjs/nuxt) + +## インストール + +::: code-group + +```bash [pnpm] +pnpm add three @tresjs/nuxt +``` + +```bash [npm] +npm install three @tresjs/nuxt +``` + +```bash [yarn] +yarn add three @tresjs/nuxt +``` + +::: + +## 機能 + +- 🤓 [TresJSエコシステム](https://github.com/orgs/Tresjs/repositories)からコンポーネントとコンポーザブルを自動インポートします。 +- `TresCanvas`クライアントのみ。コンポーネント名または``に`.client` を追加する必要はありません。 +- TresJSコンポーネントをサポートするようにVueコンパイラーを自動的に構成します。[説明](/ja/guide/troubleshooting)を参照してください。 +- Nuxtに付属する最高のDX ✨ + +## 使い方 + +`nuxt.config.ts`の`modules`セクションに`@tresjs/nuxt`を追加します。 + +```js +export default defineNuxtConfig({ + modules: ["@tresjs/nuxt"], +}); +``` + +That's it! You can now use `@tresjs/nuxt` in your Nuxt app ✨ + +If you want to use the any package from the TresJS ecosystem, you can install the packages you want to use and they will be auto-imported by the module 🧙🏼‍♂️. + +| パッケージ | バージョン | +| ------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------- | +| [Cientos](https://github.com/Tresjs/cientos) | ![cientos version](https://img.shields.io/npm/v/@tresjs/cientos/latest.svg?label=%20&color=%23f19b00) | +| [Post-processing](https://github.com/Tresjs/post-processing) | ![post-processing version](https://img.shields.io/npm/v/@tresjs/post-processing/latest.svg?label=%20&color=ff69b4) | + +```bash +# pnpmでインストール +pnpm add @tresjs/cientos @tresjs/post-processing +``` diff --git a/docs/ja/guide/troubleshooting.md b/docs/ja/guide/troubleshooting.md new file mode 100644 index 000000000..6546cb0cc --- /dev/null +++ b/docs/ja/guide/troubleshooting.md @@ -0,0 +1,88 @@ +# よくある問題とその解決策についての楽しいガイド + +![トラブルシューティング](https://media.giphy.com/media/LHZyixOnHwDDy/giphy.gif) + +**TresJS v2**に対してトラブルシュートガイドへようこそ 。ここでは、3Dは*"Dazzlingly Delicious Difficulties"*の略です!3Dは絡まっているな毛糸🧶のように複雑であるか、キーボードの上の猫🐈 ⌨のように予測不可能であることがわかっていますが、心配しないでください! + +このガイドは、TresJS v2の使用時に発生する可能性のある最も一般的な問題の解決に役立つことを目的としています。 + +## 3Dシーンが見えません 😭! + +[スタートガイド](/ja/guide/getting-started.md)に従いましたのに、レンダリングされたシーンは表示されません。 + +シーンが表示されない最も一般的な原因は次のとおりです。 + +### キャンバスの高さを確認してください 📏 + +もう1つの一般的な問題は、デフォルトで`TresCanvas`コンポーネントが親要素の`width`と`height`を継承する`canvas`要素を作成することです。親要素に高さがない場合、キャンバスにも高さはありません。 + +![高度情報が見つかりません](/canvas-height.png) + +コンソールにも次のエラーが表示されます。 + +![キャンバスの高さに関する警告](/canvas-height-warning.png) + +これに対する簡単な解決策は、親要素の高さを`100%`に設定することです。 + +```css +html, +body { + margin: 0; + padding: 0; + height: 100%; + width: 100%; +} +#app { + height: 100%; + width: 100%; + background-color: #000; +} +``` + +または、「TresCanvas」コンポーネントの「window-size」プロパティを設定することもできます。 + +```vue + + + + +``` + +## コンポーネントの解決中にエラーが発生しました + +![](/failed-to-resolve-component.png) + +**TresJS v2**はVueアプリケーションのメインインスタンス内でカスタムVueレンダラーを使用するため、親として機能するVueのメインレンダラーは`TresCanvas`コンポーネント内のコンポーネントを認識しません。 表示には影響しませんが、コンソールに警告が表示されます。 + +![](/failed-to-resolve-component.png) + +現在、Vueには`