3D 顯示的地震資訊軟體－ EQuake

Riley Davis 與 David Souther 在 EQuake 上進行合作，這是他們歷經約一天時間開發出的 3D 地震視覺化工具。他們討論到他們的動機與做法。

我們的靈感來自這則 xkcd 漫畫，在漫畫中和地震有關的推特跑得比地震波還快。我們兩個人都喜歡透過和人們早已熟悉的尺度相連接，讓複雜的科學資訊更易理解。我們覺得把實際地震的波動畫在地球上，看看這些波動實際上用多快速度通過地殼，會是一件有趣的事。這套工具能夠在其他地震發生時，輕易用來在地圖上繪製出推特（或其他地理資料）。為了加以實現，我們使用了來自美國地質調查局 (U.S. Geological Survey，USGS) 的資料，加上 Three.js 與 S3age。

我們從 USGS 的資料庫取得相當於一天的地震事件。這份 USGS 資料標注了經緯度、時間、震度，此外還有其他我們用不到的資料。我們在地球表面放置 3D 標記，基於地震震度更改標記的大小與顏色。

Three.js 負責處理專案的繪製與模型。不過，我們發現 Three.js 的 API 與範例程式碼比我們所需要更為複雜。David 之前做了 S3age 程式庫，這是一個簡化 Three.js 場景建構的 API 包裝。使用這個程式庫讓我們簡化了初始程式碼。

new S3age "#container",
    scene:
        lights: [ new THREE.AmbientLight 0xdddddd ]
        children: [ earth = new Earth() ]
    controls: S3age.Controls.Sphere

我們建立了一個 Globe 基本類別，其中提供下列方法：

addMarker(Marker::THREE.Object3D[, lat, lon])

該方法會在地球表面的指定地點放置一個標記。標記的本地 3D 空間定位將 Z 軸沿著半徑向外指出，Y 軸指向北極，X 軸則與上述兩軸垂直地指向東。

class window.Quake extends THREE.Object3D
    constructor: (quake)-＞
        THREE.Object3D.call @

在 JavaScript 中，Object.create 也會延伸 THREE.Object3D。這讓我們進一步延伸 Quake 類別，以便從 Three.js 基本操作中，建立更為複雜的幾何形狀與 3D 構件。S3age 還提供了一套物理機制，會對 S3age 場景中所有有 update 方法的物件，呼叫 update: (clock)-＞。

在此應用程式中，Earth 延伸了 Globe 類別，增加了用 NASA 地球紋理組成的球體表面。繪製的部分全都交給 S3age 處理，EQuake 應用程式只負責 3D 幾何與標記。S3age 還提供對場景的控制。一套能輕易且快速在地球表面導向的程式庫，對未來的視覺化專案會是一大幫助。

你可以在 GitHub 找到 EQuake 的程式碼。S3age 提供了文件。Three.js 儘管有 API 方面的問題，但還是很棒的程式庫。請來看看並貢獻這個專案吧！

◎本文翻譯自 The New York Times，原作者為 Riley Davis 和 David Souther：
https://open.blogs.nytimes.com/2013/09/30/equake/?_r=0