Three.js + React 实战系列-3D 个人主页：构建 About 组件 （响应式 + 互动 + 动效）✨
对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦！！谢谢大家！！！
在本节中，我们将完成 3D 主页中的 About 介绍区域，它是用户了解你背景、技能、联系方式的第一入口。
这一组件不仅实现了 视觉信息分区、响应式布局适配、复制邮箱、动态 3D 地球 等关键功能，还通过图片与文字结合增强了展示效果。
✅前置条件：
npm install react-globe.gl
React + ThreeJS 个人主页小项目：🎥 04 · 构建 About 组件 （响应式 + 互动 + 动效）✨
🌟 组件亮点
| 功能 | 描述 |
|---|---|
| 🖼️ 响应式网格布局 | 兼容移动端与桌面，适应不同屏幕 |
| 🌍 动态地球 Globe | 使用 react-globe.gl 渲染交互式 3D 地球 |
| 📋 复制邮箱互动 | 支持点击复制邮箱，反馈状态变更 |
| 🧠 信息模块划分 | 技术栏目、兴趣、工作地点、联系方式等内容可视化呈现 |
📁 项目结构建议
组件路径：
src/
├— components/
│ └— About.jsx
└— assets/├— grid1.png ～ grid4.png├— copy.svg / tick.svg
📊 布局结构说明
整个组件采用 Tailwind CSS + CSS Grid 实现响应式布局：
<section className='c-space my-20' id="about"><div className='grid xl:grid-cols-3 xl:grid-rows-6 md:grid-cols-2 grid-cols-1 gap-5'>{/* 5 个内容块，分别为个人简介、技能、地球、热情、联系方式 */}</div>
</section>
根据屏幕尺寸使用 xl:grid-cols-3 和 xl:grid-rows-6 实现大屏三列布局，小屏自动折行。
🌍 动态地球展示（Globe）
使用 react-globe.gl 组件来展示 3D 地球，并添加标签点：
<Globeheight={326}width={326}backgroundColor="rgba(0, 0, 0, 0)"globeImageUrl="//unpkg.com/three-globe/example/img/earth-day.jpg"bumpImageUrl="//unpkg.com/three-globe/example/img/earth-topology.png"labelsData={[{ lat: 32, lng: 112, text: 'XiangYang, China', color: 'white', size: 30 }]}
/>
✨ 高度适配不同设备，标签文字可添加多个城市。
globeImageUrlbumpImageUrl可以在我的仓库中复制
📋 邮箱复制功能实现
通过 navigator.clipboard.writeText() 实现点击邮箱自动复制，并通过状态控制图标切换：
const [hasCopied, setHasCopied] = useState(false)const handleCopy = () => {navigator.clipboard.writeText('adrian@jsmastery.pro');setHasCopied(true);setTimeout(() => setHasCopied(false), 2000);
};
<div className="copy-container" onClick={handleCopy}><img src={hasCopied ? 'assets/tick.svg' : 'assets/copy.svg'} alt="copy" /><p className="text-white">adrian@jsmastery.pro</p>
</div>
✅ 用户点击后图标变为 ✅，2 秒后自动恢复。
📱 响应式适配说明
各内容块使用 Tailwind 工具类控制高度：
<img src="..." className="w-full sm:h-[276px] h-fit object-contain" />
同时不同网格区域使用：
col-span-X控制宽度row-span-X控制纬向高度
例如：
<div className="xl:col-span-2 xl:row-span-3">...</div>
确保每个模块在移动端和桌面端都能有良好视觉分布。
✅ 总结
本节我们完成了一个具有视觉吸引力与互动能力的 About 页面：
- ✅ 使用 CSS Grid 实现响应式布局
- ✅ 集成 3D 地球提升科技感
- ✅ 组件化组织图文展示区域
- ✅ 实现邮箱点击复制与反馈动画
🔠 下一篇预告：作品展示区 + 动画出场
我们将在下一节中：
- 🌟 构建项目展示区域（Projects）
- ✨ 使用
gsap为内容添加滑入动效 - ⛳️ 实现点击跳转动效
对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦！！谢谢大家！！！
我们下一节见！👋