使用threejs点云秀出酷炫的模型效果

        前几次用点云去摆放实现图片的效果，这次我决定用点云实现一些模型效果。首先我们知道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];
            }
        }
    }

        还有一点要说的就是之前我都是自己写的间补动画，但是要写好的效果十分复杂，后来我发现了Tween.js这个库，用起来十分简单方便，有问题的自己查查源码也就ok了~所以说当自己需要实现一些功能时，可以找找有没有现成的库来用，当然，有空的时候还是要多研究研究源码~

图片效果（变化过程中的图片，还是下载下来好看效果）：

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