在现代可视化大屏项目中，动态飞线效果可以极大地提升视觉表现。特别是在模拟护罩之间的交互时，飞线可以很好地表示数据流动、攻击路径等信息。本文将详细介绍如何使用 Three.js 创建两个护罩之间的动态飞线效果，配合光效和动画让场景更加炫酷。
一、技术准备
在开始之前，我们需要确保已具备以下技术：
- Three.js：JavaScript 3D 图形库。
- 着色器 Shader：用于自定义飞线的视觉效果。
- OrbitControls：控制相机的轨道视角交互。
- CSS2DRenderer：用于显示 HTML 标签的信息面板（可选）。
二、基础环境搭建
我们首先要搭建基础的 Three.js 场景。具体步骤可以参考[上一篇博客]，简要步骤包括：
- 初始化 场景（Scene）。
- 创建 相机（Camera） 和 WebGL 渲染器（Renderer）。
- 添加 OrbitControls 控制相机视角。
- 为场景添加光源。
const canvas = document.querySelector('canvas.webgl');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);
scene.add(camera);
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true,
alpha: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
// 添加光源
const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(0, 5, 5);
scene.add(directionalLight);
三、创建护罩
为了实现飞线效果，首先我们需要在场景中生成几个护罩。护罩将作为飞线的起点和终点。护罩可以通过 Three.js 的几何体（如球体）来表示，使用自定义着色器来控制其视觉效果。我们先简化护罩的创建：
const createShields = (count) => {
const shieldPositions = [];
const shieldMeshes = [];
for (let i = 0; i < count; i++) {
const geometry = new THREE.SphereGeometry(1.5, 64, 64);
const material = new THREE.MeshStandardMaterial({ color: 0xffff00 });
const shield = new THREE.Mesh(geometry, material);
// 随机生成护罩的位置
const position = new THREE.Vector3(
(Math.random() - 0.5) * 30,
1,
(Math.random() - 0.5) * 30
);
shield.position.copy(position);
shield.name = `Shield ${i + 1}`;
scene.add(shield);
shieldPositions.push(position);
shieldMeshes.push(shield);
}
return { shieldPositions, shieldMeshes };
};
四、实现飞线效果
现在我们有了护罩，接下来就是创建护罩之间的飞线。飞线效果主要通过 二次贝塞尔曲线（Quadratic Bezier Curve） 来生成，并使用 着色器（Shader） 来控制线条的动态效果。我们使用 ShaderMaterial 自定义飞线的外观，并结合 uTime 实现飞线的动画。
const createFlyingLines = (positions, meshes) => {
for (let i = 0; i < positions.length - 1; i++) {
const start = positions[i];
const end = positions[i + 1];
// 二次贝塞尔曲线生成飞线
const curve = new THREE.QuadraticBezierCurve3(
start.clone(),
start.clone().lerp(end, 0.5).add(new THREE.Vector3(0, 5, 0)), // 控制点
end.clone()
);
const points = curve.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
// 自定义着色器，控制飞线效果
const material = new THREE.ShaderMaterial({
uniforms: {
uTime: { value: 0 },
uLength: { value: curve.getLength() },
uColor: { value: new THREE.Color(0x00ffff) }
},
vertexShader: `
uniform float uTime;
uniform float uLength;
varying float vOpacity;
void main() {
float progress = mod(uTime + position.x / uLength, 1.0);
vOpacity = smoothstep(0.5, 1.0, progress);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform vec3 uColor;
varying float vOpacity;
void main() {
gl_FragColor = vec4(uColor * vOpacity, vOpacity);
}
`,
transparent: true,
blending: THREE.AdditiveBlending,
});
// 将飞线添加到场景中
const line = new THREE.Line(geometry, material);
scene.add(line);
}
};
五、添加动画效果
为了让飞线看起来更加动态，我们将通过 动画循环 来更新着色器中的 uTime，从而实现线条的流动效果：
const clock = new THREE.Clock();
const animate = () => {
const elapsedTime = clock.getElapsedTime();
// 更新飞线的时间
scene.children.forEach((child) => {
if (child.isLine && child.material.uniforms) {
child.material.uniforms.uTime.value = elapsedTime;
}
});
controls.update(); // 更新相机控制
renderer.render(scene, camera); // 渲染场景
requestAnimationFrame(animate); // 下一帧继续执行
};
animate();
六、最终效果展示
通过上述步骤，你可以在 Three.js 场景中生成多个护罩，并在护罩之间创建带有动态光效的飞线。这种效果非常适合用来展示数据流动、系统攻击等动态过程。
总结
在这篇博客中，我们详细介绍了如何在 Three.js 中实现护罩与护罩之间的飞线效果。这个过程主要分为以下几步：
- 创建护罩：通过随机位置生成护罩，并确保它们不会重叠。
- 生成飞线：使用贝塞尔曲线和自定义着色器，创建动态飞线效果。
- 动画控制：通过动画循环更新
uTime，让飞线看起来更加流畅炫酷。