要想有一个动态的线条绘制过程,那么我们必须有一系列的点数据,通过点数据,我们不断拿出进行渲染,才能将我们的点连成线,只需要对线不断的更新,那么我们的线也就成为了动态的线了。
懂了以上道理,我们便知道具体实现方向。接下来就是将我们的逻辑变成代码实现了。
首先上我们的需求插件。
<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