three.js飞线基础
·
该功能实现的是一条曲线,在曲线上截取一部分实现渐变色飞线效果(如下图)
//首先声明创建一条曲线添加到场景中
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(-100, 0, 100),
]);
var material = new THREE.LineBasicMaterial({
color: 0x006666, //轨迹颜色
});
//曲线上等间距返回多个顶点坐标
var points = curve.getSpacedPoints(100);
geometry.setFromPoints(points);
//线条模型对象
var line = new THREE.Line(geometry, material);
scene.add(line);
var index = 20; //取索引值的点的位置
var num = 10; //从曲线上获取的点
var points2 = points.slice(index, index + num); //其实就是获取一部分的点染色
//新建一个三维样条曲线用上面获取到的部分的点作为参数再生成一条曲线
var curve = new THREE.CatmullRomCurve3(points2);
//该线段再细分一下,细分成一百个点
var newPoints2 = curve.getSpacedPoints(100);
//重新声明一个缓冲类型几何体
var geometry2 = new THREE.BufferGeometry();
//通过点队列生成线的属性attribute
geometry2.setFromPoints(newPoints2);
//声明一个数组用于存储百分比数据
var percentArr = [];
//根据获取的点的数组的长度计算百分比数据存入percentArr里
for (var i = 0; i < newPoints2.length; i++) {
percentArr.push(i / newPoints2.length);
}
//把percentArr转化为类型化数组再用BufferAttribute处理完之后存入percentAttribue
var percentAttribue = new THREE.BufferAttribute(
new Float32Array(percentArr),
1
);
//把百分比数据转化完之后保存到模型的几何体的属性的percent
geometry2.attributes.percent = percentAttribue;
//批量计算所有顶点的颜色数据
var colorArr = [];
for (var i = 0; i < newPoints2.length; i++) {
var color1 = new THREE.Color(0x006666);
var color2 = new THREE.Color(0xffff00);
var color = color1.lerp(color2, i / newPoints2.length);
// console.log(color);
colorArr.push(color.r, color.g, color.b);
}
console.log(colorArr);
//设置几何体顶点颜色数据
geometry2.attributes.color = new THREE.BufferAttribute(new Float32Array(colorArr), 3);
// 点模型渲染几何体每个顶点
var PointsMaterial = new THREE.PointsMaterial({
// color: 0xffff00,
size: 5.0, //点大小
vertexColors: true, //使用顶点颜色渲染
});
var flyPoints = new THREE.Points(geometry2, PointsMaterial);
scene.add(flyPoints);
//循环渲染
function render() {
if (index > indexMax) index = 0;
index += 1;
points2 = points.slice(index, index + num); //从曲线上获取一段
var curve = new THREE.CatmullRomCurve3(points2);
var newPoints2 = curve.getSpacedPoints(100); //获取更多的点数
geometry2.setFromPoints(newPoints2);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
更多推荐
已为社区贡献7条内容
所有评论(0)