前幾次用點雲去擺放實現圖片的效果，這次我決定用點雲實現一些模型效果。首先我們知道WebGL底層繪製方式有三種，分別是點繪製，三角形面繪製和線繪製。在threejs中我們可以方便地通過THREE.PointsMaterial設定使用點繪製方式（當然還有THREE.LinesMaterial是專門畫線的）。

        然後我將我們需要實現的效果分成了四步

        1.建立或載入我們轉換使用的geometry物件A,B,C（頂點數A>B>C）

        2.將網格物件以點的方式繪製出來。

        3.將A頂點比B頂點多出的部分進行處理

        4.通過Tween.js這個間補動畫庫進行變換

        這裡主要的難點就是集中在步驟3上，之前我做過一次頂點位置的轉換，兩邊的頂點數是完全相同的，然而我又想到了兩種情況：

            1.A頂點數>B

            2.A頂點數<B

        因為在對頂點進行操作時使用的是強型別陣列Float32Array，必須在初始化時就確定陣列的長度，所以不能輕易修改，也就是說如果從頂點少的mesh轉換到頂點多的mesh必然會有一部分模型覆蓋不到。

        但是第二種情況，我們可以通過將A頂點陣列中多出的部分重複放置到B的頂點位置，也就是說從A轉換成B的過程中可能會有很多點疊在一起，但是在視覺效果上還是很好的，下面貼上轉換部分的程式碼：

//創造符合條件的points陣列
    //con_1要轉換的陣列
    //con_2需要製造的陣列
    //con_2陣列資料
function convertGeo(con_1, con_2, con_2_data) {
        if(con_1.length > con_2_data.length) {
            var len = con_1.length - con_2_data.length;
for (var i = 0; i < con_2_data.length; i++) {
                con_2[i] = con_2_data[i];
 
}
            for (var j = 0; j < len; j++) {
                con_2[j + con_2_data.length] = con_2[j];
}
        }
    }

圖片效果（變化過程中的圖片，還是下載下來好看效果）：

Github:https://github.com/StringKun/ThreeJSPotCloud/tree/master/potcloud3