3d-logo 是做什么的？
使用 React Three Fiber 从任意 Logo 图像创建 3D 旋转硬币/奖章效果。自动检测轮廓、去除纯色背景、构建镀铬边缘的硬币并添加环境反射。适用于 3D Logo、旋转 Logo、硬币效果或奖章动画。
使用方法
- 确保您的项目中已安装
@react-three/fiber和@react-three/drei。 - 将您的 Logo 图像（建议为 PNG 格式，背景透明或纯色）放置于
/public目录下。 - 引入本技能提供的
Coin3D组件，并传入图像路径。 - 自定义旋转速度、缩放比例和光照参数。
功能特性
- 自动轮廓检测：智能识别 Logo 边缘，无论背景复杂度如何。
- 背景去除：自动移除纯色背景（白色、黑色、透明等）。
- 3D 硬币构建：创建圆柱形基础几何体，正面嵌入 Logo，边缘模拟镀铬材质。
- 环境反射：使用 HDR 环境贴图实现逼真的金属反射效果。
- 自动旋转动画：持续旋转展示 3D 效果的动画循环。
示例代码
import { Canvas } from '@react-three/fiber'
import { Coin3D } from './Coin3D'
export default function App() {
return (
<Canvas camera={{ position: [0, 0, 5], fov: 50 }}>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} />
<Coin3D
imagePath="/logo.png"
rotationSpeed={0.02}
scale={1.5}
rimColor="silver"
/>
</Canvas>
)
}
组件 Props
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
imagePath | string | 必填 | Logo 图像路径（相对于 public 目录） |
rotationSpeed | number | 0.01 | 旋转速度（弧度/帧） |
scale | number | 1 | 整体缩放 |
rimColor | string | "#C0C0C0" | 边缘镀铬颜色 |
backgroundColor | string | "transparent" | 待去除的背景色 |
注意事项
- 图像应具有清晰的轮廓以获得最佳效果。
- 对于复杂背景，建议预先使用图像编辑工具处理。
- 环境贴图默认使用
@react-three/drei的Environment组件。 - 性能方面，建议在移动设备上限制旋转速度。
依赖
react>= 18.0@react-three/fiber>= 8.0@react-three/drei>= 9.0three>= 0.150