docs(translations): 📝 [WIP] Add Japanese translations for the docs

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 }, */
   },
-})
+})

docs/.vitepress/config/ja.ts

@@ -0,0 +1,147 @@
+import type { DefaultTheme, LocaleSpecificConfig } from 'vitepress'
+
+export const jaConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+  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/',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+}

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
+<script setup lang="ts">
+const boxRef: Ref<TresInstance | null> = ref(null);
+
+onLoop(({ _delta, elapsed }) => {
+  if (boxRef.value) {
+    boxRef.value.rotation.y += 0.01;
+    boxRef.value.rotation.z = elapsed * 0.2;
+  }
+});
+</script>
+
+<template>
+  <TresMesh ref="boxRef" :scale="1" cast-shadow>
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```
+
+`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はこのオブジェクトを何度でも更新しようとします。それはパフォーマンスに悪影響がありますので、おすすめはしません😅。
+
+以下は、プロキシオブジェクトと単純なオブジェクトの使用の違いを示すベンチマークです。
+
+<figure>
+  <img src="/proxy-benchmark.png" alt="プロキシ対単純オブジェクト" style="width:100%">
+  <figcaption>図1 - 1秒あたりの実行数: オブジェクトとプロキシ。</figcaption>
+</figure>
+
+出典: [プロキシ対プレーンオブジェクト](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
+<script setup lang="ts">
+const position = reactive({ x: 0, y: 0, z: 0 });
+
+onLoop(({ _delta, elapsed }) => {
+  position.x = Math.sin(elapsed * 0.1) * 3;
+});
+</script>
+
+<template>
+  <TresMesh :position="position" cast-shadow>
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```
+
+✅ 正
+
+```vue
+<script setup lang="ts">
+const position = { x: 0, y: 0, z: 0 };
+const boxRef: ShallowRef<TresInstance | null> = shallowRef(null);
+
+onLoop(({ _delta, elapsed }) => {
+  boxRef.value.position.x = Math.sin(elapsed * 0.1) * 3;
+});
+</script>
+
+<template>
+  <TresMesh ref="boxRef" :position="position" cast-shadow>
+    <TresBoxGeometry :args="[1, 1, 1]" />
+    <TresMeshStandardMaterial color="teal" />
+  </TresMesh>
+</template>
+```

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}
+<script setup lang="ts">
+import { extend } from '@tresjs/core'
+import { OrbitControls } from 'three/addons/controls/OrbitControls'
+import { TextGeometry } from 'three/addons/geometries/TextGeometry'
+// エレメントを追加する
+extend({ TextGeometry, OrbitControls })
+</script>
+<template>
+  <TresCanvas
+    shadows
+    alpha
+  >
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+    <TresOrbitControls
+      v-if="state.renderer"
+      :args="[state.camera, state.renderer?.domElement]"
+    />
+    <TresMesh>
+      <TresTextGeometry
+        :args="['TresJS', { font, ...fontOptions }]"
+        center
+      />
+      <TresMeshMatcapMaterial :matcap="matcapTexture" />
+    </TresMesh>
+  </TresCanvas>
+</template>
+```

docs/ja/advanced/primitive.md

@@ -0,0 +1,44 @@
+# プリミティブ
+
+`<primitive />`コンポーネントは、TresJSの汎用性の高い低レベルコンポーネントであり、これを使用すると、任意のThree.jsオブジェクトを抽象化せずにVueアプリケーションで直接使用できます。Vueの反応性システムとThree.jsのシーングラフの間のブリッジとして機能します。
+
+## 使い方
+
+```html
+<script setup lang="ts">
+  // three.jsから必要なクラスをインポートする
+  import { Mesh, BoxGeometry, MeshBasicMaterial } from "three";
+  // ジオメトリとマテリアルを作成する
+  const geometry = new BoxGeometry(1, 1, 1);
+  const material = new MeshBasicMaterial({ color: 0x00ff00 });
+  // ジオメトリとマテリアルを使用してメッシュを作成する
+  const meshWithMaterial = new Mesh(geometry, material);
+</script>
+
+<template>
+  <TresCanvas>
+    <primitive :object="meshWithMaterial" />
+  </TresCanvas>
+</template>
+```
+
+## プロパティーズ
+
+`object`: プロパティは、three.jsまたはその派生クラスの1つからの`Object3D`オブジェクトを期待します。 `<primitive />`コンポーネントがレンダリングするメインオブジェクトです。`マテリアル`とともにプロパティに渡されます。
+
+## モデルとの使用
+
+`<primitive />`コンポーネントは、外部ソースからロードされたモデルなどの複雑なオブジェクトをレンダリングする場合に特に便利です。次の例は、GLTFファイルからモデルをロードし、`<primitive />`コンポーネントを使用してレンダリングする方法を示しています。
+
+```html
+<script lang="ts" setup>
+  import { useGLTF } from "@tresjs/cientos";
+  const { nodes } = await useGLTF("/models/AkuAku.gltf");
+</script>
+
+<TresCanvas>
+  <Suspense>
+    <primitive :object="nodes.AkuAku" />
+  </Suspense>
+</TresCanvas>
+```