用 Minecraft 撸个人主页

为了打破这种无聊，我直接把个人主页给“方块化”了——写了一个 React 组件，能把你的个人数据直接生成一个可交互的 3D 像素世界。项目、技能、经历全部变成场景里的建筑和矿石，用 WASD 走过去就能交互。

这种把数据映射到 3D 空间的操作，比写几个 Grid 布局要有趣得多。

快速部署实操

集成起来非常简单，本质上就是一个配置驱动的组件。

import { CraftFolio } from 'craftfolio';

function App() {
 return (
   <CraftFolio 
     config={{
       projects: [
         { name: 'AI Agent', description: '我的大模型项目', position: [10, 0, 5] },
         { name: 'E-commerce', description: '电商实战', position: [-5, 0, 12] }
       ],
       skills: ['React', 'Three.js', 'TypeScript'],
       theme: 'overworld'
     }} 
   />
 );
}

核心技术实现

很多人写 3D 场景最容易踩的坑就是性能，如果一个方块写一个 Mesh，场景稍微大一点 GPU 直接起飞。

• 性能优化： 我采用了 Instanced Rendering（实例化渲染）。通过 THREE.InstancedMesh 把数万个方块的几何体合并成一次 Draw Call，直接在 GPU 缓冲区处理位置偏移，保证 60fps 跑满。
• 世界生成： 使用 Perlin Noise（柏林噪声）来生成地形，确保每个人的主页地貌都不一样。
• 交互逻辑： 基于 Raycasting（光线投射）实现点击交互，当你走到某个“项目建筑”前点击时，才会弹出详细信息。

项目架构拆解

CraftFolio/
├── src/
│ ├── components/
│ │ ├── VoxelWorld.tsx — Three.js 场景核心，负责渲染循环
│ │ ├── Terrain.tsx — 随机地形生成逻辑
│ │ ├── PlayerControls.tsx — 第一人称相机 + WASD 控制
│ │ └── ProjectStructure.tsx — 将项目数据转换为 3D 建筑
│ ├── shaders/
│ │ ├── voxel.vert — 顶点着色器，处理方块几何
│ │ └── voxel.frag — 片元着色器，实现像素风光照
│ └── systems/
│ │ ├── WorldGenerator.ts — 噪声算法 + 结构布局
│ │ └── PhysicsEngine.ts — 简单的 AABB 碰撞检测，防止穿墙

说实话，比起那些精美的 2D 页面，这种能让招聘官在里面“逛一圈”的交互体验，确实更容易让人记住。如果你也厌倦了那种标准的 Portfolio 模版，这种把数据空间化的方案非常值得尝试。