Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita

これは MIERUNE AdventCalendar 2023 24日目の記事です! 昨日は@northprintさんによるSvelteKitでURLクエリパラメーターの操作をするでした。 はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはコチラ 使用するデータ 今回は、G空間情報センターで公開されている「新宿駅屋内地図オープンデータ」の統合版（ShapeFile）を使用します。 データについての詳細は製品仕様書に記載されています。 この記事のように、データの加工利用には以下の出典が必要となります。 コンテンツを編集・加工等して利用する場合は、上記出典とは別に、編集・加工等を行ったことを記載してください。なお、編集・加工した情報を、あたかも国（又は府省等）が作成したかのような態様で公表・利用してはいけません。（コンテンツを編集・

[kazuph1986]

何世代か前のスマホで見ても読み込みも動作もヌルサクで可能性しか感じなかった。すごい。

[masalib]

すごい技術。田舎の人や海外の人からみるとダンジョンみたいに見えるね

[mayumayu_nimolove]

うーん、やっぱちょっとやっとこうかな。webGL系の話はちょくちょく来るんだよな

[roshi]

今のWebGLってここまでできるのか、、映画やドラマでよくある「対象が移動しています！」やりたいｗ

[kamm]

スクショ見てるだけでも映画の1カットみたいでカッコええ

[Tailchaser]

回転はCommandボタン推しながらドラッグでできたよ(mac)

[strawberryhunter]

回転もしてみたかったけど、すごいな。

[mumei-0]

“正確性をもとめた３次元の可視化はPLATEAUのような３次元モデルのデータの使用を推奨します。”

[IGA-OS]

webGL凄いな

[ma38su]

データは平面みたいなので、2.5D的なやつよね。

[togusa5]

すご

[Cald]

目的地と敵の場所と侵入経路が欲しくなる

[hokkey]

かっこよすぎる！

[aktkro]

ワールドトリガーのランク戦みたいなのをこういうとこでやりたいですね

[peketamin]

え、かっこよ

[aike]

地下街のビジュアル化って普通にやると意外とそっけない感じになるんだけど、柱とか区画とか地上とか人の動きとか配色とかでかっこよく見えるように工夫している点もすごくいい。

[kokumaijp]

リアル「8番出口」作ってください

[sytkm]

“import * as THREE from 'three'; import { MapControls } from 'three/examples/jsm/controls/MapControls.js';”

[moriken1098]

個人なら良いけど多人数ならR3Fじゃないと触る気になれないやつ

[boomerangj]

格好いいな