デモの使い方

ワイヤーフレームの地球儀の上に国と国を結ぶデータ接続線が次々と生成され、ドラッグで回転できるデモです。

Three.js 3D地球儀 データ可視化

操作手順

  1. マウスをドラッグして地球儀を回転させる
  2. 0.1秒ごとにランダムな地点同士を結ぶ接続線が追加されていくのを観察
  3. 地球の自動回転と接続線のアニメーションの全体像を確認

活用シーン

  • グローバル展開するサービスのネットワーク規模感を示す演出
  • Three.jsによる3Dオブジェクト表示とマウス操作の学習
  • 接続線の bezier 曲線描画などデータフローのビジュアル表現の参考実装

Global Network

ドラッグで回転、ホイールでズーム