西之島海底火山噴火に伴う土地形状変化のアニメーション

概要

産業技術総合研究所が2020/10/01に公開したシームレス標高タイルの西之島のデータを使用しています。
元データは国土地理院のCSV標高タイルとのことです（2020年11月07日現在CSV標高タイルを使用したという記述がありません）。リンク先ページの冒頭の写真（2018-01-17撮影）は北西から南東に向けて撮影しているようです（3Dアニメーションの最後当該日付近と形状が一致します）。
3D描画ライブラリとしてThree.jsを使用しています。
マウス操作で視点位置を変更できます。
タイトル下（赤枠内）のボタンでアニメーションの操作ができます。
プルダウンにより標高を誇張して表示できます。
チェックボックスで表示をワイヤーフレームに切り替えることができます。
チェックボックスで表示を正射画像（写真）に切り替えることができます。
スライダー操作で任意の日付の3Dモデルを表示することができます。
Qiitaに解説を掲載しました。西之島の3D地形変動アニメーション。

注意・補足

データが更新され縞模様が解消されました。しかし線状の地形の凹凸が一部で見られるようです（2020.11.07）。
後半、スコリア丘に縞模様が現れます。おそらくデータに何らかの問題があると思います。現在偉い人が調査中です（2020.10.13）。

開発メモ

attribute変数が上書きできることがわかったので、現状の無理矢理的な記述を書き換えたい。

更新履歴

2020.11.07：更新
- 国土地理院が作成していなかった2013年12月04日と2018年12月01日の標高タイルを産業技術総合研究所が独自に追加作成したので、それを表示できるようにした。但し2018年12月01日の正射画像は公開されていないため2018年01月17日の正射画像をそのまま使用しています。
2020.11.01：調整
- 陰影処理に関する記述をThree.jsのお作法に従った。
2020.10.15：機能追加
- スライダー操作中にハンドル近くに日付を表示するようにした。
2020.10.12：修正
- アニメーション終了後のスライダー操作でアニメーションが開始できない不具合を修正した。
2020.10.11：機能追加
- 正射画像を表示する機能を実装した。
- スライダーで日付を変更する機能を実装した。
2020.10.10：機能追加
- ワイヤーフレームと面の切り替え表示機能を実装した。
2020.10.09：調整
- fogに関する記述を調整した。
2020.10.08：修正
- 標高誇張機能追加時にエンバグしたのを修正した（Safariでは動いていた・・・）。
2020.10.06：機能追加と調整
- 標高誇張機能を追加した。
- 初期データロード時にGIFアニメーション画像を追加した。
2020.10.05：調整
- fogの適用をThree.jsのお作法に従った。
2020.10.04：調整
- 海の広さとメッシュの密度を調整した。
- 3Dモデルにもfogが適用されるよう調整した。
2020.10.03：機能追加と調整
- 一時停止機能を実装した。
- 方位を示す文字を配置するようにした。
- 3Dモデル中の海を非表示とし、別途描画するようにした。
- fogにより遠くをぼかす処理を入れ、海らしくするようにした。
- 標高グラデーションを調整した。
- 必要時以外再レンダリングしないよう調整した。
2020.10.02：公開
2020.10.01：設計開始