可能你对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/
🗂️ 项目基础目录结构
建议将项目结构清晰划分，便于后续维护与模块化开发：
three-profile/
├── public/ # 静态资源（模型、贴图、icon）
│ ├── models/ # .glb / .gltf 模型资源
│ ├── textures/ # 贴图（背景、材质贴图等）
│ └── assetss/ # 图标icon资源
├── src/
│ ├── components/ # 3D 场景组件（Avatar, Card, Icons...）
│ ├── constans/ # 常量定义
│ ├── sections/ # 构成主页部分的section
│ ├── App.jsx # 应用主入口
│ └── main.jsx # React 挂载入口
│ └── index.css # 引入全局css配置入口
├── index.html
└── vite.config.js
🛠️ 搭建项目
- 初始化 react 项目
npm create vite@latest three-profile -- --template react
npm install
npm run dev
- 💻 安装Tailiwindcss
虽然tailiwindcss已经更新到v4版本，但是为了不在环境配置上浪费时间，请使用v3版本。
"autoprefixer": "^10.4.20",
"postcss": "^8.4.41",
"tailwindcss": "^3.4.10",
将上面依赖复制到package.json中执行
npm install 安装依赖即可
- 配置项目
根目录执行 npx tailwindcss init 生成 tailiwindcss.config.js
在仓库Readme-代码片段中复制 tailiwindcss.config.js 代码片段
根目录创建postcss.config.js，在仓库Readme-代码片段中复制 postcss.config.js 代码片段
在仓库ReadMe文件中复制 index.css 覆盖 src/index.css
删除 App.css
👋 Hello ThreeJS!!
🎥 01 · 项目框架与资源准备：你的 3D 主页起点
✅ 小结
我们已经完成了以下工作：
-
✅ 初始化项目结构
-
✅ 安装并配置核心依赖
-
✅ 梳理项目资源
- 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/
🔮 下一篇预告
Navbar导航栏 ✅
