ブラウザで動く
山手線 3Dジオラマ
JR東日本の東京の街並みを立体的に再現し、山手線を走らせて楽しめる無料のWeb鉄道模型シミュレーターです。インストール不要・登録不要、PC・スマホ両対応。開いた瞬間からNゲージ感覚の運転体験が始まります。
山手線 3Dジオラマとは
「山手線 3Dジオラマ」は、東京を走る山手線をブラウザ上で精密に再現した、無料のWeb鉄道シミュレーターです。インストール不要・登録不要で、PCとスマートフォンの両方からアクセスでき、Nゲージ感覚の運転体験をすぐに楽しめます。
国土交通省が公開する3D都市モデル「PLATEAU」を活用し、東京駅・新宿駅・渋谷駅・池袋駅など主要ターミナル周辺のビル群を立体的に再現。MapLibre GL JS と Three.js を組み合わせ、リアルとデフォルメの間にある「鉄道模型ジオラマ」ならではの世界観を表現しました。実車を参考にした E235系 の車両モデルが、ジョイント音・VVVFインバータ音とともに山手線一周を走り抜けます。
本サイトは個人開発の非商用プロジェクトであり、JR東日本および各鉄道事業者とは一切関係のない二次的創作物です。詳しい背景・運営体制は 運営者情報ページ で公開しています。
主な特徴
🎮 マスコン式の運転操作
ノッチ操作で加減速し、駅への定時到着を目指します。ブレーキングが甘いとオーバーラン、強すぎると手前停車となり運転技術が問われます。
🎥 追従カメラ（おいかけモード）
走行する列車をドローン撮影のような視点で自動追尾。複数のカメラアングルを切り替えられ、動く列車を眺めるだけの癒し用途にも。
🗺 3つのマップ表示モードNEW
「昼（模型）」「夜景」「航空写真」を切り替えて、同じ路線でも異なる雰囲気を楽しめます。夜景モードではビルの窓に灯りがともり、電車も車内灯・前照灯・尾灯を点灯して走ります。
🔊 本格的な音声演出
VVVFインバータ音・ジョイント音・コンプレッサ音・ドア開閉音など、実車を意識したサウンドを速度と状態に応じて再生。
📱 PC・スマホ両対応
PCはキーボード（Z/X/C・↑↓）、スマホは画面下部のタッチコントローラーで操作。どの環境でも快適に運転できます。
📏 駅間距離の自動計算
走行中の現在位置から次駅までの距離を常時表示。停止位置の感覚を掴みやすくしています。
遊び方ガイド
ページ上部の「PLAY」ボタンを押すとシミュレーター本体が起動し、東京駅から走行が始まります。PCの場合はキーボードでマスコン（加速ノッチ）とブレーキを、スマートフォンの場合は画面下部のタッチコントローラーで操作します。駅に停車する際は次駅までの距離表示を見ながら徐々にブレーキをかけ、定位置（ホーム中央）に停車させましょう。
運転操作を行わず「おいかけモード」で動く列車を眺めるだけの楽しみ方も可能です。BGM代わりに走らせておくと、リラックスタイムにも向いています。
推奨環境
- PC: Google Chrome / Microsoft Edge / Safari / Firefox の最新版。専用GPU 搭載機でより快適に動作します。
- iPhone: iOS Safari 15 以降
- Android: Chrome 110 以降
- 通信環境: 初回アクセス時に3Dモデルとテクスチャを読み込むため、数MB程度の通信が発生します。Wi-Fi環境でのプレイを推奨します。
技術ブログ
本プロジェクトの開発過程で得た知見や、ブラウザ3D・地図ライブラリ・WebGL パフォーマンスチューニングのノウハウを、技術ブログとして公開しています。実装で詰まったポイントや解決過程まで踏み込んで書いているので、同種の開発をされている方の参考になれば幸いです。
- AIの活用によるアート作品の価値について技術革新は積み上げてきたものの価値を下げてきた。AIによる創作はアートをどう変えるのかを考察したエッセイ。
- エンジニアのAIエージェントとの付き合い方個人開発でAIエージェントをどう使うか。効くプロンプト・効かないプロンプトの実例で解説。
- 運営3ヶ月の振り返り（開発ポストモーテム）公開から3ヶ月で得た学びと、技術的・運用的な反省点をまとめました。
- スマホで CPU が 100% になった話iPhone 実機で発覚した描画負荷問題と、それを段階的に解消した手法。
- ユーザーフィードバックで直したバグ Top 5公開後にユーザーから寄せられた問題報告とその対応を5つ厳選して解説。
- Chrome DevTools でメモリリークを追いかけた夜「1時間プレイするとブラウザが落ちる」現象の犯人を特定するまでの調査ログ。
- PLATEAUが重すぎて落ちた話3D都市モデルのLOD2データをブラウザで扱う際の現実的な軽量化アプローチ。
- MapLibre GL JSとThree.jsで山手線を走らせる技術本プロジェクトの中核技術。MapLibre のカスタムレイヤーとThree.jsの連携ポイント。
プロジェクトの背景
本プロジェクトは Web エンジニアの個人開発として始まりました。子どもの頃に遊んだ Nゲージ 鉄道模型の感覚を、現代のブラウザ技術でどこまで再現できるか——そんな技術的探求と懐かしさの両方が動機です。市販の鉄道シミュレーターは素晴らしいものが多い一方、インストールが必要だったり高スペックPCを要求したりで、気軽に遊ぶにはハードルがありました。「ブラウザを開くだけで、スマホからでもすぐ電車を走らせられる」、そんな軽さを大切に設計しています。
使用している技術スタックはすべてオープンソースで、コミュニティが活発に維持しているライブラリのみで構成しています。データソースも PLATEAU（国土交通省）や OpenStreetMap といった公的・公共データを優先しており、商用利用・二次利用のしやすさを意識した設計です。
関連ページ
- 運営者情報・お問い合わせ — 運営者プロフィール、編集方針、お問い合わせ先
- 技術ブログ一覧 — 全記事を新着順に掲載
- お知らせ・更新履歴
- 公式X @wota_gimu
- 利用規約 / プライバシーポリシー