使用 Framer Motion 和 Three.js 为 3D 模型添加动画效果

Framer Motion 是一个用于 React 的动画库，符合 React 的声明式哲学，易于使用。

React Three Fiber 允许将 Three.js 作为 React 组件使用，提供基本功能。

Drei 是一个辅助库，提供有用的组件和钩子，使 Three.js 更易于与 React 一起使用。

使用 useGLTF 钩子异步加载 GLTF 格式的 3D 模型。

通过 Canvas 渲染 3D 模型，并使用 ambientLight 调整模型的亮度。

可以通过 scale、position 和 rotation 属性调整 3D 模型的大小、位置和旋转。

使用 camera 属性设置 Three.js 相机的位置和视野。

通过 useFrame 钩子实现 3D 模型的波动动画。

使用 OrbitControls 控制相机的旋转、平移和缩放。

motion.div 组件用于添加动画，支持初始状态、最终状态和过渡设置。

Framer Motion、React Three Fiber 和 Drei 结合使用，可以轻松创建互动和视觉吸引力的网页应用。