@crapthings/run3d 0.2.11 → 0.2.12

package/README.md

@@ -18,8 +18,16 @@ Edit the components in `src/Scenes` to make the starter scene your own. To insta
 
 Drag to orbit the scene, scroll to zoom, and right-drag to pan. Edit `src/Scenes/index.jsx` for the scene and its settings.
 
+## Languages
+
+The template initializes [react-i18next](https://react.i18next.com/latest) in `src/i18n.js`, with English and Chinese resources in `src/locales`. It detects the browser language, falls back to English, and remembers language changes in local storage. The document's `lang` attribute follows the active language.
+
+Use `const { t, i18n } = useTranslation()` from `react-i18next` in components, render text with `t('scene.label')`, and switch languages with `i18n.changeLanguage('zh')` or `i18n.changeLanguage('en')`. Add new translation keys to both JSON files; register additional languages in `src/i18n.js`.
+
 ## Included tools
 
+Ordered by importance to the starter and typical usage, with core tools first and specialized tools later.
+
 ### App foundation
 
 - [React and React DOM](https://github.com/react/react) — build and render the app UI.
@@ -35,6 +43,22 @@ Drag to orbit the scene, scroll to zoom, and right-drag to pan. Edit `src/Scenes
 - [pmndrs/math](https://github.com/pmndrs/math) — provides math utilities for 3D work.
 - [R3F-Perf](https://github.com/utsuboco/r3f-perf) — monitors rendering performance while developing.
 
+### Data and state
+
+- [Zustand](https://github.com/pmndrs/zustand) — manages React app state.
+- [Koota](https://github.com/pmndrs/koota) — manages game state with entities and components.
+- [D3](https://github.com/d3/d3) — provides data scales, layouts, and visualizations.
+- [p5.js](https://github.com/processing/p5.js) — creates interactive graphics and creative coding sketches.
+
+### Interface
+
+- [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) — styles the app.
+- [Headless UI](https://github.com/tailwindlabs/headlessui) — provides accessible, unstyled React UI components.
+- [React Router](https://github.com/remix-run/react-router) — connects URLs to pages and handles navigation.
+- [react-i18next](https://react.i18next.com/) and [i18next](https://www.i18next.com/) — translate UI text, with browser language detection and a saved language preference.
+- [React Hotkeys Hook](https://github.com/JohannesKlauss/react-hotkeys-hook) — adds declarative keyboard shortcuts with a React hook.
+- [Floating UI](https://github.com/floating-ui/floating-ui) — positions menus, tooltips, and popovers.
+
 ### Worlds and movement
 
 - [React Three Rapier](https://github.com/pmndrs/react-three-rapier) — adds physics and collisions.
@@ -44,23 +68,8 @@ Drag to orbit the scene, scroll to zoom, and right-drag to pan. Edit `src/Scenes
 - [Three Hex Tiling](https://github.com/Ameobea/three-hex-tiling) — reduces visible repetition in tiled textures.
 - [TSL Hex Tiling](https://github.com/crapthings/tsl-hex-tiling) — reduces texture repetition with Three.js TSL for WebGPU and WebGL 2.
 
-### Data and state
-
-- [Zustand](https://github.com/pmndrs/zustand) — manages React app state.
-- [Koota](https://github.com/pmndrs/koota) — manages game state with entities and components.
-- [D3](https://github.com/d3/d3) — provides data scales, layouts, and visualizations.
-- [p5.js](https://github.com/processing/p5.js) — creates interactive graphics and creative coding sketches.
-
 ### Media
 
-- [Elementary](https://github.com/elemaudio/elementary) — creates declarative audio DSP graphs with `@elemaudio/core` and runs them in the browser with `@elemaudio/web-renderer`.
 - [Howler.js](https://github.com/goldfire/howler.js#documentation) — plays audio with volume controls, sound sprites, and 3D spatial sound.
 - [Mediabunny](https://mediabunny.dev/) — reads, writes, and converts audio and video files in the browser.
-
-### Interface
-
-- [React Router](https://github.com/remix-run/react-router) — connects URLs to pages and handles navigation.
-- [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) — styles the app.
-- [React Hotkeys Hook](https://github.com/JohannesKlauss/react-hotkeys-hook) — adds declarative keyboard shortcuts with a React hook.
-- [Headless UI](https://github.com/tailwindlabs/headlessui) — provides accessible, unstyled React UI components.
-- [Floating UI](https://github.com/floating-ui/floating-ui) — positions menus, tooltips, and popovers.
+- [Elementary](https://github.com/elemaudio/elementary) — creates declarative audio DSP graphs with `@elemaudio/core` and runs them in the browser with `@elemaudio/web-renderer`.

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "From idea to interactive 3D prototype in one command. A JavaScript starter with Vite, React Three Fiber, and tools for creative experimentation.",
   "type": "module",
   "bin": {

package/template/AGENTS.md

@@ -23,6 +23,7 @@
 - Avoid overengineering: question whether each solution or abstraction is needed for current requirements before implementing it.
 - Write component styles inline with Tailwind utilities in `className`, using arbitrary values when needed; use CSS files only for global setup or styles Tailwind cannot express.
 - Use Zustand for shared state and actions; avoid prop drilling.
+- Use react-i18next for UI translations; keep language resources in `src/locales` and initialize them in `src/i18n.js`.
 
 ## UI Components
 

package/template/package.json

@@ -27,6 +27,8 @@
     "fastnoise-lite": "^1.1.1",
     "gsap": "^3.15.0",
     "howler": "^2.2.4",
+    "i18next": "^26.5.11",
+    "i18next-browser-languagedetector": "^8.2.3",
     "koota": "^0.6.6",
     "math": "0.1.0",
     "mediabunny": "^1.61.6",
@@ -36,6 +38,7 @@
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "react-hotkeys-hook": "^5.3.3",
+    "react-i18next": "^17.1.9",
     "react-router": "^8.4.0",
     "recast-navigation": "^0.43.1",
     "three": "^0.186.1",

package/template/src/App.jsx

@@ -1,9 +1,12 @@
 import { Scene } from '@/Scenes'
+import { useTranslation } from 'react-i18next'
 
 // The starter scene fills the viewport against the favicon's dark background.
 export function App () {
+  const { t } = useTranslation()
+
   return (
-    <main className='fixed inset-0 bg-slate-900'>
+    <main className='fixed inset-0 bg-slate-900' aria-label={t('scene.label')}>
       <Scene />
     </main>
   )

package/template/src/i18n.js

@@ -0,0 +1,34 @@
+import i18n from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { initReactI18next } from 'react-i18next'
+import en from '@/locales/en.json'
+import zh from '@/locales/zh.json'
+
+// Keep the document language aligned with the active translation language.
+function updateDocumentLanguage (language) {
+  document.documentElement.lang = language
+}
+
+i18n.on('languageChanged', updateDocumentLanguage)
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: en },
+      zh: { translation: zh }
+    },
+    supportedLngs: ['en', 'zh'],
+    fallbackLng: 'en',
+    load: 'languageOnly',
+    detection: {
+      order: ['localStorage', 'navigator'],
+      caches: ['localStorage']
+    },
+    interpolation: {
+      escapeValue: false
+    }
+  })
+
+export default i18n

package/template/src/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "scene": {
+    "label": "Interactive 3D scene"
+  }
+}

package/template/src/locales/zh.json

@@ -0,0 +1,5 @@
+{
+  "scene": {
+    "label": "交互式 3D 场景"
+  }
+}

package/template/src/main.jsx

@@ -1,4 +1,5 @@
 import 'three-hex-tiling'
+import '@/i18n'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from '@/App'