阿里云突发性能适用于做网站吗/网站seo软件
在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);}
然后就可以大功告成了
上面只是部分重要的实现代码,有需要完整代码的小伙伴可以私信我,然后私发给你