原創 服老思 P話 收錄於話題#3D1#可視化1#算法2#數據2
��雷達圖容易誤用，所以我一般不用。從數據可視化的最佳實踐來說，不推薦 3D，因為透視關係導致無法準確比較。同時，不推薦動態圖，人老了後看起來眼花，當然某些場景下引入時間維度後，可以增強信息密度，如��動態柱狀圖和��動態折線圖。
我們做人有原則，要麼嚴格遵守，要麼三條一起破壞。
所以，今天做一個 3D 的、動態的雷達圖。最後選擇用 THREE.js 實現主體，用 DOM 實現控制項和交互。
Hacking THREE
—
之前 ��解析《自然》 雜誌 150 年論文可視化作品 中，提到過這個庫。THREE.js 基於 WebGL，前身是廣泛用於 3D 遊戲的 OpenGL。隨著移動硬體性能的提升，OpenGL 這套標準接口，在 web 環境中，也普及開來。而 THREE 對 WebGL 進行了更友好的封裝，使得沒有計算機圖形學的開發者，也能夠很快地搭建自己的 3D 場景。
推薦網站：https://threejsfundamentals.org/
如果追求速度的話，看過 Fundamentals、Responsive Design、Primitives 這三章，就可以開始 hack 自己的項目了。如果趕時間的話， Responsive Design 一節可以後面來看。不過推薦放在前面，這樣可以讓自己的設計從一開始避免鋸齒、拉伸等問題，之後可以專注在圖形上。閱讀加練習大概 2-3 小時。
https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html
基本概念：
•Renderer：渲染引擎，它的輸入是 scene 和 camera
•Object：一個基本單元
•Scene/ scene graph：類似文件夾，scene 和包含 object，scene 可以嵌套
•Geometry：幾何形狀，具體包括點（vector3）、面（face3）
•Material：材質，應用在面上
•Texture：紋理，應用在材質上
•Mesh：Geometry 和 Material 的組合；Geometry 決定了畫什麼、Material 決定了怎麼畫
•Light：光源
•Camera：鏡頭
THREE 的世界中，hello world 就是一個 「Hello Cube」，即畫一個方塊。跟教程的第一個 milestone 大概是上面這樣，有幾個 cube，不停翻轉。
https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html
如果是初學，建議在這裡多花一點時間，調整各項參數，觀察結果，以掌握基本概念。否則，很容易花了大把功夫後，怎麼也調不出自己要的圖形。
我遇到的幾個常見問題有：
•相機方向問題，物件不在視野內
•視域的長度不夠（far）
•沒有加光源
•光源沒有對準物體
•座標系錯誤。注意右手法則。x 向右（拇指）、y 向上（食指）、z 從屏幕指向自己（中指）。
•角度錯誤。注意 THREE 裡面的旋轉（rotation）用弧度（radian），但相機的設置中，fov 用角度（degree）。
•面的方向（法向量）
有了 Hello Cube 後，可以進一步嘗試光照、相機、材質等不同設置。
接下來，就可以探索 THREE 裡面現成的形狀，把它們拼接起來就可以組成複雜的圖形。原網頁可以掃碼查看。
https://threejsfundamentals.org/threejs/lessons/threejs-primitives.html
可以看到，有許多現成的圖形。
比如，下面演示了如何畫一個 3D 的心形。這段代碼的功能其實更廣，它示範了如何通過一系列 2D 的點，通過貝塞爾曲線連接起來，再生成一個 3D 空間中的面。
https://threejsfundamentals.org/threejs/lessons/threejs-primitives.html
又比如，下面演示了如何通過矢量字體，生成三體空間中的形狀。
https://threejsfundamentals.org/threejs/lessons/threejs-primitives.html
我們的目標是蛛網圖，每一個數據點是一個多面柱，它們通過顏色和高度來彼此區分，多面柱的每個稜角，就是一個維度。所以，基本的單元是多面柱。我們在 THREE 的 primitive 裡面尋找，最接近的是下面這個形狀。
https://threejsfundamentals.org/threejs/lessons/threejs-primitives.html
可是它有一個問題：所有的稜都是一樣的長度。
我們的數據可視化中，需要根據數據值的不同，來設置稜的長度。
於是，這裡要做一點探索。首選的方案，是非侵入式的。即如果能通過 THREE 已經有的接口，從外部改變這個多面柱的特性，達到我們的可視化效果，則為上策。實在不行，可以選擇魔改一把 THREE，再硬嵌入到項目中。
這就回到補充基本概念的時候。
https://threejsfundamentals.org/threejs/lessons/threejs-primitives.html
在 THREE 中，模型是通過 Gemoetry 設定的。Geometry 的設定有兩部分：
•設置一系列的頂點。每個頂點由 (x, y, z) 這樣一個三元組聲明，代表空間中的座標。
•設置一系列的三角形。每個頂點由 (id1, id2, id3) 這樣的三元組聲明，代表點集中下標。
所以，如果要程序化地改變一個形狀，只需要改變頂點的位置，不用改變三角形的設置，與該頂點相連的線和面就會自動地改變。不過注意要把 verticesNeedUpdate 和 elementsNeedUpdate 兩個標記打上，這樣在下次渲染的時候，引擎會做相應的更新。
在 Hello Cube 的基礎上，做如下改變測試。
通過改變頂點，實現形狀變化
其中一個頂點，會以 8 秒為周期，伸長後又縮短。可以看到，鄰接的面都配合變化，非常平滑。
經過這個實驗，我們就有信心，一定能通過一些 primitive，以及修改頂點的方法，來實現可變尺寸的多面柱（VariableCylinder）。
不過，從外部實現的話，要修改的頂點比較多。其中涉及到極座標的公式，核心計算部分和普通多面柱（Cylinder）是重複的。另外，修改完頂點，還要重新計算 UV 和法向量，才能正確響應光照和紋理的設置。
考慮到這些，覺得先看一下源碼比較好，也許直接改庫更方便。
源碼：https://github.com/mrdoob/three.js/blob/master/src/geometries/CylinderGeometry.js
將這個 CylinderGeometry 拷貝一份，做成我們自己的 VariableCylinderGeometry。事實證明，只需要修改 7 行，就達到目的了……
當然，為了修改這 7 行，需要花點時間研究 THREE 這個項目的結構。另外，由於是可變的多面柱，數據接口發生了一些變化。之前只需要輸入稜的個數，而現在要輸入的是每個稜的相對長度。
想起了福特和斯坦門茨的那個廣為流傳的段子：畫一根線，只要一美元；知道在哪裡畫這根線，值 9999 美元。
比較好的方法，可能是從模組級別集成 THREE，然後自己派生出這個可變多面柱的類。由於對前端工程不熟悉，一看到近年的各種框架和 import 就頭大。於是選擇了魔改路線，直接侵入式地做了需要的修改，然後重新 build 一個 THREE 嵌在項目裡面。
導入魔改版的THREE，將 HelloCube 改一下，得到了多面柱：
可變多面柱
接下來比較重要的部分就是蛛網了。計算核心還是極座標變換。得到關鍵點後，放入一個 Geometry，再通過 THREE.Line 這個輔助工具，轉化成可渲染的圖形。注意 THREE.Line 的地位和 THREE.Mesh 是類似的。而 Geometry 中，有點和面，但是沒有線。
蛛網的大致效果如下。
大家可能發現，前面的模型，都是用黑色作為背景。以前我也覺得奇怪，是不是設計師喜歡黑色背景，看起來更高端？
其實更直接的原因是，在 3D 的世界中，一切本來就是黑的。因為有了光、有了物體，而光照到物體上，我們才看到不同的顏色。哪怕是背景，也是如此。如果用戶看到的不是黑色，說明有東西在那，它反光。
所以，我們需要在所有的物件下面（-y 的區域），加一個白色的面，作為襯底。
把以上物件組合在一起，就得到第一個原型了。
接著，在 canvas 的上面，加一個浮層，放入座標標籤和相對應的值。再給 legend 加上事件，當用戶選擇的時候，可以高亮相應的多面柱。最後，再調一下顏色。這部分和平時寫的前端沒什麼差別，就略過細節了。
一個 3D 動態蛛網圖，就做成了。
這個圖有什麼用呢？
它比較適合數據點在各個維度都單調遞增的場景。比如，用來描述一個同學的成績，每個軸代表一個學科，每個多面柱代表一個年份。隨著努力學習，他成績越來越好，就是這樣的感覺。如果不滿足這個單調遞增，則效果是很奇怪的，下層的柱子，可能有一部分 「陷入」 上層的柱子中。
覆盤
—
時間開銷：
•調研：10%
•入門 THREE：20%
•Hacking prototype：30%
•調整細節：40%
其中，調研階段考慮了 aframe 和 THREE 兩個庫。aframe 是基於 THREE 的一套 declarative 語言。通過 HTML 元素，來生成 3D 的物件。如果是簡單的圖形，用 aframe 確實很方便。經過幾年的發展，它有了一個強大的社區，其中有不少參考項目。另外，還內置一個所見即所得（WYSIWYG）的編輯器，對於調整細節非常方便。
Aframe 內置編輯器 (ctrl+alt+i)
對於稍微複雜的項目，可以通過建模軟體，如 Maya 建立模型，再導入 aframe，利用前端技術做交互。這樣開發者不需要有關於 3D 圖形的知識，只需要復用 DOM 交互的經驗即可，可以滿足快速開發的需求。
不過，當圖形是數據驅動生成的時候，發現 aframe 就有點差強人意了。程序化地修改，可以比較方便完成的是：
•平移
•縮放
•旋轉
•組合
如果要改變一個形狀本身，比如這次我們需要的可變多面體，aframe 就需要一個 custom model。而 custom model 是用 THREE 寫的…… 所以結果是，不如直接學習 THREE 好了。
這是前期調研走的一點彎路。該來的遲早會來，怎麼也擋不住。不過好在 THREE 的封裝已經極其方便，相比十年前學習OpenGL，已經快了很多。由於都是在前端，可以綜合使用 WebGL 和 DOM 兩種技術，利用浮層實現假 3D 的效果，也能省下不少時間。如果放在古時候，到這會可能才把 Hello Cube 搞定……
CREDIT
—
排版：Bee
完
—
數據科學 | 數字廣告 | 未來主義
原標題：《手寫動態 3D 蛛網圖 | THREE.js》
閱讀原文