立体的に見える立体地図で眺望を再現する

3D地図がプレミアム会員しか使えなくなってしまったので、自分で立体地図を描画するウェブ上のプログラム(JavaScript)を作成しました。その第 2 弾です。中心は細かく描画し、遠くに行くに従って荒く描画することで、3Dレンダリングできる範囲を広げ、眺望を再現することを目的とした立体地図です。

没入型 VR での表示にも対応しています。スマホ+VRグラスを使用すると360度見渡せるような表示が可能です。

立体的に見える立体地図 (眺望)
https://3dstayawhile.blogspot.com/2021/01/3dmaplandscape.html

URLでタイル数、タイル座標を指定することができ、立体地図の座標を共有できます。
例1 (利尻山):
https://3dstayawhile.blogspot.com/2021/01/3dmaplandscape.html?n=1&x=233920&y=94113&m=0
例2 (富士山):
https://3dstayawhile.blogspot.com/2021/01/3dmaplandscape.html?n=2&x=232090&y=103513&m=0
例3 (槍ヶ岳):
https://3dstayawhile.blogspot.com/2021/01/3dmaplandscape.html?n=2&x=231303&y=102631&m=0

★ 過去作
ステレオグラム(平行法)により、より立体的に見える立体地図。
タイルを超えて自由に移動でき、様々な地形を立体的に楽しむことができるバージョン。
立体的に見える立体地図 (シームレス)
https://3dstayawhile.blogspot.com/2020/12/3dmapseamless.html

コメント

makobe

RE: 立体的に見える立体地図で眺望を再現する
Fukuchi さん　はじめまして

Fukuchi さんの　３Ｄの立体視　拝見して感動です。　
（　立体的に見える立体地図 (シームレス)　）
（　私はアナクロなミラービューワーで見ましたが、右端クリックでの回転も滑らかで自然でいいです。）

・　以前に国土地理院の３Ｄマップを視点をずらしながら１回転の動画を作ったことがありますが、３６０度を３２分割してキャプチャしてやっとのＧＩＦ動画でしたが、立体視では半月以上かかってやっと半周で断念しました。それがプログラムで自由に滑らかに直接動かせるのがすごいです。

（　昨年は、どうしても試してみたい３Ｄマップの表現があって、自分でプログラムを…と燃えていたのですが、Ｈｔｍｌで、２Ｄタイルを Leafret で、重ねるのが精一杯で、その先の３Ｄに進むことができずに、現在足踏み状態です。）

・　Fukuchi さんのように、３Ｄマップを自在に加工するには、どんな言語と勉強が必要ですか？。

これからも、サイト愛用させていただきます。

Fukuchi

RE: 立体的に見える立体地図で眺望を再現する
makobe さん こんにちは、はじめまして。
稚拙な立体地図にコメントいただきありがとうございます。

回転に関しては、画面の端をクリックする以外に、操作ボタン内に、「左」および「右」に回転するボタンがありますので、こちらを利用すると回転させながらの立体視も可能となります。

私の立体地図も国土地理院と同様 HTML と JavaScript により作成しています。
ブラウザには WebGL という機能が搭載されており、この機能を利用して 3Dの描画(レンダリング) をしています。WebGL 機能を簡単に扱うためのライブラリーとして three.js があり、これも国土地理院と同様に利用しています。

必要となる three.js は以下ページからダウンロードできます。
(three.js を右クリックして 「名前を付けてリンク先を保存」してください。)
https://github.com/mrdoob/three.js/tree/dev/build

移動や回転はできませんが、HTML と JavaScript (+ three.js ライブラリー) で立体地図を作るのに必要なスクリプトをまとめております。
https://3dstayawhile.blogspot.com/2020/12/post0003.html

国土地理院の3Dマップはカメラの位置の制御に OrbitControls.js というライブラリーを使用しており、あの独特なカメラの動きとなりますが、私の立体地図では、このライブラリーを使用せずにカメラを動かしていることが回転の動きの違いとなります。

また以下の 穂高岳 の立体地図の様に地名の入った地図も作ることが可能ですので、申しつけいただければ、ご希望の地点の立体地図を作成することも可能です。
https://3dstayawhile.blogspot.com/2021/01/3dmaphotakadake.html

makobe

RE: 立体的に見える立体地図で眺望を再現する
Fukuchi さん　こんばんは

たくさんの手がかりの link ありがとうございます。

Stay Awhile　の　「three.js による立体地図作成に最低限必要なスクリプト」
にあげておられる、ソース拝見しました。

（　まだjavaやthree.js の知識のない現時点では、？？？　ばかりで、わかりませんが、動かせる環境でなにが必要かとゆうところから、少しずつ勉強していきたいと思います。）

・　ゼロから覚えようとしている、素人の私には、公開していただいているソースが、手がかりとなる多くのコメントを付けていただいているのが、とても心強くてありがたいです。

今年の目標の一つの方向性が、なんとなく見えたような気がします。.
これからも、よろしくお願いします。

Fukuchi

RE: 立体的に見える立体地図で眺望を再現する
立体地図を作成したいというニーズは想定していなくて、three.js でとりあえず何か作ってみたい、という方が対象のソースとなります。ですので、JavaScript と three.js については既に知識があるという前提でのソースとなります。ソースがお役に立つのはもう少し先、という感じでしょうか。

JavaScript と three.js については、Googleなどで検索していただくと、たくさんの詳しい解説ページがありますので、そちらを参考に学習を始められると良いと思います。

また Java と JavaScript は、別の言語となりますので、間違えて Java の勉強をしてしまわないように注意が必要です。JavaScript は環境を準備しなくても動かすことができるので、気軽に始めることができますよ。

こちらこそ、よろしくお願いいたします。