Three.js + React 实战系列-3D 个人主页：构建 About 组件 （响应式 + 互动 + 动效）✨

对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦！！谢谢大家！！！

在本节中，我们将完成 3D 主页中的 About 介绍区域，它是用户了解你背景、技能、联系方式的第一入口。


这一组件不仅实现了 视觉信息分区、响应式布局适配、复制邮箱、动态 3D 地球 等关键功能，还通过图片与文字结合增强了展示效果。


✅前置条件：

• npm install react-globe.gl

---

🌟 组件亮点

功能	描述
🖼️ 响应式网格布局	兼容移动端与桌面，适应不同屏幕
🌍 动态地球 Globe	使用 react-globe.gl 渲染交互式 3D 地球
📋 复制邮箱互动	支持点击复制邮箱，反馈状态变更
🧠 信息模块划分	技术栏目、兴趣、工作地点、联系方式等内容可视化呈现

---

📁 项目结构建议

组件路径：

src/
├— sections/
│   └— 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 }]}
/>

✨ 高度适配不同设备，标签文字可添加多个城市。

globeImageUrl bumpImageUrl 可以在我的仓库中复制

---

📋 邮箱复制功能实现

通过 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 为内容添加滑入动效
• ⛳️ 实现点击跳转动效

---

对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦！！谢谢大家！！！
我们下一节见！👋