飞线效果

Three.js 飞线效果 | 三维可视化 / AI 提示词
📋 AI 提示词
prompt
1
使用 Three.js 创建飞线效果,使用自定义着色器实现飞线动画和颜色渐变。
🖼️ 效果预览
🎮 案例演示
效果描述
这是一个展示如何创建飞线效果的示例,使用自定义着色器实现飞线动画和颜色渐变。
效果特性
- 飞线效果:创建飞线效果
- 贝塞尔曲线:使用贝塞尔曲线创建路径
- 自定义着色器:使用自定义着色器
- 颜色渐变:飞线颜色渐变
- 动画效果:飞线动画效果
- 地球模型:添加地球模型
核心参数
| 参数 | 值 | 说明 |
|---|---|---|
| 飞线数量 | 可变 | 飞线数量 |
| 飞线大小 | 3.0 | 飞线点大小 |
| 飞线速度 | 可变 | 飞线速度 |
| 起始颜色 | 可变 | 起始颜色 |
| 结束颜色 | 可变 | 结束颜色 |
核心代码解析
添加飞线
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function addflyline(minx, maxx, colorf, colort) {
var colorf = colorf || {
r: 0.0,
g: 0.0,
b: 0.0,
};
var colort = colort || {
r: 1.0,
g: 1.0,
b: 1.0,
};
var curve = new THREE.CubicBezierCurve3(
new THREE.Vector3(minx, 0, minx),
new THREE.Vector3(minx / 2, (maxx % 70) + 100, maxx / 2),
new THREE.Vector3(maxx / 2, (maxx % 70) + 70, maxx / 2),
new THREE.Vector3(maxx, 0, maxx)
);
var points = curve.getPoints((maxx - minx) * 5);
var geometry = new THREE.BufferGeometry().setFromPoints(points);
var material = createMaterial();
var flyline = new THREE.Points(geometry, material);
flyline.material.uniforms.time.value = minx;
flyline.material.uniforms.colorf = {
type: "v3",
value: new THREE.Vector3(colorf.r, colorf.g, colorf.b),
};
flyline.material.uniforms.colort = {
type: "v3",
value: new THREE.Vector3(colort.r, colort.g, colort.b),
};
flyline.minx = minx;
flyline.maxx = maxx;
linegroup.push(flyline);
scene.add(flyline);
}
创建材质
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function createMaterial() {
var vertShader = `
uniform float time;
uniform float size;
varying vec3 iPosition;
void main(){
iPosition = vec3(position);
float pointsize = 1.;
if(position.x > time && position.x < (time + size)){
pointsize = (position.x - time) / size;
}
gl_PointSize = pointsize * 3.0;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`;
var fragShader = `
uniform float time;
uniform float size;
uniform vec3 colorf;
uniform vec3 colort;
varying vec3 iPosition;
void main(void) {
float end = time + size;
vec4 color;
if(iPosition.x > time && iPosition.x < end){
float t = (iPosition.x - time) / size;
color = vec4(mix(colorf, colort, t), 1.0);
} else {
discard;
}
gl_FragColor = color;
}
`;
return new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
size: { value: 10 },
colorf: { value: new THREE.Vector3(0, 0, 0) },
colort: { value: new THREE.Vector3(1, 1, 1) }
},
vertexShader: vertShader,
fragmentShader: fragShader,
transparent: true
});
}
技术亮点
- 飞线效果:创建飞线效果
- 贝塞尔曲线:使用贝塞尔曲线创建路径
- 自定义着色器:使用自定义着色器
- 颜色渐变:飞线颜色渐变
- 动画效果:飞线动画效果
调试技巧
- 飞线数量:调整飞线数量测试性能
- 飞线大小:调整飞线大小
- 飞线速度:调整飞线速度
- 颜色参数:调整颜色参数改变颜色
- 曲线参数:调整曲线参数改变路径
扩展方向
- 多条飞线:创建多条飞线
- 不同颜色:使用不同颜色的飞线
- 复杂路径:使用更复杂的路径
- 交互控制:添加交互控制
- 动画效果:添加动画效果
本文档由 ThreeLab 编辑整理,如需转载,请注明出处。







京公网安备 11010502038735号
💬 评论区
评论功能即将上线,敬请期待!