本文へスキップ
作品一覧
公開中 · オープンソース

Home Server 3D

私のAWS Lightsailサーバーを小さな3Dの部屋で見せます。ラックのLEDがサーバーの実際の状態に合わせて光ります。

デスクトップ画面の3Dサーバー室。黒いサーバーラックのあるアイソメトリックの部屋と、6つのサービスの状態ランプが並ぶ右のパネル
種類
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に直接触れることはなく、実際のサーバー名やコンテナ名もブラウザに出ません。

構成図

Home Server 3D — 構成図Cloudflare PagesVisitorBrowser3D web viewerthree.js · GLBStatus APIPages FunctionsGrafana CloudPrometheusAWS Lightsail13 containers · AlloyMy PCBlender · GitStatusPromQLMetricsgit push
A visitor opens the 3D page on Cloudflare Pages, and a status API reads the Lightsail server's metrics from Grafana Cloud and returns a public summary. The scene is built in Blender on my PC and deployed with git push.

技術構成

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でデプロイ
同じ部屋の夜の様子。暖かい照明と光るラックのLED
夜のラックのアップ。緑と白に光っている

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