如何在 Three.js 中实现护罩之间的飞线效果

在这里插入图片描述

在现代可视化大屏项目中，动态飞线效果可以极大地提升视觉表现。特别是在模拟护罩之间的交互时，飞线可以很好地表示数据流动、攻击路径等信息。本文将详细介绍如何使用 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();