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

sunbyte

已于 2025-04-17 21:05:07 修改

阅读量763

点赞数 4

分类专栏： Three.js奇幻之旅：从零打造3D世界文章标签： 3d

于 2025-04-17 20:17:36 首次发布

本文链接：https://blog.csdn.net/qq_44808710/article/details/147187927

版权

Three.js奇幻之旅：从零打造3D世界专栏收录该内容

5 篇文章

订阅专栏

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