Lain Clock

Lain Clock とは

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

MMD モデルを表示しつつ、

  • アナログ時計
  • デジタル時計
  • 壁紙
  • 床シェーダー
  • MotionAssets

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

単なる時計表示だけではなく、壁紙や時計色、床の見た目まで調整できるカスタマイズ可能な時計アプリ として作っています。

アプリページ

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

※現在未公開

主な機能

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

  • アナログ時計 / デジタル時計表示
  • 壁紙変更
  • 時計色変更
  • 床シェーダー調整
  • MotionAssets（VMD / VPD）管理
  • 設定UIからの変更
  • localStorage / IndexedDB による保存と復元

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

設定できる項目

時計

  • アナログ時計の色
  • アナログ時計の透明度
  • デジタル時計の文字色
  • UI Alpha
  • 時計位置やスケール

壁紙

  • 壁紙の切り替え
  • Tint Color
  • テクスチャ表示の有効 / 無効
  • 保存済み壁紙の復元

床

  • 側面色
  • レンガ密度
  • 目地の太さ
  • ムラの強さ
  • レンガ色
  • 目地色

Motion

  • VMD / VPD 一覧管理
  • Default VMD / VPD 選択
  • Enabled 切り替え
  • Delete

ローカルアセット管理

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

保存対象の例:

  • PMX
  • VMD
  • VPD
  • 壁紙画像

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

つまり、

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

という役割分担です。

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

  • 壁紙
  • 時計色
  • 床設定
  • Motion 設定

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

Motion / model.json について

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

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

  • defaultVmd
  • defaultPvd
  • vmdList
  • pvdList

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

将来的には、この model.json 自体も Web 上から編集しやすくしていきたいと考えています。

開発途中の 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 編集
  • Opening ロゴ演出
  • 音声有効化後の時報 / タイマー / アラーム機能

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

まとめ

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

壁紙、時計色、床シェーダー、MotionAssets などを設定UIから変更でき、localStorage / IndexedDB を使って状態を保存・復元できます。

まだ拡張したい要素はありますが、現時点でも 初期版としてかなりまとまった構成 になってきました。

まずはこのページを紹介ページとして整備しつつ、今後も少しずつ機能を広げていく予定です。