【threejs】飞线效果

可看github官网上的地球飞线效果

/**
         * 创建线条模型
         */
        var geometry = new THREE.BufferGeometry(); //创建一个缓冲类型几何体
        // 三维样条曲线
        var curve = new THREE.CatmullRomCurve3([
            new THREE.Vector3(100, 0, -100),
            new THREE.Vector3(0, 80, 0),
            // new THREE.Vector3(0, 80, 90),
            new THREE.Vector3(-100, 0, 100),
        ]);
        //曲线上等间距返回多个顶点坐标
        var points = curve.getSpacedPoints(100); //分段数100，返回101个顶点
        // setFromPoints方法从points中提取数据赋值给attributes.position
        geometry.setFromPoints(points);
        var material = new THREE.LineBasicMaterial({
            color: 0x006666, //轨迹颜色
        });
        //线条模型对象
        var line = new THREE.Line(geometry, material);
        scene.add(line);

        var index = 20; //取点索引位置
        var num = 10; //从曲线上获取点数量
        var points2 = points.slice(index, index + num); //从曲线上获取一段
        var geometry2 = new THREE.BufferGeometry();
        geometry2.setFromPoints(points2);


        // 批量计算所有顶点颜色数据
        var posNum = points2.length - 2; //分界点黄色，两端和轨迹线一个颜色青色
        var colorArr = [];
        for (var i = 0; i < points2.length; i++) {
            var color1 = new THREE.Color(0x006666); //轨迹线颜色 青色
            var color2 = new THREE.Color(0xffff00); //黄色
            var color = null;
            // 飞线段里面颜色设置为黄色，两侧设置为青色，也就是说中间某个位置向两侧颜色渐变
            if (i < posNum) {
                color = color1.lerp(color2, i / posNum)
            } else {
                color = color2.lerp(color1, (i - posNum) / (points2.length - posNum))
            }
            colorArr.push(color.r, color.g, color.b);
        }
        // 设置几何体顶点颜色数据
        geometry2.attributes.color = new THREE.BufferAttribute(new Float32Array(colorArr), 3);


        var material2 = new THREE.LineBasicMaterial({
            // color: 0xffff00, //轨迹颜色
            vertexColors: THREE.VertexColors, //使用顶点颜色，不用设置color
             linewidth: 3.0, // 设置线宽
        });
        //线条模型对象
        var line2 = new THREE.Line(geometry2, material2);
        scene.add(line2);