dsh-plugin-vrmpet3d 0.1.0 → 0.1.2

package/lib/client.menu.js

@@ -113,7 +113,7 @@
     reloadModel: 'Reload model',
     dance: 'Dance for me',
       modelSettings: "This model's parameters",
-      surfaceWindow: 'Move to the floating window',
+      surfaceWindow: 'Switch to an independent pet',
       surfaceApp: 'Move back inside the app',
       surfaceOff: 'disabled while debug mode is on',
       gravity: 'Gravity',
@@ -141,7 +141,7 @@
     reloadModel: '重载模型',
     dance: '跳支舞',
       modelSettings: '当前模型参数设置',
-      surfaceWindow: '切换回窗口外',
+      surfaceWindow: '切换为独立宠物',
       surfaceApp: '切换回窗口内',
       surfaceOff: '调试模式下不生效',
       gravity: '重力',
@@ -236,6 +236,7 @@
     var onChoose = typeof options.onChoose === 'function' ? options.onChoose : function () {};
     var toSurface = options.toSurface === 'app' ? 'app' : 'window';
     var surfaceAllowed = options.surfaceAllowed !== false;
+    var danceState = 'resting';
     /** Whether this surface offers the 切换 row at all. See the `showSurface` option. */
     var showSurface = options.showSurface !== false;
 
