From 09ab25113c299b8f3208a717cee9e9b8c7b07fe9 Mon Sep 17 00:00:00 2001
From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>
Date: Fri, 23 Oct 2026 09:24:54 +0900
Subject: bluebey-studio: ドラッグの役割を入れ替え、回転中心をぶるべーに固定
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
public/bluebey-studio/index.html | 4 +-
public/bluebey-studio/src/exporter.js | 17 +++-
public/bluebey-studio/src/main.js | 154 +++++++++++++++++++++++++++-------
public/bluebey-studio/src/panel.js | 23 ++++-
public/bluebey-studio/src/presets.js | 4 +
5 files changed, 162 insertions(+), 40 deletions(-)
(limited to 'public')
diff --git a/public/bluebey-studio/index.html b/public/bluebey-studio/index.html
index 3e4eb86..59e8b74 100644
--- a/public/bluebey-studio/index.html
+++ b/public/bluebey-studio/index.html
@@ -104,7 +104,7 @@ if (window.matchMedia('(max-width: 768px), (max-height: 500px) and (pointer: coa
- ドラッグ：回転 ／ ホイール：ズーム ／ 右ドラッグ：移動 ／ ぶるべーをドラッグ：移動
+ ドラッグ：回転 ／ ホイール：ズーム ／ 右ドラッグ：カメラ移動 ／ ぶるべーをドラッグ：カメラ移動 ／ Shift＋ドラッグ：ぶるべーを移動
2本指でドラッグ：カメラ移動（ぶるべーは動きません）／ 2本指をつまむ：ズーム
@@ -136,7 +136,7 @@ if (window.matchMedia('(max-width: 768px), (max-height: 500px) and (pointer: coa
ポーズ
- 右パネルの「ポーズ」でボーンを選び、X/Y/Zのスライダーを動かします。「ポーズ例」から始めると早いです。
- - ぶるべーをつかんでドラッグすると、ぶるべーを移動できます。Shiftを押しながら左右にドラッグすると影と一緒に左右に動き、上下にドラッグするとカメラ（見ている基準点）が上下に動きます。回転の中心をぶるべーに合わせたいときは、ぶるべーをダブルクリックします。
+ - ぶるべーをドラッグすると、カメラの中心が動いてぶるべーが画面の中を動きます。Shiftを押しながらドラッグすると、ぶるべー自体を移動できます。どちらも回転の中心はぶるべーのままなので、そのままドラッグで回転させてもぶるべーは画面から外れません。
- モデルをクリックすると、その場所にいちばん近いボーンが選ばれます。
- ギズモ（回転の輪）を直接ドラッグしても回せます。
- スライダーの値は「休めの姿勢（レストポーズ）」からの差分です。
0,0,0 で元の姿勢。
diff --git a/public/bluebey-studio/src/exporter.js b/public/bluebey-studio/src/exporter.js
index cc9c1ca..cad9ef0 100644
--- a/public/bluebey-studio/src/exporter.js
+++ b/public/bluebey-studio/src/exporter.js
@@ -10,13 +10,22 @@ import { roughenContours } from './handDrawn.js';
*/
/** Render the current view into an offscreen 2D canvas at an arbitrary size. */
-export function renderStill(view, { width, height, background }) {
+export function renderStill(view, { width, height, background, viewOffset = null }) {
const { renderer, scene, camera } = view;
const previousAspect = camera.aspect;
+ // The live camera may already carry a projection shift (the pan). It is stored
+ // in CSS pixels against the viewport, so it has to be re-applied for the
+ // export's own pixel size - and restored afterwards.
+ const previousView = camera.view ? { ...camera.view } : null;
renderer.setPixelRatio(1);
renderer.setSize(width, height, false);
camera.aspect = width / height;
+ if (viewOffset && (viewOffset.x || viewOffset.y)) {
+ camera.setViewOffset(width, height, -viewOffset.x * width, -viewOffset.y * height, width, height);
+ } else {
+ camera.clearViewOffset();
+ }
camera.updateProjectionMatrix();
applyBackground(renderer, background);
@@ -37,6 +46,8 @@ export function renderStill(view, { width, height, background }) {
canvas.getContext('2d').drawImage(renderer.domElement, 0, 0);
camera.aspect = previousAspect;
+ if (previousView) camera.view = previousView;
+ else camera.clearViewOffset();
camera.updateProjectionMatrix();
view.restore?.();
@@ -53,12 +64,12 @@ export function applyBackground(renderer, background) {
}
/** A PNG data URL of the current view, scaled up by `scale`. */
-export async function capturePNG(view, { scale = 2, background, width, height }) {
+export async function capturePNG(view, { scale = 2, background, width, height, viewOffset = null }) {
const baseWidth = view.width || view.renderer.domElement.clientWidth || 1280;
const baseHeight = view.height || view.renderer.domElement.clientHeight || 800;
const outWidth = Math.min(8192, Math.max(64, Math.round((width ?? baseWidth) * scale)));
const outHeight = Math.min(8192, Math.max(64, Math.round((height ?? baseHeight) * scale)));
- const canvas = renderStill(view, { width: outWidth, height: outHeight, background });
+ const canvas = renderStill(view, { width: outWidth, height: outHeight, background, viewOffset });
const blob = await canvasToBlob(canvas);
return { blob, canvas, width: outWidth, height: outHeight };
}
diff --git a/public/bluebey-studio/src/main.js b/public/bluebey-studio/src/main.js
index 7847355..57f0140 100644
--- a/public/bluebey-studio/src/main.js
+++ b/public/bluebey-studio/src/main.js
@@ -1298,6 +1298,9 @@ async function init() {
state.view.targetX = round2(root[0] ?? 0);
state.view.targetY = round2(halfHeight + (root[1] ?? 0));
state.view.targetZ = round2(root[2] ?? 0);
+ // The pan is a projection shift, so clearing it puts the character back in
+ // the middle of the frame as well.
+ state.view.viewOffset = { x: 0, y: 0 };
refresh('view');
app.panel?.sync();
}
@@ -1326,6 +1329,7 @@ async function init() {
resetPose: () => {
rig.reset();
state.pose = { bones: {}, root: [0, 0, 0] };
+ app.lastPoseRootOffset = [0, 0, 0];
applyState({}, { scope: 'pose', sync: true });
toast('ポーズをリセットしました');
},
@@ -1998,7 +2002,7 @@ async function init() {
width: canvas.clientWidth || window.innerWidth,
height: canvas.clientHeight || window.innerHeight,
restore: () => { resizeViewport(); applyStateBackgroundAgain(); },
- }, { scale, background }));
+ }, { scale, background, viewOffset: state.view.viewOffset }));
} finally {
if (drawn !== onScreen) styles.setStyle(onScreen);
}
@@ -2462,12 +2466,13 @@ async function init() {
help?.addEventListener('click', (event) => { if (event.target === help) toggleHelp(false); });
// --- the mouse on the character ----------------------------------------
- // 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.
+ // Plain drag on the character pans the view (the orbit target does not move,
+ // so rotating still turns around ぶるべー). Shift+drag - or a finger, which
+ // has no Shift - moves ぶるべー itself, carrying the camera with it so the
+ // pivot stays on its centre.
+ // 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.
const dragRay = new THREE.Raycaster();
const dragNdc = new THREE.Vector2();
const dragHitAt = (event) => {
@@ -2489,7 +2494,9 @@ async function init() {
const distance = camera.position.distanceTo(view.controls.target);
return (2 * distance * Math.tan((camera.fov * Math.PI) / 360)) / height;
};
+ const clampOffset = (value) => Math.min(2, Math.max(-2, value));
let modelDrag = null;
+ let viewPan = null;
canvas.addEventListener('pointerdown', (event) => {
if (event.button !== 0 || event.target !== canvas) return;
@@ -2498,15 +2505,14 @@ async function init() {
return;
}
if (!dragHitAt(event)) return;
- const root = state.pose.root ?? [0, 0, 0];
modelDrag = {
pointerId: event.pointerId,
- pan: event.shiftKey,
+ move: event.shiftKey || event.pointerType === 'touch',
x: event.clientX,
y: event.clientY,
lastX: event.clientX,
lastY: event.clientY,
- root: [...root],
+ offset: { ...(state.view.viewOffset ?? { x: 0, y: 0 }) },
};
view.controls.enabled = false;
stage.style.cursor = 'grabbing';
@@ -2515,50 +2521,57 @@ async function init() {
canvas.addEventListener('pointermove', (event) => {
if (!modelDrag || event.pointerId !== modelDrag.pointerId) return;
+ const rect = canvas.getBoundingClientRect();
+ const width = Math.max(1, rect.width);
+ const height = Math.max(1, rect.height);
const dx = event.clientX - modelDrag.x;
const dy = event.clientY - modelDrag.y;
- const k = dragScale();
- if (modelDrag.pan) {
- // Shift+drag: horizontal moves the character with its shadow (like a
- // plain drag); vertical moves the camera's reference point up/down.
+ if (modelDrag.move) {
+ const k = dragScale();
const stepX = event.clientX - modelDrag.lastX;
const stepY = event.clientY - modelDrag.lastY;
modelDrag.lastX = event.clientX;
modelDrag.lastY = event.clientY;
const root = state.pose.root ?? (state.pose.root = [0, 0, 0]);
- 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,
- // leaving the camera's reference point alone.
- state.pose.root = [
- round2(modelDrag.root[0] + dx * k),
- round2(modelDrag.root[1] - dy * k),
- modelDrag.root[2],
- ];
+ const delta = new THREE.Vector3(stepX * k, -stepY * k, 0);
+ root[0] = (root[0] ?? 0) + delta.x;
+ root[1] = (root[1] ?? 0) + delta.y;
+ // The camera travels with the character so the orbit pivot stays on its
+ // centre; the projection shift below then moves it with the pointer (and
+ // leaves the floor where it was on screen).
+ view.panBy(delta);
+ state.view.viewOffset = {
+ x: clampOffset(modelDrag.offset.x + dx / width),
+ y: clampOffset(modelDrag.offset.y + dy / height),
+ };
+ view.setViewOffset(state.view.viewOffset);
app.panel?.onRigChanged?.();
+ } else {
+ // Plain drag: pan the view only. The character keeps its world position
+ // and the orbit target stays on it.
+ state.view.viewOffset = {
+ x: clampOffset(modelDrag.offset.x + dx / width),
+ y: clampOffset(modelDrag.offset.y + dy / height),
+ };
+ view.setViewOffset(state.view.viewOffset);
}
app.needsRender = true;
});
const endModelDrag = (event) => {
if (!modelDrag || (event && event.pointerId !== modelDrag.pointerId)) return;
- const wasPan = modelDrag.pan === true;
+ const wasMove = modelDrag.move === true;
modelDrag = null;
view.controls.enabled = true;
stage.style.cursor = '';
if (event) { try { canvas.releasePointerCapture(event.pointerId); } catch { /* ignore */ } }
- if (wasPan) {
+ view.captureInto(state.view);
+ if (wasMove) {
if (state.pose.root) {
state.pose.root = state.pose.root.map((value) => Math.round((value ?? 0) * 1000) / 1000);
}
- app.actions.syncPanel?.();
- } else {
capturePose();
+ app.actions.syncPanel?.();
}
app.panel?.onRigChanged?.();
app.needsRender = true;
@@ -2566,6 +2579,41 @@ async function init() {
canvas.addEventListener('pointerup', endModelDrag);
canvas.addEventListener('pointercancel', endModelDrag);
+ // Right-drag pans too, through the same projection shift, so the pivot never
+ // drifts away from the character the way OrbitControls' own pan makes it.
+ canvas.addEventListener('pointerdown', (event) => {
+ if (event.button !== 2 || event.target !== canvas) return;
+ event.preventDefault();
+ event.stopImmediatePropagation();
+ viewPan = {
+ pointerId: event.pointerId,
+ x: event.clientX,
+ y: event.clientY,
+ offset: { ...(state.view.viewOffset ?? { x: 0, y: 0 }) },
+ };
+ stage.style.cursor = 'grabbing';
+ try { canvas.setPointerCapture(event.pointerId); } catch { /* ignore */ }
+ }, true);
+ canvas.addEventListener('pointermove', (event) => {
+ if (!viewPan || event.pointerId !== viewPan.pointerId) return;
+ const rect = canvas.getBoundingClientRect();
+ state.view.viewOffset = {
+ x: clampOffset(viewPan.offset.x + (event.clientX - viewPan.x) / Math.max(1, rect.width)),
+ y: clampOffset(viewPan.offset.y + (event.clientY - viewPan.y) / Math.max(1, rect.height)),
+ };
+ view.setViewOffset(state.view.viewOffset);
+ app.needsRender = true;
+ }, true);
+ const endViewPan = (event) => {
+ if (!viewPan || (event && event.pointerId !== viewPan.pointerId)) return;
+ viewPan = null;
+ stage.style.cursor = '';
+ if (event) { try { canvas.releasePointerCapture(event.pointerId); } catch { /* ignore */ } }
+ app.needsRender = true;
+ };
+ canvas.addEventListener('pointerup', endViewPan, true);
+ canvas.addEventListener('pointercancel', endViewPan, true);
+
canvas.addEventListener('dblclick', (event) => {
if (!dragHitAt(event)) return;
recenterCamera();
@@ -2687,6 +2735,8 @@ class ViewRig {
this.camera = this.cameras.persp;
this.controls = this.controlsMap.persp;
this.target = new THREE.Vector3(0, 1, 0);
+ // A projection shift in fractions of the canvas (see `setViewOffset`).
+ this.viewOffset = { x: 0, y: 0 };
this.autoDistance = 12;
// `orthoHeight` is where the orthographic camera is *now* - `apply()` writes
// the camera's actual height back into it - so the framing `frame()` chose
@@ -2725,6 +2775,41 @@ class ViewRig {
this.cameras.persp.aspect = aspect;
this.cameras.persp.updateProjectionMatrix();
this.setOrthoHeight(this.orthoHeight);
+ this.applyViewOffsetToCameras();
+ }
+
+ /**
+ * Slide the rendered window inside a larger virtual image, in fractions of the
+ * canvas. The camera and its target do not move, so the orbit pivot stays on
+ * ぶるべー while the character slides across the frame - which a camera pan
+ * cannot do, because OrbitControls' pan moves the target too.
+ */
+ setViewOffset(offset) {
+ const x = Number(offset?.x);
+ const y = Number(offset?.y);
+ this.viewOffset = {
+ x: Number.isFinite(x) ? x : 0,
+ y: Number.isFinite(y) ? y : 0,
+ };
+ this.applyViewOffsetToCameras();
+ }
+
+ applyViewOffsetToCameras() {
+ const width = this.domElement.clientWidth || 1;
+ const height = this.domElement.clientHeight || 1;
+ const px = Math.round(this.viewOffset.x * width);
+ const py = Math.round(this.viewOffset.y * height);
+ for (const camera of Object.values(this.cameras)) {
+ if (px || py) camera.setViewOffset(width, height, -px, -py, width, height);
+ else camera.clearViewOffset();
+ }
+ }
+
+ /** Move the camera and its reference point together, in world space. */
+ panBy(delta) {
+ this.target.add(delta);
+ for (const controls of Object.values(this.controlsMap)) controls.target.add(delta);
+ for (const camera of Object.values(this.cameras)) camera.position.add(delta);
}
setOrthoHeight(height) {
@@ -2801,6 +2886,7 @@ class ViewRig {
this.orthoHeight = this.cameras.ortho.top - this.cameras.ortho.bottom;
this.cameras.persp.updateProjectionMatrix();
this.cameras.ortho.updateProjectionMatrix();
+ this.setViewOffset(viewState.viewOffset);
}
/**
@@ -2824,6 +2910,10 @@ class ViewRig {
viewState.targetX = Math.round(target.x * 1000) / 1000;
viewState.targetY = Math.round(target.y * 1000) / 1000;
viewState.targetZ = Math.round(target.z * 1000) / 1000;
+ viewState.viewOffset = {
+ x: Math.round(this.viewOffset.x * 100000) / 100000,
+ y: Math.round(this.viewOffset.y * 100000) / 100000,
+ };
if (this.projection === 'ortho') {
const ortho = this.cameras.ortho;
viewState.orthoHeight = Math.round((ortho.top - ortho.bottom) * 1000) / 1000;
diff --git a/public/bluebey-studio/src/panel.js b/public/bluebey-studio/src/panel.js
index 69c8454..ae45e48 100644
--- a/public/bluebey-studio/src/panel.js
+++ b/public/bluebey-studio/src/panel.js
@@ -298,7 +298,7 @@ export function buildPanel(app, root) {
}
poseSection.add(hint('ボーンは上の一覧から選びます。スライダーは「休めの姿勢からの差」です。'
- + 'ビューポートのぶるべーは、ドラッグで移動、Shift＋ドラッグで向きを変えられます。'));
+ + 'ビューポートのぶるべーは、ドラッグでカメラ移動、Shift＋ドラッグでぶるべーを移動できます。どちらも回転の中心はぶるべーです。'));
// こまかい設定: the whole-body nudge and the rotation gizmo are tweaks, not the
// main way in, so they stay folded away inside the bone section.
@@ -351,8 +351,25 @@ export function buildPanel(app, root) {
app.animator.reset();
app.needsRender = true;
}
- state.pose = { bones: {}, root: [0, 0, 0] };
- applyPatch(state.pose, preset.pose ?? {});
+ // Keep where the user put ぶるべー: a pose changes the limbs and may lift the
+ // body off the ground, but it must not move the character back to the origin.
+ // `app.lastPoseRootOffset` remembers how much the previous pose added, so
+ // switching poses does not stack those lifts.
+ const previous = app.lastPoseRootOffset ?? [0, 0, 0];
+ const current = state.pose.root ?? [0, 0, 0];
+ const offset = preset.pose?.root ?? [0, 0, 0];
+ const base = [
+ (current[0] ?? 0) - (previous[0] ?? 0),
+ (current[1] ?? 0) - (previous[1] ?? 0),
+ (current[2] ?? 0) - (previous[2] ?? 0),
+ ];
+ const { root: _ignore, ...poseWithoutRoot } = preset.pose ?? {};
+ state.pose = {
+ bones: {},
+ root: [base[0] + offset[0], base[1] + offset[1], base[2] + offset[2]],
+ };
+ applyPatch(state.pose, poseWithoutRoot);
+ app.lastPoseRootOffset = [...offset];
if (!state.pose.root) state.pose.root = [0, 0, 0];
replace({}, 'pose');
sync();
diff --git a/public/bluebey-studio/src/presets.js b/public/bluebey-studio/src/presets.js
index 75a8373..d9ed3e4 100644
--- a/public/bluebey-studio/src/presets.js
+++ b/public/bluebey-studio/src/presets.js
@@ -63,6 +63,10 @@ export function defaultState() {
backgroundDarken: 0, // 0..1 dark veil, helps the character read
backgroundScale: 1,
backgroundOffset: { x: 0, y: 0 },
+ // Screen-space shift of the whole view, in fractions of the canvas. This is
+ // the "move the camera centre" pan: the orbit target stays on ぶるべー, so
+ // rotating still turns around the character.
+ viewOffset: { x: 0, y: 0 },
// "Hide ぶるべー behind a tree" mask, made by tapping the photo. `mask` is
// opaque where the object is; the export punches the character out there.
occlusionMask: null,
--
cgit v1.3.1