可能你对tailiwindcss毫不了解，别紧张，记住我们只是在学习，学习的是作者的思想和技巧，并不是某一行代码。

在之前的几篇文章中，我们已经熟悉了 Three.js 的基本用法，并通过 react-three-fiber 快速构建了一个完整场景。

本篇将正式开启我们的 3D 个人主页实战系列 🚀

完整项目：
github项目地址：https://github.com/SunACong/three-practice.git

教程仓库：
gitcode地址：https://gitcode.com/sunbyte/three-profile.git

前置知识：

• ✅ tailiwindcss

本篇聚焦以下几个目标：

• ✅ 规划整个项目的基础目录结构

• ✅ 明确资源（模型/贴图）存放位置

• ✅ 明确各个文件夹的作用以及内容

这是构建你专属 3D 主页的第一步，让我们开始吧！

部署效果地址：https://three-profile-one.vercel.app/

🗂️ 项目基础目录结构

建议将项目结构清晰划分，便于后续维护与模块化开发：

<br/>

<br/>

🛠️ 搭建项目

1. 初始化 react 项目

   <br/>

<br/>

1. 💻 安装Tailiwindcss

虽然tailiwindcss已经更新到v4版本，但是为了不在环境配置上浪费时间，请使用v3版本。

1. 配置项目

   

<br/>

👋 Hello ThreeJS!!

<br/>

🎥 01 · 项目框架与资源准备：你的 3D 主页起点

<br/>

✅ 小结

我们已经完成了以下工作：

• ✅ 初始化项目结构

• ✅ 安装并配置核心依赖

• ✅ 梳理项目资源

• GLB转换为React代码：https://gltf.pmnd.rs/

• 捏脸网址：https://readyplayer.me/

• GLB转换为FBX：https://products.aspose.app/3d/conversion/glb-to-fbx#

• 为你的3D模型添加动作：https://www.mixamo.com/#/

• 免费部署网址：https://vercel.com/

• <br/>

<br/>

标签: three.js, React, 3D 主页