/**
* Create a line model
*/
var geometry = new THREE.BufferGeometry(); //Create a buffer type geometry
// 3D spline
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),
]);
//Equally spaced on the curve to return multiple vertex coordinates
var points = curve.getSpacedPoints(100); //The number of segments is 100, and 101 vertices are returned
// The setFromPoints method extracts data from points to
geometry.setFromPoints(points);
var material = new THREE.LineBasicMaterial({
color: 0x006666, //Trail color
});
//Line Model Object
var line = new THREE.Line(geometry, material);
scene.add(line);
var index = 20; //Get point index position
var num = 10; //Get the number of points from the curve
var points2 = points.slice(index, index + num); //Get a segment from the curve
var geometry2 = new THREE.BufferGeometry();
geometry2.setFromPoints(points2);
// Batch calculation of all vertex color data
var posNum = points2.length - 2; //The dividing point is yellow, the two ends and the track line are in the same color as the cyan
var colorArr = [];
for (var i = 0; i < points2.length; i++) {
var color1 = new THREE.Color(0x006666); //Trail line color cyan
var color2 = new THREE.Color(0xffff00); //yellow
var color = null;
// The color inside the fly line segment is set to yellow and the sides are set to cyan, which means that the color of a certain position in the middle is gradually changing to both sides.
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);
}
// Set geometric vertex color data
geometry2.attributes.color = new THREE.BufferAttribute(new Float32Array(colorArr), 3);
var material2 = new THREE.LineBasicMaterial({
// color: 0xffff00, //track color
vertexColors: THREE.VertexColors, //Use vertex color without setting color
linewidth: 3.0, // Set line width
});
//Line Model Object
var line2 = new THREE.Line(geometry2, material2);
scene.add(line2);