@@ -262,6 +263,8 @@
 
     /** The label for one id, from the state this menu was built with. */
     function labelFor(id) {
+      if (id === 'dance') return danceState === 'dancing' ? (options.language === 'en' ? 'Another dance' : '换一支舞')
+        : (['resting', 'offline'].indexOf(danceState) === -1 ? (options.language === 'en' ? 'The pet is busy…' : '宠物目前很忙…') : text.dance);
       if (id === 'surface') return toSurface === 'app' ? text.surfaceApp : text.surfaceWindow;
       if (id === 'closePet') return toSurface === 'app' ? text.closePetWindow : text.closePetApp;
       return text[id] || id;
@@ -275,7 +278,8 @@
       ITEMS.forEach(function (id) {
         // The 切换 row is the one entry a surface may omit — the window's 关闭独立宠物 already does its job.
         if (id === 'surface' && !showSurface) return;
-        var disabled = id === 'surface' && surfaceAllowed !== true;
+        var disabled = (id === 'surface' && surfaceAllowed !== true)
+          || (id === 'dance' && ['resting', 'offline', 'dancing'].indexOf(danceState) === -1);
         var toggle = TOGGLES.indexOf(id) !== -1;
         var checked = toggle && checkedState[id] === true;
         var item = doc.createElement('button');
@@ -300,7 +304,7 @@
            * waiting to happen ("the switch does nothing"). The reason is the operator's own qualifier —
            * 非debug模式生效 — spelled out for the mode that turns it off.
            */
-          item.title = text.surfaceOff;
+          item.title = id === 'dance' ? label : text.surfaceOff;
         } else {
           if (toggle && !checked) item.title = text.gravityOff;
           item.addEventListener('click', function (event) {
@@ -456,6 +460,12 @@
       setSurface: function (next) { toSurface = next === 'app' ? 'app' : 'window'; },
       /** Whether that row may be used at all (false in debug mode). */
       setSurfaceAllowed: function (allowed) { surfaceAllowed = allowed !== false; },
+      setSurfaceVisible: function (visible) { showSurface = visible === true; },
+      setDanceState: function (state) {
+        if (danceState === state) return;
+        danceState = state;
+        if (!element.hidden) render();
+      },
       /**
        * Which way a SWITCH row is thrown, read at OPEN time by the surface that owns the preference.
        *

package/lib/client.scene.js

@@ -75,10 +75,20 @@
   var GAZE_YAW_LIMIT = ((80 * Math.PI) / 180) / GAZE_WEIGHT;
 
   /**
-   * Pitch is left where it was: a head does not tip 90° forward or back without looking broken, and the
-   * request was for the turn. Raise this the same way if a bigger nod is ever wanted.
+   * Automatic pitch limit, before the gaze weight. Settings expose separate actual
+   * upward/downward angles in degrees; both default to 60 degrees.
    */
-  var GAZE_PITCH_LIMIT = 0.3;
+  var GAZE_PITCH_LIMIT = (60 * Math.PI / 180) / GAZE_WEIGHT;
+
+  function gazePitchLimits(preferences) {
+    var prefs = preferences || {};
+    function limit(key) {
+      return Number.isFinite(prefs[key])
+        ? Math.max(0, Math.min(60, prefs[key])) * Math.PI / 180 / GAZE_WEIGHT
+        : GAZE_PITCH_LIMIT;
+    }
+    return { up: limit('gazePitchUp'), down: limit('gazePitchDown') };
+  }
 
   /**
    * How far the head may turn IN TOTAL while an authored clip is driving it, in radians.
@@ -794,7 +804,8 @@
     }
 
     var yaw = Math.max(-GAZE_YAW_LIMIT, Math.min(GAZE_YAW_LIMIT, aim.yaw)) * GAZE_WEIGHT * this.gazeBlend;
-    var pitch = Math.max(-GAZE_PITCH_LIMIT, Math.min(GAZE_PITCH_LIMIT, aim.pitch)) * GAZE_WEIGHT * this.gazeBlend;
+    var pitchLimits = gazePitchLimits(this.scene && this.scene.preferences);
+    var pitch = Math.max(-pitchLimits.down, Math.min(pitchLimits.up, aim.pitch)) * GAZE_WEIGHT * this.gazeBlend;
     var axes = rest ? this.gazeAxes(head) : null;
 
     if (layeredOnClip) {
@@ -807,8 +818,7 @@
       var budget = Math.max(0, HEAD_LAYER_LIMIT - clipTurn);
       yaw = Math.max(-budget, Math.min(budget, yaw));
       // Pitch keeps its own (smaller) limit, but never more than what is left of the budget either.
-      pitch = Math.max(-Math.min(GAZE_PITCH_LIMIT * GAZE_WEIGHT, budget),
-        Math.min(Math.min(GAZE_PITCH_LIMIT * GAZE_WEIGHT, budget), pitch));
+      pitch = Math.max(-budget, Math.min(budget, pitch));
       if (axes) {
         this._quat.setFromAxisAngle(axes.yaw, yaw);
         this._quat2.setFromAxisAngle(axes.pitch, pitch);
@@ -1677,6 +1687,9 @@
     if (this.disposed) return;
     var w = Math.max(1, Math.round(width));
     var h = Math.max(1, Math.round(height));
+    // Layout works in fractional CSS pixels. Reapplying the same rounded size clears
+    // the framebuffer between rAFs when a settings reply arrives during an orbit.
+    if (this.width === w && this.height === h) return;
     this.renderer.setSize(w, h, false);
     this.camera.aspect = w / h;
     this.camera.updateProjectionMatrix();
@@ -1763,6 +1776,8 @@
 
   /** Replace the current avatar with a hardware-ready one. */
   Scene.prototype.installAvatar = function (avatar, root) {
+    (this.toonMaterials || []).forEach(function (entry) { if (entry.plain) entry.plain.dispose(); });
+    this.toonMaterials = null;
     // Stop before the old avatar is replaced: stopping is what undoes the clip's
     // pose, and it has to happen while the old model is still installed. Every
     // clip is then dropped, because a clip is fitted to one model — the cached
@@ -1787,6 +1802,7 @@
     this.frameAvatar(root);
     this.stage.add(root);
     this.avatar = avatar;
+    this.captureToonMaterials(root);
     this.kind = avatar.kind;
     /**
      * …and the collider switch, applied to the avatar that was just adopted.
@@ -1852,6 +1868,7 @@
      * model is loaded, so on a fresh pet that call finds nothing to snapshot and the first sweep would have
      * had no gravity to lean against (measured: `windState().joints === 0` on a real model with two chains).
      */
+    this.applySprings(this.preferences);
     this.captureSpringBase();
     this.expressionBehaviour = { blink: 0, blinkExpression: 'blink', emotion: null, emotionWeight: 0 };
     this.expressionState = { nextBlinkAt: null, blinkUntil: 0, nextIdleEmotionAt: null, emotionUntil: 0 };
@@ -1860,6 +1877,73 @@
     this.motion.setGazeIdle(this.preferences.gazeIdleSeconds);
     this.updateShadowPlane();
     this.refitCamera();
+    this.applyToonPreferences();
+  };
+
+  /** Keep the loaded materials (and expression bindings) intact so the switch is reversible. */
+  Scene.prototype.captureToonMaterials = function (root) {
+    var self = this;
+    this.toonMeshes = [];
+    this.toonMaterials = [];
+    var seen = new Map();
+    root.traverse(function (node) {
+      if (!node.isMesh || !node.material) return;
+      var originals = Array.isArray(node.material) ? node.material : [node.material];
+      var entries = originals.map(function (material) {
+        if (!material.isMToonMaterial) return null;
+        if (seen.has(material)) return seen.get(material);
+        var entry = { material: material, toony: material.shadingToonyFactor, shift: material.shadingShiftFactor,
+          shade: material.shadeColorFactor.clone(), width: material.outlineWidthFactor, plain: null };
+        seen.set(material, entry);
+        self.toonMaterials.push(entry);
+        return entry;
+      });
+      if (entries.some(Boolean)) self.toonMeshes.push({ node: node, original: node.material, entries: entries, originals: originals });
+    });
+  };
+
+  Scene.prototype.applyToonPreferences = function () {
+    var self = this;
+    var id = this.currentModelId || this.preferences.modelId;
+    var prefs = (this.preferences.toon || {})[id] || {};
+    var disabled = prefs.enabled === false;
+    (this.toonMaterials || []).forEach(function (entry) {
+      var material = entry.material;
+      material.shadingToonyFactor = prefs.shadingToonyFactor === undefined ? entry.toony : prefs.shadingToonyFactor;
+      material.shadingShiftFactor = prefs.shadingShiftFactor === undefined ? entry.shift : prefs.shadingShiftFactor;
+      material.shadeColorFactor.copy(entry.shade);
+      if (prefs.shadeStrength !== undefined) material.shadeColorFactor.lerp(material.color, 1 - prefs.shadeStrength);
+      material.outlineWidthFactor = entry.width * (prefs.outlineScale === undefined ? 1 : prefs.outlineScale);
+      if (disabled && !entry.plain) {
+        var plain = new self.THREE.MeshStandardMaterial();
+        ['map', 'alphaMap', 'alphaTest', 'transparent', 'opacity', 'side', 'depthWrite', 'depthTest',
+          'normalMap', 'normalScale', 'emissive', 'emissiveMap', 'emissiveIntensity', 'color'].forEach(function (key) {
+          if (material[key] === undefined) return;
+          if (plain[key] && typeof plain[key].copy === 'function') plain[key].copy(material[key]);
+          else plain[key] = material[key];
+        });
+        plain.visible = !material.isOutline;
+        entry.plain = plain;
+      }
+    });
+    (this.toonMeshes || []).forEach(function (mesh) {
+      mesh.node.material = disabled
+        ? (Array.isArray(mesh.original) ? mesh.originals.map(function (m, i) { return mesh.entries[i] ? mesh.entries[i].plain : m; })
+          : mesh.entries[0].plain)
+        : mesh.original;
+    });
+    this.toonDisabled = disabled;
+  };
+
+  Scene.prototype.syncPlainMaterials = function () {
+    if (!this.toonDisabled) return;
+    (this.toonMaterials || []).forEach(function (entry) {
+      if (!entry.plain) return;
+      // Expressions still target the authored MToon material, including UV animation.
+      entry.plain.color.copy(entry.material.color);
+      entry.plain.emissive.copy(entry.material.emissive);
+      entry.plain.opacity = entry.material.opacity;
+    });
   };
 
   /** A soft ground blob, so the pet does not appear to float. */
@@ -3388,7 +3472,8 @@
     var x = Math.max(-1, Math.min(1, aim.x));
     var y = Math.max(-1, Math.min(1, aim.y));
     // Screen y grows downward, pitch grows upward.
-    return { yaw: x * GAZE_YAW_LIMIT, pitch: -y * GAZE_PITCH_LIMIT };
+    var limits = gazePitchLimits(this.preferences);
+    return { yaw: x * GAZE_YAW_LIMIT, pitch: -y * (y < 0 ? limits.up : limits.down) };
   };
 
   /** Advance one frame. `dt` is in seconds. */
@@ -3445,6 +3530,7 @@
     this.advanceExpressions(dt);
     this.applyExpressions(this.preferences);
 
+    this.syncPlainMaterials();
     this.renderer.render(this.scene, this.camera);
     this.frame += 1;
   };
@@ -3456,6 +3542,7 @@
   Scene.prototype.applyPreferences = function (preferences) {
     var raw = preferences && typeof preferences === 'object' ? preferences : {};
     this.preferences = this.core.cleanPreferences(preferences);
+    this.applyToonPreferences();
     // A preferences push only carries `motions` when the caller meant to change
     // it. cleanPreferences always produces a (possibly empty) key, so adopting it
     // unconditionally would silently wipe a map set through setMotionMap.
@@ -3649,6 +3736,40 @@
     };
   };
 
+  /** The rendered eyes' midpoint, in canvas CSS pixels, independent of framing and camera orbit. */
+  Scene.prototype.gazeOrigin = function () {
+    var avatar = this.avatar;
+    if (!avatar || !this.THREE || !this.camera) return null;
+    var point = this._gazeOriginVec || (this._gazeOriginVec = new this.THREE.Vector3());
+    var other = this._gazeOtherEyeVec || (this._gazeOtherEyeVec = new this.THREE.Vector3());
+    var humanoid = avatar.vrm && avatar.vrm.humanoid;
+    var left = humanoid && typeof humanoid.getRawBoneNode === 'function' ? humanoid.getRawBoneNode('leftEye') : null;
+    var right = humanoid && typeof humanoid.getRawBoneNode === 'function' ? humanoid.getRawBoneNode('rightEye') : null;
+    left = left || (avatar.bones && avatar.bones.leftEye);
+    right = right || (avatar.bones && avatar.bones.rightEye);
+    var source;
+    if (left && right) {
+      left.getWorldPosition(point); right.getWorldPosition(other);
+      point.add(other).multiplyScalar(0.5);
+      source = 'eyes';
+    } else if (avatar.vrm && avatar.vrm.lookAt && typeof avatar.vrm.lookAt.getLookAtWorldPosition === 'function') {
+      // The loader has already converted VRM 0/1 coordinate conventions for this offset.
+      if (avatar.root) avatar.root.updateWorldMatrix(true, true);
+      avatar.vrm.lookAt.getLookAtWorldPosition(point);
+      source = 'lookAt';
+    } else {
+      var head = gazeNodeFor(avatar);
+      if (!head) return null;
+      head.getWorldPosition(point);
+      source = 'head';
+    }
+    this.camera.updateMatrixWorld(true);
+    var projected = this.projectToCanvas(point);
+    if (!projected || projected.z < -1 || projected.z > 1) return null;
+    projected.source = source;
+    return projected;
+  };
+
   /**
    * Apply the draught to the chains, decay it, and keep it LOCAL.
    *
@@ -3873,6 +3994,10 @@
    */
   Scene.prototype.setSpringDefaults = function (defaults) {
     this.springDefaults = defaults && typeof defaults === 'object' ? defaults : null;
+    // Catalog defaults can arrive after the avatar and preferences on either surface.
+    // Apply them now; waiting for another preference edit makes a reload appear to fix physics.
+    this.applySprings(this.preferences);
+    this.captureSpringBase();
   };
 
   /**
@@ -4939,6 +5064,8 @@
 
   Scene.prototype.dispose = function () {
     if (this.disposed) return;
+    (this.toonMeshes || []).forEach(function (mesh) { mesh.node.material = mesh.original; });
+    (this.toonMaterials || []).forEach(function (entry) { if (entry.plain) entry.plain.dispose(); });
     this.disposed = true;
     // Stop and uncache every mixer before the renderer goes: a mixer holds a
     // binding table that references the model's bones, so leaving them behind

package/lib/config-page.html

@@ -3,11 +3,20 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>vrmpet3d · 模型参数</title>
+  <!--
+    The title, the nav, the table headers and every row below carry `data-i18n*`, and the Chinese text stays INLINE as
+    the no-JS fallback: this page's script can fail to load (that is what the watchdog at the bottom reports), and a
+    page that failed should still read in one language rather than show nothing. `lib/config-page.js` owns the table
+    and `core.applyI18n` writes these places; a key the table lacks leaves the markup alone.
+
+    Both settings pages are written in the two languages by that ONE script and its ONE table, so a key here is shared
+    with 通用设置 — `sectionModel` names both this page's heading and its nav entry.
+  -->
+  <title data-i18n="titleModel">vrmpet3d · 模型参数</title>
   <meta name="color-scheme" content="dark light">
   <!--
-    The stylesheet both settings pages share. One file rather than a copy in each page: the two pages
-    render the same rows, tables and status lines, and a copy is how the two drift apart.
+    The stylesheet both settings pages share. One file rather than a copy in each page: the two pages render
+    the same rows, tables and status lines, and a copy is how the two drift apart.
 
     The MODEL page (`/vrmpet3d/config`). Its sections are the ones that are about ONE model, in this order:
     模型 → 表情 → 部位 → 弹簧骨. Everything else (导入, 状态, 碎碎念, 视线, 鼠标互动, 其他) is a section of
@@ -27,44 +36,55 @@
 -->
 <div class="page-loading" role="status" aria-live="polite">
   <span class="page-loading-spinner" aria-hidden="true"></span>
-  <span>正在加载设置…</span>
+  <span data-i18n="loading">正在加载设置…</span>
 </div>
 
-  <header class="page-header"><div class="eyebrow">VRMPET3D · SETTINGS</div><h1>模型参数</h1><div id="status" role="status" aria-live="polite">正在读取…</div></header>
-  <nav class="section-nav" aria-label="设置分组"><a href="#settings-0">模型</a><a href="#settings-1">表情</a><a href="#settings-2">部位</a><a href="#settings-3">弹簧骨</a></nav>
+  <header class="page-header"><div class="eyebrow">VRMPET3D · SETTINGS</div><h1 data-i18n="headingModel">模型参数</h1><div id="status" role="status" aria-live="polite" data-i18n="reading">正在读取…</div></header>
+  <nav class="section-nav" aria-label="设置分组" data-i18n-aria="navSections"><a href="#settings-0" data-i18n="sectionModel">模型</a><a href="#settings-1" data-i18n="sectionExpression">表情</a><a href="#settings-2" data-i18n="sectionParts">部位</a><a href="#settings-3" data-i18n="sectionSprings">弹簧骨</a></nav>
   <main>
 <section class="settings-section" id="settings-0">
-  <h2>模型</h2>
+  <h2 data-i18n="sectionModel">模型</h2>
   <div class="card">
     <div class="row">
-      <label class="k" for="model-select">当前模型</label>
+      <label class="k" for="model-select" data-i18n="currentModel">当前模型</label>
       <select id="model-select" class="grow"></select>
       <span class="pill" id="model-spec">—</span>
     </div>
-    <div class="row"><span class="k">可用信息</span><span class="grow note" id="model-meta">—</span></div>
+    <div class="row"><span class="k" data-i18n="availableInfo">可用信息</span><span class="grow note" id="model-meta">—</span></div>
   </div>
 
+  <div class="card" id="toon-card" style="margin-top:12px">
+    <h3 data-i18n="toonTitle">卡通增强</h3>
+    <div class="row"><span class="k" data-i18n="toonState">材质状态</span><span class="grow note" id="toon-state" role="status">—</span></div>
+    <div class="row">
+      <label class="k" for="toon-mode">MToon</label>
+      <select id="toon-mode"><option value="original" data-i18n="toonOriginal">模型原始</option><option value="on" data-i18n="on">开启</option><option value="off" data-i18n="toonDisabled">关闭</option></select>
+      <button id="toon-reset" type="button" data-i18n="toonReset">恢复模型原始参数</button>
+    </div>
+    <div id="toon-controls"></div>
+    <p class="note" data-i18n="toonNote">参数仅保存到当前模型，留空使用模型原始值。关闭 MToon 后使用普通光照材质。描边倍率只调整模型已有的描边。</p>
+  </div>
 </section>
 
 <section class="settings-section" id="settings-1">
-  <h2>表情 <span id="expression-count"></span></h2>
+  <h2><span data-i18n="sectionExpression">表情</span> <span id="expression-count"></span></h2>
   <div class="card">
     <div class="row">
-      <label class="k" for="blink-enabled">眨眼</label>
-      <label class="inline"><input type="checkbox" id="blink-enabled"> 开启</label>
-      <span class="k sub">间隔</span>
+      <label class="k" for="blink-enabled" data-i18n="blink">眨眼</label>
+      <label class="inline"><input type="checkbox" id="blink-enabled"> <span data-i18n="on">开启</span></label>
+      <span class="k sub" data-i18n="interval">间隔</span>
       <input type="number" id="blink-min" step="0.5" min="0.5" max="60"> –
-      <input type="number" id="blink-max" step="0.5" min="0.5" max="60"> 秒
+      <input type="number" id="blink-max" step="0.5" min="0.5" max="60"> <span data-i18n="secondsUnit">秒</span>
     </div>
     <div class="row">
-      <label class="k" for="emotion-enabled">情绪</label>
-      <label class="inline"><input type="checkbox" id="emotion-enabled"> 开启</label>
-      <span class="k sub">空闲间隔</span>
+      <label class="k" for="emotion-enabled" data-i18n="emotion">情绪</label>
+      <label class="inline"><input type="checkbox" id="emotion-enabled"> <span data-i18n="on">开启</span></label>
+      <span class="k sub" data-i18n="idleInterval">空闲间隔</span>
       <input type="number" id="emotion-idle-min" step="1" min="2" max="600"> –
-      <input type="number" id="emotion-idle-max" step="1" min="2" max="600"> 秒
+      <input type="number" id="emotion-idle-max" step="1" min="2" max="600"> <span data-i18n="secondsUnit">秒</span>
     </div>
     <table id="emotion-table">
-      <thead><tr><th style="width:76px">情境</th><th style="width:58px">使用</th><th>表情</th><th style="width:104px">持续时间</th></tr></thead>
+      <thead><tr><th style="width:76px" data-i18n="colSituation">情境</th><th style="width:58px" data-i18n="colUse">使用</th><th data-i18n="colExpression">表情</th><th style="width:104px" data-i18n="colHold">持续时间</th></tr></thead>
       <tbody id="emotion-body"></tbody>
     </table>
   </div>
@@ -72,7 +92,7 @@
 </section>
 
 <section class="settings-section" id="settings-2">
-  <h2>部位 <span id="part-count"></span></h2>
+  <h2><span data-i18n="sectionParts">部位</span> <span id="part-count"></span></h2>
   <!--
     默认折叠（operator, 2026-10-14: 「"部位"区域默认折叠，内容太多了」）.
 
@@ -83,22 +103,22 @@
     the markup. The count beside the heading is filled whether the fold is open or shut.
   -->
   <details id="parts-fold">
-    <summary>展开部位列表</summary>
+    <summary data-i18n="partsExpand">展开部位列表</summary>
     <div class="card">
       <table id="part-table">
       <thead><tr>
-        <th style="width:150px">部位</th>
-        <th style="width:58px">使用</th>
-        <th>表情</th>
-        <th style="width:104px">持续时间</th>
-        <th style="width:290px">结构</th>
+        <th style="width:150px" data-i18n="colPart">部位</th>
+        <th style="width:58px" data-i18n="colUse">使用</th>
+        <th data-i18n="colExpression">表情</th>
+        <th style="width:104px" data-i18n="colHold">持续时间</th>
+        <th style="width:290px" data-i18n="colStructure">结构</th>
         <th style="width:58px"></th>
       </tr></thead>
       <tbody id="part-body"></tbody>
     </table>
     <div class="row" style="margin-top:10px">
-      <button id="part-add" type="button">新增部位</button>
-      <span class="note">最多 <span id="part-max"></span> 个</span>
+      <button id="part-add" type="button" data-i18n="partsAdd">新增部位</button>
+      <span class="note"><span data-i18n="partsMaxPrefix">最多</span> <span id="part-max"></span><span data-i18n="partsMaxSuffix"> 个</span></span>
     </div>
     <!--
       The structure BROWSER. It replaced a native `<input list>` + `<datalist>`: in the settings window that popup
@@ -107,9 +127,9 @@
     -->
     <div class="part-picker" id="part-picker" hidden>
       <div class="part-picker-head">
-        <input type="text" id="part-picker-filter" placeholder="筛选结构名">
+        <input type="text" id="part-picker-filter" placeholder="筛选结构名" data-i18n-placeholder="filterStructures">
         <span class="note" id="part-picker-count"></span>
-        <button type="button" id="part-picker-close">关闭</button>
+        <button type="button" id="part-picker-close" data-i18n="close">关闭</button>
       </div>
       <div class="part-picker-list" id="part-picker-list" tabindex="0"></div>
       </div>
@@ -119,12 +139,12 @@
 </section>
 
 <section class="settings-section" id="settings-3">
-  <h2>弹簧骨 <span id="spring-count"></span></h2>
+  <h2><span data-i18n="sectionSprings">弹簧骨</span> <span id="spring-count"></span></h2>
   <div class="card">
     <div id="spring-list"></div>
     <div class="row" style="margin-top:10px">
-      <label class="k" for="spring-motion-physics">动作播放时</label>
-      <label class="inline"><input type="checkbox" id="spring-motion-physics"> 头发与裙摆继续摆动</label>
+      <label class="k" for="spring-motion-physics" data-i18n="springMotionWhile">动作播放时</label>
+      <label class="inline"><input type="checkbox" id="spring-motion-physics"> <span data-i18n="springMotionBox">头发与裙摆继续摆动</span></label>
     </div>
     <!--
       弹簧骨碰撞：全部关闭（默认）/ 全部开启 / 自定义（operator, 2026-10-14）.
@@ -136,11 +156,11 @@
       because comparing the two states in one sitting is the only way to answer 穿模 by looking.
     -->
     <div class="row" style="margin-top:10px">
-      <label class="k" for="spring-colliders">弹簧骨碰撞</label>
+      <label class="k" for="spring-colliders" data-i18n="springColliders">弹簧骨碰撞</label>
       <select id="spring-colliders">
-        <option value="off">全部关闭（默认）</option>
-        <option value="all">全部开启</option>
-        <option value="custom">自定义</option>
+        <option value="off" data-i18n="collidersOff">全部关闭（默认）</option>
+        <option value="all" data-i18n="collidersAll">全部开启</option>
+        <option value="custom" data-i18n="collidersCustom">自定义</option>
       </select>
     </div>
     <!--
@@ -152,11 +172,11 @@
       no colliders shows no list rather than switches that do nothing.
     -->
     <details id="spring-colliders-detail" hidden style="margin-top:8px">
-      <summary>逐个碰撞体 <span id="spring-collider-count"></span></summary>
+      <summary><span data-i18n="collidersDetail">逐个碰撞体</span> <span id="spring-collider-count"></span></summary>
       <div id="spring-collider-list" style="margin-top:8px;display:flex;flex-direction:column;gap:6px"></div>
     </details>
     <div class="row" style="margin-top:10px">
-      <button id="spring-reset-all">全部恢复默认</button>
+      <button id="spring-reset-all" data-i18n="springResetAll">全部恢复默认</button>
     </div>
   </div>
 
@@ -168,23 +188,40 @@
     A settings page that can only say "正在读取…" is useless when something fails: the text is the HTML's
     own placeholder, and a script that never ran, 404'd or threw at its first line looks exactly like a
     slow host. So this runs FIRST, catches what it can, and after two seconds says what is actually wrong.
+
+    It runs BEFORE `lib/core.js`, which is the whole point — the case it exists for is a core that never
+    loaded — so it cannot use `core.textFor` and carries its own tiny map instead: three sentences plus the
+    brackets a filename goes in, picked from `navigator.language` in one line. Chinese is the fallback,
+    because the markup around it is Chinese. Keep it small: this is a watchdog, not a second i18n system.
   -->
   <script>
     (function () {
+      var ZH = /^(zh|cn|chinese)/i.test(navigator.language || '');
+      var WORDS = ZH
+        ? {
+          error: "页面脚本出错：",
+          file: "（来自 {name}）",
+          coreMissing: "初始化卡住：core.js 没有加载（检查 /vrmpet3d/window/lib/core.js 是否 404）。",
+          stuck: "初始化卡住：脚本已加载但没有完成初始化（看看窗口的控制台，或宿主是否提供 /vrmpet3d/settings）。",
+        }
+        : {
+          error: "Page script error: ",
+          file: "(from {name})",
+          coreMissing: "Stuck at startup: core.js did not load (check whether /vrmpet3d/window/lib/core.js is a 404).",
+          stuck: "Stuck at startup: the script loaded but never finished initialising (check the window console, or whether the host serves /vrmpet3d/settings).",
+        };
       function show(message) {
         var status = document.getElementById("status");
         if (status) { status.textContent = message; status.className = "warn"; }
       }
       window.addEventListener("error", function (event) {
-        show("页面脚本出错：" + (event.message || event.type) + (event.filename ? " （" + event.filename + "）" : ""));
+        show(WORDS.error + (event.message || event.type)
+          + (event.filename ? " " + WORDS.file.replace("{name}", event.filename) : ""));
       }, true);
       window.setTimeout(function () {
         if (window.__VRMPET3D_CONFIG_STATE__) return;
-        if (!window.__VRMPET3D_CORE__) {
-          show("初始化卡住：core.js 没有加载（检查 /vrmpet3d/window/lib/core.js 是否 404）。");
-          return;
-        }
-        show("初始化卡住：脚本已加载但没有完成初始化（看看窗口的控制台，或宿主是否提供 /vrmpet3d/settings）。");
+        if (!window.__VRMPET3D_CORE__) { show(WORDS.coreMissing); return; }
+        show(WORDS.stuck);
       }, 2000);
     })();
   </script>