当前位置：首页 > news >正文

Three.js + React 实战系列 : 从零搭建 3D 个人主页

news 来源：原创 2025/5/17 16:22:22

可能你对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 reactnpm installnpm 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/