在threejs实现路径移动很简单,也是类似飞线效果,拖尾效果
先来看看效果
路径移动
首先我们先生成路径
// 先生成起始点和终止点
// 起始点
const source = new THREE.Vector3(
options.source.x,
options.source.y,
options.source.z,
)
// 终止点
const target = new THREE.Vector3(
options.target.x,
options.target.y,
options.target.z,
)
然后添加曲线设置
const curve = new THREE.QuadraticBezierCurve3(
source, center, target
)
计算点的个数
const len = parseInt(source.distanceTo(target));
const points = curve.getPoints(len);
const positions = []
const aPositions = []
points.forEach((item, index) => {
positions.push(item.x, item.y, item.z)
aPositions.push(index)
})
接下来重点,着色器材质的编写(拖尾效果)
// 顶点着色器
attribute float a_position;
uniform float u_time;
uniform float u_size;
uniform float u_range;
uniform float u_total;
varying float v_opacity;
void main() {
float size = u_size;
float total_number = u_total * mod(u_time, 1.0);
if (total_number > a_position && total_number < a_position + u_range) {
// 拖尾效果
float index = (a_position + u_range - total_number) / u_range;
size *= index;
v_opacity = 1.0;
} else {
v_opacity = 0.0;
}
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
gl_PointSize = size / 10.0;
}
// 片元着色器
uniform vec3 u_color;
varying float v_opacity;
void main() {
gl_FragColor = vec4(u_color, v_opacity);
}
然后就可以大功告成了
这是完整代码,有需要的同学自行下载吧