使用react+three做一个动态音乐播放按钮

前言

最近在自学three，看见一个动态曲线的动图，就想着用three实现出来。

最终效果

主要技术栈
react

@react-three/fiber
@react-three/fiber 是一个 React renderer for Three.js，它允许你使用 React 的语法和组件化特性来构建 3D 场景。它是与 Three.js 交互的基础层，提供了以下功能：

• React 集成：使 Three.js 的场景和对象可以像 React 组件那样使用。
• 性能优化：利用 React 的虚拟 DOM 和变更检测机制来提高渲染效率。
• Hooks 支持：支持 React Hooks，如 useFrame 和 useLoader。
• 自动卸载：当组件不再被使用时，自动清理 Three.js 对象以避免内存泄漏。

@react-three/drei
@react-three/drei 是建立在 @react-three/fiber 之上的一个实用库，提供了许多常用的组件和工具，旨在简化常见的 3D 开发任务。这些工具通常包括但不限于：

• 实用组件：如 OrbitControls, Suspense, Grid, Spotlight 等。
• 加载器：用于加载纹理、模型和其他资源。
• 辅助工具：如 useGLTF, useTexture 等。

代码

小玩意，我就直接贴代码，看下注释应该能懂了

'use client';
import React, {
    useState, useCallback, useContext } from 'react';
import {
    Canvas, useFrame } from '@react-three/fiber';
import {
    Line } from '@react-three/drei';
import {
    AudioContext } from '../lib/contexts/AudioContext';

// 用于绘制动态曲线的组件
function DynamicCurve()