[2026/7/22]

[Web App] Lain Clock — Three.js と MMD を使った Web 時計アプリ

Lain Clock とは

Lain Clock は、Three.js と MMD を使って制作した Web 時計アプリです。

MMD モデルを表示しつつ、

アナログ時計 / デジタル時計
静止画・動画壁紙
床デザイン
MotionAssets（VMD / VPD）
セリフ＋ポーズ（model.json）

などを組み合わせて、見た目や挙動をカスタムできる構成になっています。

WebXR（Meta Quest 3）にも対応しており、VR空間内で時計を眺めることもできます。

[Web App] Lain Clock — Three.js と MMD を使った Web 時計アプリ

動画(PC)

ローカルLLMで会話

動画(VR)

アプリページ

以下のページからアプリを起動できます。

Lain Clock

Lain Clock Model ZIP Builder

カスタムモデルの ZIP を作成するツールも用意しています。

主な機能

現時点で対応している主な機能は次の通りです。

WebXR（Meta Quest 3 対応）
アナログ時計 / デジタル時計表示（天気・気温・最高最低気温）
静止画壁紙 / 動画壁紙（MP4）
時計色・床デザインの変更
MotionAssets（VMD / VPD）管理
カスタムモデル追加（PMX + テクスチャの ZIP をドロップ）
セリフ＋ポーズ設定（model.json）
設定UIからの変更
localStorage / IndexedDB による保存と復元
全データリセット（Reset All Data）
スマホ対応
プリセット保存復元機能

Settings UI を通して各種設定を変更し、その状態を保持できるようにしています。

動画壁紙について: 高解像度の動画（4K等）はGPU負荷が高くなります。720p 30fps 以下の動画を推奨します。

スマートフォンに対応

スマートフォンで閲覧時、UIを切り替え、MMDモデルを自動リサイズ。

設定のリアルタイムプレビュー

設定画面で時計の位置やサイズ、色の設定を変更時にリアルタイム更新します。

四角的にわかりやすく設定できるようにしています。

各パネルの解説

Model

モデルの管理パネルです。

Select Model: IndexedDB に保存されたモデル一覧から選択・削除できます。ZIP をドロップして追加し、名前をクリックでシーンに配置。最大3体まで同時表示可能です。
Display: Shadows / Wireframe / Show Bones の表示切り替え。
Quick Stats: 現在表示中のモデルの Meshes / Verts / Tris / Bones を確認できます。

Info

現在読み込まれているモデルの詳細情報を表示します。

PMX / VMD のファイルパス
読み込み日時
Meshes / Verts / Tris / Bones / Morphs / Materials のカウント
Materials 一覧（マテリアル名の確認用）

Rig

ボーンとモーフの確認・操作パネルです。

Search: ボーン名・モーフ名で検索
Bones / Morphs 切り替え: ボーン一覧またはモーフ一覧を表示
Selection: 選択したボーン/モーフに値を適用（Apply）・リセット（Reset）

Debug

開発・デバッグ用の機能です。

Save PNG / Copy PNG: 現在の画面をキャプチャ
Copy mmdInfo JSON: モデル情報を JSON でコピー

Wallpaper

壁紙の変更パネルです。

Enable Texture: 壁紙テクスチャの有効/無効
Wallpaper: 静止画壁紙の選択・追加・削除。画像ファイルをドロップで追加できます。
Wallpaper Video: 動画壁紙（MP4）の追加・選択・削除。720p 30fps 以下の動画を推奨します。
Tint Color: 壁紙の色味（R / G / B）とBrightnessを調整

Settings

アプリ全体の設定パネルです。設定は Save で localStorage に保存され、リロード後も復元されます。

calendar

表示の有無
Color: タイトル・文字色の変更
Scale: calendarの大きさ
Margin W / H: 表示位置の調整
Alpha: 透明度

Analog Clock

Color: 時計本体・針・マーカーの色
Scale: 時計の大きさ
Margin W / H: 表示位置の調整
Alpha: 透明度

Digital Clock

Date Color / Time Color / Small Color: 日付・時刻・曜日等の文字色
UI Alpha: 文字全体の透明度
Time Glow: 時刻文字の発光強度
Scale: デジタル時計の大きさ
Margin W / H: 表示位置の調整

Floor

Color: 床の側面色
Brick Scale: レンガパターンの密度
Mortar: 目地の太さ
Amp: 色ムラの強さ
Brick Color / Mortar Color: レンガと目地の色

Floor:Pattern

Paw Print

Hexagon

Circuit

Stars

Wave

Diamond

NeonGrid

Mirror

Wave Mirror

Motion

Default VMD / VPD: デフォルトで再生するモーション・ポーズの選択
VMD Assets / VPD Assets: 登録済みモーションの一覧・有効/無効切り替え・削除

データ管理

Reset: 設定値をデフォルトに戻します
Save: 現在の設定を保存します
Reset All Data: IndexedDB の全データ（Models, Motions, Wallpaper）と設定を削除してリロードします

ローカルアセット管理

Lain Clock では、ローカルアセット管理に IndexedDB を使っています。

保存対象の例:

PMX
VMD
VPD
壁紙画像

一方で、現在の設定状態そのものは localStorage に保存しています。

つまり、

アセット本体は IndexedDB
現在の設定状態は localStorage

という役割分担です。

これにより、リロード後も

壁紙
時計色
床設定
Motion 設定

などを復元できるようにしています。

プリセット機能

