【threejs】飞线效果
/**
* 创建线条模型
*/
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中提取数据赋值给
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);