模型动态加载绘制。

要想有一个动态的线条绘制过程，那么我们必须有一系列的点数据，通过点数据，我们不断拿出进行渲染，才能将我们的点连成线，只需要对线不断的更新，那么我们的线也就成为了动态的线了。

懂了以上道理，我们便知道具体实现方向。接下来就是将我们的逻辑变成代码实现了。

首先上我们的需求插件。

        <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