Yamanote 3D Diorama

E235系 運転シミュレーター
ただいま
東京
次は 有楽町
Train Marker
Yamanote 3D Diorama

ブラウザで動く山手線3Dシミュレーターです。起動には3Dマップと車両モデルの読み込みが必要なため、ボタンを押すと開始します。

PCはキーボード Z/X/C・↑↓ で操作 / スマホは画面下のボタンで操作
運転操作 (MASTER CONTROL)
N
0km/h
POWER
BRAKE
REVERSE
REV EB B2 B1 N P1 P2 P3 P4 P5
カメラ操作 (おいかけモード)
状態: 自由視点モード
情景設定 (OPTION)
N
0 km/h

山手線 3Dジオラマとは

「山手線 3Dジオラマ」は、東京を走る山手線をブラウザ上で精密に再現した、無料のWeb鉄道シミュレーターです。インストール不要・登録不要で、PCとスマートフォンの両方からアクセスでき、Nゲージ感覚の運転体験をすぐに楽しめます。

国土交通省が公開する3D都市モデル「PLATEAU」を活用し、東京駅・新宿駅・渋谷駅・池袋駅など主要ターミナル周辺のビル群を立体的に再現。MapLibre GL JSとThree.jsを組み合わせ、リアルとデフォルメの間にある「鉄道模型ジオラマ」ならではの世界観を表現しました。実車を参考にしたE235系の車両モデルが、ジョイント音・VVVFインバータ音とともに山手線一周を走り抜けます。

本サイトは個人開発の非商用プロジェクトであり、JR東日本および各鉄道事業者とは一切関係のない二次的創作物です。詳しい背景や運営体制は 運営者情報ページ で公開しています。

主な特徴

遊び方ガイド

画面中央の「START」ボタンを押すとシミュレーターが起動し、東京駅から走行が始まります。PCの場合はキーボードでマスコン（加速ノッチ）とブレーキを、スマートフォンの場合は画面下部のタッチコントローラーで操作します。駅に停車する際は次駅までの距離表示を見ながら徐々にブレーキをかけ、定位置（ホーム中央）に停車させましょう。

運転操作を行わず「おいかけモード」で動く列車を眺めるだけの楽しみ方も可能です。BGM代わりに走らせておくと、リラックスタイムにも向いています。

推奨環境

技術ブログ ピックアップ

本プロジェクトの開発過程で得た知見や、ブラウザ3D・地図ライブラリ・WebGLパフォーマンスチューニングのノウハウを、技術ブログとして公開しています。実装で詰まったポイントや解決過程まで踏み込んで書いているので、同種の開発をされている方の参考になれば幸いです。

全21記事を技術ブログ一覧で見る →

プロジェクトの背景

本プロジェクトはWebエンジニアの個人開発として始まりました。子どもの頃に遊んだNゲージ鉄道模型の感覚を、現代のブラウザ技術でどこまで再現できるか――そんな技術的探求と懐かしさの両方が動機です。市販の鉄道シミュレーターは素晴らしいものが多い一方、インストールが必要だったり高スペックPCを要求したりで、気軽に遊ぶにはハードルがありました。「ブラウザを開くだけで、スマホからでもすぐ電車を走らせられる」、そんな軽さを大切に設計しています。

使用している技術スタックはすべてオープンソースで、コミュニティが活発に維持しているライブラリのみで構成しています。データソースもPLATEAU（国土交通省）やOpenStreetMapといった公的・公共データを優先しており、商用利用・二次利用のしやすさを意識した設計です。

関連ページ