Three.js-飞线

(精)画线条

https://segmentfault.com/a/1190000041607875?utm_source=sf-hot-article

通过修改LineMaterial的着色器实现流动线条：

https://blog.csdn.net/yue1241630499/article/details/112975148

智慧城市的各种特效：

https://hpugis.blog.csdn.net/article/details/107566560?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-107566560-blog-112975148.pc_relevant_multi_platform_whitelistv1&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-107566560-blog-112975148.pc_relevant_multi_platform_whitelistv1&utm_relevant_index=1

(亲测可用)流光和扩散

【threejs效果】流光以及扩散波效果

(亲测可用)生长的飞线

https://stackoverflow.com/questions/36426139/incrementally-display-three-js-tubegeometry

材质方案 https://stackoverflow.com/questions/37090564/how-to-animate-the-drawing-of-a-mesh-in-three-js/37091797#37091797

大体思路就是在每一帧里面控制BufferGeometry的drawRange属性，增量绘制几何体顶点。

.drawRange : Object

Determines the part of the geometry to render. This should not be set directly, instead use .setDrawRange.

Default is{ start: 0, count: Infinity }

For non-indexed BufferGeometry, count is the number of vertices to render. For indexed BufferGeometry, count is the number of indices to render.

关键的API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 创建线条管道
const tubeGeometry = new THREE.TubeGeometry(curve, 32, 1 * this.option.lineWidth, 4, false);
if (!FlyLine.material) {
  FlyLine.material = createFlowMaterial();
}

this.mesh = new THREE.Mesh(tubeGeometry, FlyLine.material);

// 获取几何体的顶点数
this.__maxVerticesNum = tubeGeometry.getAttribute('position').count;


// 帧动画中计算当前帧要显示的顶点数量(这个6是凭感觉写的，可调整)
if (this.__currentRangeEnd >= this.__maxVerticesNum * 6) {
  return;
}

this.__currentRangeEnd += this.__maxVerticesNum * 6 * this.option.lineGrowthRate;

// 帧动画中设置要绘制的顶点数
this.mesh.geometry.setDrawRange(0, this.__currentRangeEnd);

Shader实现的流动线条

SYNAPSES

王渊找的，用于3D关系可视化项目。

用到了噪声函数。

MeshLine

GitHub - pmndrs/meshline: 🪱 Mesh replacement for THREE.Line