公開中 · オープンソース
Home Server 3D
私のAWS Lightsailサーバーを小さな3Dの部屋で見せます。ラックのLEDがサーバーの実際の状態に合わせて光ります。

- 種類
- 3D Webページ · Blenderのシーン + three.js
- 期間
- 2026年10月
- データ
- Grafana Cloudのサーバー指標、1分ごと
- 運用環境
- Cloudflare Pages · Pages Functions
概要
Home Server 3Dは、私のAWS Lightsailサーバーを小さな3Dのサーバー室として見せます。ラックの機器1台が1サービス、LED 1つが1コンテナです。
シーンはBlenderで作り、three.jsで表示します。小さなステータスAPIがGrafana Cloudから状態だけを読むので、トークンがブラウザに出ることはありません。
主な機能
- 実際の状態で光るLED
- LED 1つがコンテナ1つで、色はリアルタイムの指標で決まります。右のパネルでCPU・メモリ・ディスクの使用率とサービスごとの状態を見られ、サービスを選ぶとカメラがラックに寄ります。
- 実データが出るモニター
- 壁のモニターは直近1時間のCPU・メモリ・ネットワーク・ディスクを1分ごとに描きます。机のモニターは最近のコミットをターミナルのように表示し、各コミットはGitHubにつながります。
- 昼と夜
- 見る人の現地時刻に合わせて、午前6時から午後6時までは昼になります。太陽と月のスイッチで手動でも切り替えられます。
- カメラ
- ドラッグで回し、スクロールで拡大します。キーボードでは矢印キーかWASDで移動し、Q・Eで回し、+・-で拡大します。
- 公開しても安全に
- APIがコンテナを正常・注意・エラーだけに絞り、1分間キャッシュします。訪問者がGrafana Cloudに直接触れることはなく、実際のサーバー名やコンテナ名もブラウザに出ません。
構成図
技術構成
- 3D
- Blender 5.2 · Pythonのシーンスクリプト · Cycles · glTF(GLB)+ Draco
- Web
- three.js 0.170 · HTML · CSS · JavaScript(ESモジュール、ビルドツールなし)
- API
- Cloudflare Pages Functions · Cache API · GitHub REST API
- モニタリング
- Grafana Cloud(Prometheus、PromQL)· Grafana Alloy · cAdvisor
- デプロイ
- Cloudflare Pages · git pushでデプロイ


ライブのページは私の実際のサーバーを表示します。アドレスの後ろに?demo=1を付けると、例のデータで見られます。スクリーンショットは例のデータで、そのほかの画像はBlenderのシーンをレンダリングしたものです。