プリセット保存：現在の画面状態（色・スケール・床のパターン・モーション等）に名前をつけてLocalStorageに保存。
ワンクリック復元：一覧からリストアボタンを押すだけでその状態を再現。
JSON出力 / 入力：プリセットをファイルとして書き出し。別ブラウザや環境に持っていったり、バックアップとして保存可能。

Motion / model.json について

モーション管理は、VMD / VPD を単なるファイルとして扱うだけではなく、model.json と組み合わせて管理できるようにしています。

例えば motion セクションでは、

defaultVmd
defaultPvd
vmdList
pvdList

を定義し、モデル側のデフォルト動作やポーズの対応付けを行います。

ZIP Builder でカスタムモデルを追加する

カスタムモデルを時計アプリに追加するには、PMX + テクスチャ + model.json をまとめた ZIP が必要です。

Lain Clock Model ZIP Builder を使えば、この ZIP を簡単に作れます。

使い方:

PMXファイルとテクスチャ画像をドロップ
「基本設定」で Model Name / Scale / Walk Speed などを調整
「model.json」エリアでセリフ・ポーズを編集（テンプレートが自動生成されます）
「ZIP作成してダウンロード」をクリック

出力される ZIP は model.pmx / model.json / tex/* の固定構造で、時計アプリの Model パネルにそのままドロップして使えます。

model.json で設定できる項目:

talk — セリフのテキスト・ポーズ・モーフ表情、発話間隔
walk — 歩行速度、到着判定の距離
model — 表示スケール
motion — デフォルト VMD / VPD の指定

開発途中の model.json のサンプル

{
  "talk": {
    "defaultPose": "talkFront",
    "messages": [
      { "text": "ねむい…", "pose": "sleep" },
      { "text": "もうこんな時間？", "pose": "talkFront" },
      { "text": "少し座って休もうかな", "pose": "sit" },
      { "text": "今日は集中できてる？" },
      {
        "text": "休憩しよ？",
        "pose": "smile",
        "morphs": [
          { "name": "ウィンク", "value": 1.0 },
          { "name": "笑い", "value": 0.4 }
        ]
      },
      { "text": "コーヒー淹れてきていい？", "pose": "talkFront" },
      { "text": "少し休んで、お水飲む？", "pose": "smile" }
    ],
    "minDelay": 8,
    "maxDelay": 20,
    "baseDuration": 3.0,
    "perChar": 0.05
  },
  "walk": {
    "speed": 2.8,
    "arriveRadius": 0.1,
    "marginX": 1.0,
    "marginZ": 0.5
  },
  "model": {
    "scale": 0.3
  },
  "motion": {
    "defaultVmd": "walk",
    "defaultPvd": "talkFront",
    "vmdList": [{ "id": "walk", "name": "walk", "filePath": "/motions/walk.vmd", "enabled": true }],
    "pvdList": [
      { "id": "talkFront", "name": "talkFront", "filePath": "/poses/talk_front.pvd", "enabled": true },
      { "id": "sleep", "name": "sleep", "filePath": "/poses/sleep.pvd", "enabled": true },
      { "id": "smile", "name": "smile", "filePath": "/poses/smile.pvd", "enabled": true },
      { "id": "sit", "name": "sit", "filePath": "/poses/sit.pvd", "enabled": true }
    ]
  }
}

実装の流れは、以下の記事にまとめています。

[Three.js #32] MMD + IndexedDB ローカルアセット管理
[Three.js #35] MMD時計アプリの設定UIを実装 — 壁紙・時計色・床シェーダー・MotionAssets保存対応

今後の予定

今後追加したい内容としては、次のようなものを考えています。

テーマ機能
設定の export / import
model.json の Web 編集
天気APIの位置情報設定（現在は東京固定）
音声有効化後の時報 / タイマー / アラーム機能
MotionAssets / Wallpaper の個別削除UI

時計アプリとして常用することも見据えて、時間関連の機能は今後の拡張候補です。

まとめ

Lain Clock は、Three.js + MMD を使って制作した Web 時計アプリです。

壁紙（静止画・動画）、時計色、床デザイン、MotionAssets などを設定UIから変更でき、localStorage / IndexedDB を使って状態を保存・復元できます。

カスタムモデルの追加は、PMX + テクスチャの ZIP をドロップするだけ。ZIP Builder を使えば、セリフやポーズ設定を含んだ model.json 付きの ZIP も簡単に作れます。

WebXR にも対応しているので、Meta Quest 3 で VR 空間内に時計を置くこともできます。

更新履歴

[2026/08/06]:
・特定モデルで MMDAnimationHelper の GrantSolver が undefined.quaternion でクラッシュする問題の修正
・Floor Pattern (Mirror / Wave Mirror) 追加
[2026/07/28]:
・チャット機能（ローカルLLM）が動作しなかった問題を修正
・音声の選択機能を追加（要VOICEVOX）
[2026/07/27]:
・カレンダー機能追加
・カレンダーに祝祭日を追加
・カレンダーをHTML、CSSから3D空間で表示されるCANVASテクスチャに変更
[2026/07/26]:
・プリセット管理
　・ WebGL設定の保存・復元・JSON Export/Import
[2026/07/24]:
・スマホ対応
　・ UI折りたたみ
　・カメラ自動調整
　・設定リアルタイムプレビュー
[2026/07/23]:
・ZIPファイル読み込み時に文字化けする問題を修正
・床パターン9種追加、モデル復元・透明度・設定リアルタイム更新
[2026/07/22]:
・公開