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

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


🗂️ 项目基础目录结构

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

bash 复制代码
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

🛠️ 搭建项目

  1. 初始化 react 项目
bash 复制代码
npm create vite@latest three-profile -- --template react

npm install

npm run dev
  1. 💻 安装Tailiwindcss

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

bash 复制代码
"autoprefixer": "^10.4.20",	
"postcss": "^8.4.41",
"tailwindcss": "^3.4.10",

将上面依赖复制到package.json中执行

npm install 安装依赖即可
  1. 配置项目
bash 复制代码
根目录执行 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 主页起点

✅ 小结

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

🔮 下一篇预告

  • Navbar 导航栏 ✅
相关推荐
哈市雪花14 小时前
相机:Camera原理讲解(使用OpenGL+QT开发三维CAD)
qt·3d·交互·相机·图形学·opengl·视角
zhongqu_3dnest14 小时前
3D建模公司的能力与技术
数码相机·3d·虚拟现实·vr制作公司·3d建模公司
syncon1218 小时前
手机屏色斑缺陷修复及相关液晶线路激光修复原理
科技·3d·制造
九班长19 小时前
Golang服务端处理Unity 3D游戏地图与碰撞的详细实现
3d·unity·golang
温轻舟1 天前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
在下胡三汉1 天前
粗略地看一下 glTF 2.0 的所有标准属性(顺便说一下,还有 .glb 的结构)
3d
zhongqu_3dnest2 天前
3D可视化:开启多维洞察新时代
3d·3d建模·空间计算·3d可视化·三维空间·沉浸式体验
试着2 天前
【数据标注师】3D标注
3d·数据标注师·3d标注
工业3D_大熊11 天前
3D模式格式转换工具HOOPS Exchange如何将3D PDF转换为STEP格式?
3d·pdf·3d格式转换·3d模型格式转换·cad格式转换·cad数据格式转换·3d模型可视化
广州华锐视点11 天前
浅议 3D 展示技术为线上车展新体验带来的助力
3d