ぶるべースタジオ

From d5b8d58a82a040a2facb5d226b64648aa66b2629 Mon Sep 17 00:00:00 2001 From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> Date: Fri, 9 Oct 2026 09:47:24 +0900 Subject: bluebey-studio: /bluebey-studio/ をテスト公開用にBasic認証つきで復帰 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 準拠版アプリを public/bluebey-studio/ に戻し、.htaccess でBasic認証（ユーザー bluebey）を設定。/bluebey-studio/ のみ保護し他は素通し。本公開は市の確認後に認証を外す想定。 --- public/bluebey-studio/index.html | 241 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 241 insertions(+) create mode 100644 public/bluebey-studio/index.html (limited to 'public/bluebey-studio/index.html') diff --git a/public/bluebey-studio/index.html b/public/bluebey-studio/index.html new file mode 100644 index 0000000..7111b9b --- /dev/null +++ b/public/bluebey-studio/index.html @@ -0,0 +1,241 @@ + + + + + +ぶるべースタジオ + + + + + + + + + + + +

+

+

+ + + + + +

+ ドラッグ：回転　／　ホイール：ズーム　／　右ドラッグ：移動　／　ぶるべーをドラッグ：移動 +

+

+ 2本指でドラッグ：カメラ移動（ぶるべーは動きません）／ 2本指をつまむ：ズーム
+ ぶるべーの上で1本指：ぶるべーを移動（上下で高さも）／何もない所で1本指：回転 +

+ +

+ +

+

+

+

ぶるべーを読み込んでいます…

+

+

+

+ +

+

+ +

ぶるべースタジオの使い方

+ +

これは何？

+

+ bluebey.glb（ぶるべーの3Dモデル）をブラウザで読み込み、自由にポーズをとらせ、 + 顔の表情を自由に作って、2Dの画像（PNG）として書き出せるスタジオです。 + 元の手描きパーツ（GIMPで作った目と口の画像）もそのまま使えます。 +

+ +

ポーズ

+

右パネルの「ポーズ」でボーンを選び、X/Y/Zのスライダーを動かします。
モデルをクリックすると、その場所にいちばん近いボーンが選ばれます。
ギズモ（回転の輪）を直接ドラッグしても回せます。
スライダーの値は「休めの姿勢（レストポーズ）」からの差分です。0,0,0 で元の姿勢。
気に入ったポーズは「ポーズを保存」でファイルに残せます。

+ +

スマホでの操作

+

2本指でぐりぐり：カメラ（見ている基準点）を動かします。ぶるべーは基準点から動きません。
2本指をつまむ（ピンチ）：ズーム（寄る／引く）。
ぶるべーの上で1本指でぐりぐり：ぶるべーを基準点から動かします。上下に動かすと高さも変わります。
何もない所で1本指でぐりぐり：カメラが回ります。
パネル（下のシート）は、上の横線（ハンドル）をドラッグすると上下に動かせます。

+ +

表情

+

目：開き具合（まばたき・ウインク）、目線（上下左右）、瞳の大きさ、ハイライト、閉じ方の種類。
口：笑いの深さ、口の開き、舌、口角の点、太さ、色。
「目線パッド」をドラッグすると、選んだ側の目線が動きます（「左右を連動させる」中は両目）。
プリセット（にっこり・ウインク・びっくり…）から始めると早いです。
「手描きパーツを使う」を選ぶと、元のGIMP製パーツに切り替わります。

+ +

3Dのまま／2Dにする

+

「表示」でリアル／フラット（トゥーン）／線画／線画（透明）を切り替えます。
線画は輪郭線＋白ぬり。線の太さと色を変えられます。
「正投影」にすると遠近のゆがみがなくなり、図面のような絵になります。
背景は透明・白・好きな色から選べます。PNG保存は透明のまま保存できます。

+ +

キーボード

+

S PNG保存
C 画像をコピー
Tab パネルの表示/非表示
? このヘルプ
1–5 カメラの向き（正面・斜め・横・後ろ・俯瞰）
R ポーズをリセット
G ギズモの切り替え
Space 生きている演出（ゆれ・まばたき）の開始/停止

+ +

書き出しのヒント

+

PNGは「書き出しサイズ」を2倍・3倍にすると高解像度になります（印刷やスライド用）。
ポーズと表情の全設定は「設定を保存」でJSONに残せます。READMEも参照してください。

+

+

+ + + + + + + + -- cgit v1.3.1