bluebey-studio: パン後に回転がぶるべー中心になるよう修正

5 files changed, 12 insertions, 5 deletions

diff --git a/public/bluebey-studio/guide.html b/public/bluebey-studio/guide.html
index bf5cb36..a6cba9f 100644
--- a/public/bluebey-studio/guide.html
+++ b/public/bluebey-studio/guide.html
@@ -110,7 +110,7 @@
 </ol>
 <h3>パソコンでの操作</h3>
 <ul>
-  <li>ぶるべーをつかんでドラッグすると、カメラ（見ている基準点）を動かせます。</li>
+  <li>ぶるべーをつかんでドラッグすると、カメラ（見ている基準点）を動かせます。ぶるべーは画面の中心に残ります。</li>
   <li>Shift を押しながらドラッグすると、ぶるべーを移動できます。</li>
   <li>向きは、全身とボーンのスライダーや回転ギズモで調整できます。</li>
   <li>モデルをクリックすると、その場所に近いボーンが選ばれます。</li>
diff --git a/public/bluebey-studio/index.html b/public/bluebey-studio/index.html
index bc0730d..9f2e089 100644
--- a/public/bluebey-studio/index.html
+++ b/public/bluebey-studio/index.html
@@ -136,7 +136,7 @@ if (window.matchMedia('(max-width: 768px), (max-height: 500px) and (pointer: coa
     <h3>ポーズ</h3>
     <ul>
       <li>右パネルの「ポーズ」でボーンを選び、X/Y/Zのスライダーを動かします。「ポーズ例」から始めると早いです。</li>
-      <li>ぶるべーをつかんでドラッグすると、カメラ（見ている基準点）を動かせます。Shiftを押しながらドラッグすると、ぶるべーを移動できます。</li>
+      <li>ぶるべーをつかんでドラッグすると、カメラ（見ている基準点）を動かせます（ぶるべーは中心に残ります）。Shiftを押しながらドラッグすると、ぶるべーを移動できます。</li>
       <li>モデルをクリックすると、その場所にいちばん近いボーンが選ばれます。</li>
       <li>ギズモ（回転の輪）を直接ドラッグしても回せます。</li>
       <li>スライダーの値は「休めの姿勢（レストポーズ）」からの差分です。<code>0,0,0</code> で元の姿勢。</li>
diff --git a/public/bluebey-studio/src/main.js b/public/bluebey-studio/src/main.js
index 8d69154..b08ea11 100644
--- a/public/bluebey-studio/src/main.js
+++ b/public/bluebey-studio/src/main.js
@@ -2377,8 +2377,9 @@ async function init() {
       const dy = event.clientY - modelDrag.y;
       const k = dragScale();
       if (modelDrag.pan) {
-        // Plain drag: move the camera's reference point (the same effect as the
-        // two-finger drag on a phone). The character stays where it is.
+        // Plain drag: move the camera's reference point (the phone's two-finger
+        // drag). The character rides along with it, so it stays at the centre and
+        // orbiting still turns it in place instead of swinging it around.
         // Use the step since the previous event, not the total from the press:
         // pointermove fires many times per drag, so adding the total every time
         // would make the pan accelerate.
@@ -2391,9 +2392,15 @@ async function init() {
         const move = new THREE.Vector3()
           .addScaledVector(right, -stepX * k)
           .addScaledVector(up, stepY * k);
+        // Stay on the floor: a vertical drag pans forward/back, never lifts the
+        // character off the ground (which would detach its shadow).
+        move.y = 0;
         view.target.add(move);
         for (const controls of Object.values(view.controlsMap ?? {})) controls.target.add(move);
         for (const cam of Object.values(view.cameras ?? {})) cam.position.add(move);
+        const root = state.pose.root ?? (state.pose.root = [0, 0, 0]);
+        root[0] = round2((root[0] ?? 0) + move.x);
+        root[2] = round2((root[2] ?? 0) + move.z);
         view.captureInto(state.view);
       } else {
         // Shift+drag (or any touch drag on the character): slide the character,
diff --git a/public/bluebey/guide.pdf b/public/bluebey/guide.pdf
index 903ee9d..6ef3dd7 100644
--- a/public/bluebey/guide.pdf
+++ b/public/bluebey/guide.pdf
diff --git a/src/content/docs/bluebey/guide.mdx b/src/content/docs/bluebey/guide.mdx
index 61f30db..0749144 100644
--- a/src/content/docs/bluebey/guide.mdx
+++ b/src/content/docs/bluebey/guide.mdx
@@ -82,7 +82,7 @@ description: 小平市のマスコットキャラクタ「ぶるべー」の3D�
 
 ### パソコンでの操作
 
-- ぶるべーをつかんでドラッグすると、カメラ（見ている基準点）を動かせます。
+- ぶるべーをつかんでドラッグすると、カメラ（見ている基準点）を動かせます。ぶるべーは画面の中心に残ります。
 - Shift を押しながらドラッグすると、ぶるべーを移動できます。
 - 向きは、全身とボーンのスライダーや回転ギズモで調整できます。
 - モデルをクリックすると、その場所に近いボーンが選ばれます。