Three.js 作品集完全指南
个人作品集是展示你的技能与审美的最佳场所，而 Three.js 能让你的作品集从众多模板中脱颖而出。
为什么选择 Three.js？
传统的 2D 作品集大家都在做，而 3D 场景能够立刻抓住访客的注意力。
第一步：选择正确的抽象层
| 方案 | 学习曲线 | 灵活性 | 推荐场景 |
|---|---|---|---|
| 原生 Three.js | 高 | 最高 | 极致定制 |
| React Three Fiber | 中 | 高 | React 项目 |
| Drei 组件库 | 低 | 中 | 快速原型 |
tsx22 lines
// 使用 R3F 创建一个霓虹几何体
import { Canvas } from '@react-three/fiber';
import { MeshDistortMaterial, Float } from '@react-three/drei';
function NeonIcosahedron() {
return (
<Canvas camera={{ position: [0, 0, 4] }}>
<ambientLight intensity={0.3} />
<pointLight position={[5, 5, 5]} intensity={2} color="#ff2d95" />
<Float>
<mesh>
<icosahedronGeometry args={[1, 1]} />
<MeshDistortMaterial
color="#ff2d95"
emissive="#ff2d95"
emissiveIntensity={0.6}
distort={0.3}
/>
</mesh>
</Float>
</Canvas>
);
}性能优化要点
- 控制 draw call 数量
- 使用 InstancedMesh 渲染大量重复物体
- 合理设置 pixelRatio（通常不超过 2）
- 对非关键元素使用降低分辨率的纹理
设计原则
最好的 3D 作品集，是让访客「感觉不到 WebGL 的存在」。特效服务于叙事，而非喧宾夺主。