three.js 实现波浪线效果

three.js是一个基于WebGL的JavaScript库，用于创建复杂的3D图形和动画。要实现波浪线的效果，你可以采用以下步骤：

1. **设置场景和相机**：
首先，创建一个新的Three.js场景，并配置好视角和相机位置。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;

2. **创建几何体**：
创建一个基础的几何体，如线段或曲线路径，作为波浪的基础形状。THREE.Geometry可以手动绘制点，也可以用THREE.CylinderGeometry等预设模型来创建类似的效果。

const geometry = new THREE.Geometry();
for (let i = 0; i <= waveLength; i += stepSize) {
   // 添加波浪节点的位置
   geometry.vertices.push(new THREE.Vector3(i, amplitude * Math.sin(waveFrequency * i), 0));
}

3. **动态修改几何体**：
利用requestAnimationFrame函数创建动画循环，通过改变波长、频率、振幅等参数，模拟波浪的起伏变化。

function animate() {
    requestAnimationFrame(animate);

    // 更新波浪参数
    amplitude *= 0.98; // 振幅衰减
    waveLength += speed; // 波长变化

    // 更新几何体
    for (let i = 0; i <= waveLength; i += stepSize) {
        const position = amplitude * Math.sin(waveFrequency * i);
        geometry.vertices[i].y = position;
    }

    renderer.render(scene, camera);
}

animate();

4. **渲染和附加材质**：
将几何体赋予材质并添加到场景中，然后用合适的着色器（如基本材质、噪波纹理等）来增强视觉效果。

const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
const line = new THREE.Line(geometry, material);
scene.add(line);

5. **显示结果**：
最后，实例化THREE.WebGLRenderer并将场景渲染到HTML元素上。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);