要想有一個動態的線條繪製過程，那麼我們必須有一系列的點資料，通過點資料，我們不斷拿出進行渲染，才能將我們的點連成線，只需要對線不斷的更新，那麼我們的線也就成為了動態的線了。

懂了以上道理，我們便知道具體實現方向。接下來就是將我們的邏輯變成程式碼實現了。

首先上我們的需求外掛。

        <script src="./build/three.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
<script src="js/loaders/OBJLoader.js"></script>

<script src="js/controls/OrbitControls.js"></script>

看了以上的庫，我們便知道跟模型有著很大的關聯，因為點的資料都是從模型裡面拿去的。那麼問題來了，模型那麼大，資料那麼多，直接使用會很卡的。對於卡頓，我來教教你獨門祕籍。

實現效果三步走。

第一步：場景配置。

第二步：資料載入以及模型資料解析配置輸出。

第三步：讀取資料，動態繪製線。

場景配置就不用說了哈。renderer scene camera 大哥大佬配置好就行。

接來下就是模型資料載入以及資料配置

arryAll是最重要的資料，代表所有的點集合！

紅框內就是動態線條的物件，後面我們會往裡面不斷新增點，從而產生動效。

上面用的bufferGeometry這樣的話，裡面的資料點是傳入的二進位制點資料，這個介面的原始設計目的，與 WebGL 專案有關。所謂 WebGL，就是指瀏覽器與顯示卡之間的通訊介面，為了滿足 JavaScript 與顯示卡之間大量的、實時的資料交換，它們之間的資料通訊必須是二進位制的，而不能是傳統的文字格式。文字格式傳遞一個 32 位整數，兩端的 JavaScript 指令碼與顯示卡都要進行格式轉化，將非常耗時。這時要是存在一種機制，可以像 C 語言那樣，直接操作位元組，將 4 個位元組的 32 位整數，以二進位制形式原封不動地送入顯示卡，指令碼的效能就會大幅提升。

接下來就是重要的環境了。

動態線繪製。顧名思義，往一個基礎線數組裡面不斷新增3個數據代表一個點，這樣才能達到更新的繪製效果

55行就是關鍵所在，不斷從arryAll裡面拿去座標，然後再放入線的幾何體座標資訊數組裡面。然後不斷重複以上函式。從而達到繪製效果了。

是不是很簡單哇、哈哈哈。

效果如圖。

整個動態過程，就是酷炫到沒朋友。打出一波combo

如果還是沒有聽懂，或者急於解決專案功能問題，可以直接來這看看視訊案例講解。

更多關於模型載入。高精度渲染。動態模型的案例等著你喲，

https://shop148593628.taobao.com/index.htm?spm=2013.1.w5002-18481335954.2.4a46313aagTY60