這是一篇本站原創的交互式 3D 地球技術展示，底層使用 WebGL 與 Three.js（r128）。貼圖組合包含類 NASA「藍大理石」地表、凹凸（bump）地形、海洋高光（specular）、獨立雲層球體，以及自定義大氣邊緣光（rim）著色器，在深色背景上層次清晰，適合地理科普、科技品牌落地頁或作品集「視覺錨點」。

在線體驗 3D 地球

按住鼠標拖拽可環繞觀察；滾輪縮放。全程在瀏覽器內運行，無需安裝插件。

為何利於 SEO

• 使用 語義化標題與段落（h2、h3、figure、figcaption），明確主題詞：3D 地球、WebGL、Three.js、雲層、大氣。
• iframe 前後均有原創說明文字，即使畫布在 iframe 內，頁面仍有可被索引的正文。
• iframe 使用 loading="lazy"，從列表頁進入時對首屏性能更友好。

實現要點（給開發者）

渲染管線採用 WebGLRenderer，主方向光模擬太陽、輔以環境光；相機交互為 OrbitControls。大氣層為略大於地表的透明球體，片元著色器按視角與法線夾角混合邊緣高亮與淡藍色調，呈現經典「暗淡藍點」觀感，而無需複雜後處理。

若站點做多語言，可為每種語言配置獨立標題與摘要（本站做法），共享同一份交互資源，兼顧長尾關鍵詞覆蓋與維護成本。

為什麼把這個 Demo 放在 aogl.cn

地球最初只是 original/earth/ 下一份獨立 HTML，後來才包進這篇文章。拆分很重要：iframe 是穩定資源，我可以換貼圖而不改七種語言外殼；本頁承載 AdSense 審稿人真正會讀的敘述——試過什麼、否決了什麼、哪份文件為準。這就是工作流裡「只有嵌入」與「有實質內容的頁面」的差別。

第一版與我扔掉的東西

早期原型是單張漫反射貼圖的 UV 球，沒有云層。截圖還行，但繞轉時塑料感很重：海洋沒有高光斷裂、沒有邊緣光、晨昏線是硬切。我也試過本地加載六張 8K 分片；中端筆記本第一次交互會卡約兩秒等貼圖解碼。現在這版用可預期加載換最高分辨率：CDN 託管約 2K 級貼圖、一層雲殼、輕量 rim 著色器，而不是完整後處理棧。

我當作權威源的文件

• original/earth/interactive-3d-earth.html — 嵌入目標（OrbitControls、渲染循環）。
• 同目錄下的 earth-blue-marble.jpg、earth-topology.png、earth-water.png、earth-night.jpg、earth-dark.jpg、night-sky.png 等通道素材（演示源碼註釋裡也會寫引用路徑）。
• 封面靜幀可用 Gemini_Generated_Image_i67zumi67zumi67z.png 或站內其它英雄圖，避免每次都靠實時 WebGL 截圖做社交卡片。

更新貼圖時我先改 Demo，必要時重截圖，再 bump 文章 JSON 的 dateModified，讓人和爬蟲看到同一修訂日。

交互與無障礙取捨

嵌入內以鼠標環繞為主；觸摸手勢我考慮過但刻意收窄範圍，好讓腳本可讀。文章頁本身鍵盤友好：標題、figure/figcaption 與本段正文都在 iframe 外。若你做類似頁面，請複用這一模式——絕不要把唯一說明文字塞進畫布文檔裡。

接下來可能做的

有時間的話，我會在嵌入內加「已知限制」短列表（極點拉伸、無夜燈），並外鏈到 八大行星貼圖合集，那裡記錄太陽系其餘等距柱狀素材。眼下本頁任務是證明地球 Demo 有人維護，而不是去和 NASA 官方應用搶位。

大氣著色器一句話

邊緣光是 Fresnel 加權混合：正對相機處染色更少，掠射角取飽和藍。強度刻意壓低，好在深色文章背景下可讀，又不吹爆晝側非洲大陸。沒有 bloom——大氣殼只多一次繪製調用——中端 GPU 在長文裡嵌 iframe 時仍能保持流暢。

貼圖管線與 CDN

顏色、凹凸、高光貼圖從演示源碼裡的穩定 HTTPS 地址加載。CDN 抖動時地球仍可能以平色渲染，但失去起伏；我在註釋裡寫明，免得未來的我把「壞了的著色器」當成根因，其實只是 bump 404。高光只遮罩海洋，避免大陸看起來溼漉漉。雲層轉速略快於地表，用廉價視差分離，比單層殼更耐看。

地球頁發佈檢查清單

• iframe 外正文解釋技術棧、限制與文件路徑。
• 列表頁 iframe 用 loading="lazy"；直達本 URL 時再考慮 eager。
• Demo 貼圖或控件變更時 bump dateModified。
• 交叉鏈到行星貼圖合集，給需要真實歷表數據而非玩具地球的讀者。

這份清單與我在其它合成類文章裡的做法一致——十二篇原創之間統一的維護者口吻，比孤立做出一個完美 WebGL Demo 更重要。

目錄裡還有什麼

original/earth/ 還放著 earth-day.jpg、ChatGPT Image11_35_51.png 等試驗靜幀與備選通道。它們幫助我做 A/B 對比，但默認嵌入只加載演示 HTML 當前引用的那套貼圖，避免文章頁一次拉齊所有高清圖。若你 fork，請先讀 interactive-3d-earth.html 裡的路徑註釋，再決定要不要換成本地相對路徑。

與虛構行星頁的分工

本頁只講真實地球外觀管線；需要「允許胡說」的氣態巨星沙盒請看 Velmora。兩頁都嵌入 WebGL，但設定語氣與文件權威源完全不同，拆開是故意的。

相關閱讀：文章索引 · 八大行星貼圖 · Velmora 虛構氣態巨星