From 8907e88a6c66bf57f9117aa33d2c1ed4f00844e6 Mon Sep 17 00:00:00 2001
From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>
Date: Thu, 22 Oct 2026 23:08:10 +0900
Subject: bluebey-studio: Shift+ドラッグを横=ぶるべー移動・縦=視点移動に
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

横は通常ドラッグと同じく影ごと移動し、縦だけカメラ中心を動かす。説明文も更新。
---
 public/bluebey-studio/guide.html   |   3 ++-
 public/bluebey-studio/index.html   |   2 +-
 public/bluebey-studio/src/main.js  |  35 ++++++++++-------------------------
 public/bluebey/guide.pdf           | Bin 3889085 -> 3888856 bytes
 src/content/docs/bluebey/guide.mdx |   3 ++-
 5 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/public/bluebey-studio/guide.html b/public/bluebey-studio/guide.html
index 73d903d..64d67d6 100644
--- a/public/bluebey-studio/guide.html
+++ b/public/bluebey-studio/guide.html
@@ -111,7 +111,8 @@
 <h3>パソコンでの操作</h3>
 <ul>
   <li>ぶるべーをつかんでドラッグすると、ぶるべーを移動できます。</li>
-  <li>Shift を押しながらドラッグすると、カメラ（見ている基準点）を動かせます。ぶるべーは画面の中心に残ります。</li>
+  <li>Shift を押しながら左右にドラッグすると、ぶるべーが影と一緒に左右に動きます。</li>
+  <li>Shift を押しながら上下にドラッグすると、カメラ（見ている基準点）を上下に動かせます。</li>
   <li>回転の中心をぶるべーに合わせたいときは、ぶるべーをダブルクリックします（「シーン」タブの「画面・光」にある「中心をぶるべーに合わせる」でも同じです）。</li>
   <li>向きは、全身とボーンのスライダーや回転ギズモで調整できます。</li>
   <li>モデルをクリックすると、その場所に近いボーンが選ばれます。</li>
diff --git a/public/bluebey-studio/index.html b/public/bluebey-studio/index.html
index 77e527a..3e4eb86 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 d2de72c..05fba42 100644
--- a/public/bluebey-studio/src/main.js
+++ b/public/bluebey-studio/src/main.js
@@ -2341,9 +2341,9 @@ async function init() {
     help?.addEventListener('click', (event) => { if (event.target === help) toggleHelp(false); });
 
     // --- the mouse on the character ----------------------------------------
-    // Dragging the model moves the camera's reference point, so the scene slides
-    // under the cursor; holding Shift and dragging moves the character itself.
-    // On touch, dragging the model always moves the character (the phone
+    // Dragging the model slides it across the view; holding Shift and dragging
+    // slides it horizontally too but moves the camera's reference point up and
+    // down. On touch, dragging the model always moves the character (the phone
     // gestures). Bone posing lives in the panel, so the mouse never grabs a bone
     // (see `Rig` in src/rig.js). On a small screen the panel is a sheet over the
     // view, so a tap on the view first just dismisses the sheet.
@@ -2398,33 +2398,18 @@ async function init() {
       const dy = event.clientY - modelDrag.y;
       const k = dragScale();
       if (modelDrag.pan) {
-        // 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.
+        // Shift+drag: horizontal moves the character with its shadow (like a
+        // plain drag); vertical moves the camera's reference point up/down.
         const stepX = event.clientX - modelDrag.lastX;
         const stepY = event.clientY - modelDrag.lastY;
         modelDrag.lastX = event.clientX;
         modelDrag.lastY = event.clientY;
-        const right = new THREE.Vector3(1, 0, 0).applyQuaternion(view.camera.quaternion);
-        const up = new THREE.Vector3(0, 1, 0).applyQuaternion(view.camera.quaternion);
-        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]);
-        // Keep full precision while accumulating: rounding every pointermove
-        // drifts the character away from the camera centre (and therefore from
-        // the orbit axis). Round once on pointer-up instead.
-        root[0] = (root[0] ?? 0) + move.x;
-        root[2] = (root[2] ?? 0) + move.z;
+        root[0] = (root[0] ?? 0) + stepX * k;
+        const lift = -stepY * k;
+        view.target.y += lift;
+        for (const controls of Object.values(view.controlsMap ?? {})) controls.target.y += lift;
+        for (const cam of Object.values(view.cameras ?? {})) cam.position.y += lift;
         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 d5c36e4..094f43b 100644
Binary files a/public/bluebey/guide.pdf and b/public/bluebey/guide.pdf differ
diff --git a/src/content/docs/bluebey/guide.mdx b/src/content/docs/bluebey/guide.mdx
index 82e10db..d260c46 100644
--- a/src/content/docs/bluebey/guide.mdx
+++ b/src/content/docs/bluebey/guide.mdx
@@ -83,7 +83,8 @@ description: 小平市のマスコットキャラクタ「ぶるべー」の3D
 ### パソコンでの操作
 
 - ぶるべーをつかんでドラッグすると、ぶるべーを移動できます。
-- Shift を押しながらドラッグすると、カメラ（見ている基準点）を動かせます。ぶるべーは画面の中心に残ります。
+- Shift を押しながら左右にドラッグすると、ぶるべーが影と一緒に左右に動きます。
+- Shift を押しながら上下にドラッグすると、カメラ（見ている基準点）を上下に動かせます。
 - 回転の中心をぶるべーに合わせたいときは、ぶるべーをダブルクリックします（「シーン」タブの「画面・光」にある「中心をぶるべーに合わせる」でも同じです）。
 - 向きは、全身とボーンのスライダーや回転ギズモで調整できます。
 - モデルをクリックすると、その場所に近いボーンが選ばれます。
-- 
cgit v1.3.1