aogl.cn — 生成AIツールの個人用ブックマーク

← ホームへ · オリジナル

インタラクティブ3D地球ビューア

Three.js・雲と大気のグロー・軌道操作

· 当サイトオリジナル

本記事は当サイトオリジナルのインタラクティブ3D地球です。WebGLThree.js(r128)で、NASA系のブルーマーブル地表、バンプによる起伏、海のスペキュラー、別レイヤーの、そしてカスタムの大気リム(リムライト)シェーダーを組み合わせ、暗背景でも地球が際立ちます。地理教育・科学コミュニケーション・ポートフォリオのビジュアルに適します。

ライブ地球を操作

マウスドラッグで周回、ホイールでズーム。ブラウザ内完結でプラグイン不要です。

埋め込みWebGLビューア:Three.jsの地球・雲・大気のグロー。

SEO観点のポイント

  • 見出し・図表キャプションで主題(地球/WebGL/Three.js/雲/大気)を明示。
  • iframe の前後に説明文を置き、クローラが本文として評価しやすい構成。
  • loading="lazy" で一覧からの遷移時の初期表示を軽量化。

技術スタック(開発者向け)

WebGLRenderer に指向性ライトと環境光、操作は OrbitControls。大気は地球よりわずかに大きな球体にフラグメントシェーダーを適用し、フレネル風の縁取りと淡い青で「淡い青い点」の印象を再現します。

多言語サイトでは言語ごとにタイトル・抜粋を用意し(当サイトと同様)、同一インタラクティブ資産を共有すると運用効率と検索の両立がしやすくなります。