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 导航栏 ✅
相关推荐
小赖同学啊10 小时前
GIS地理信息系统建设:高精度3D建模
3d
计算机sci论文精选18 小时前
CVPR 2024 3D传感框架实现无监督场景理解新纪元
人工智能·机器学习·计算机视觉·3d·cvpr·传感技术
程序员编程指南19 小时前
Qt OpenGL 集成:开发 3D 图形应用
c语言·数据库·c++·qt·3d
GISBox19 小时前
GISBox实操指南:如何将IFC文件高效转换为3DTiles格式‌‌
3d·免费工具
Listennnn19 小时前
3D Semantic Occupancy Prediction
3d
三月的一天19 小时前
react+threejs实现自适应分屏查看/3D场景对比功能/双场景对比查看器
3d·分屏控制·react threejs·多场景渲染
lqjun082721 小时前
相机内外参矩阵:从3D世界坐标到2D像素坐标变换
数码相机·3d·矩阵
渲吧云渲染1 天前
解码3D格式转换
3d
星图云2 天前
Mirauge3D 赋能:全自动建模,让城市规划与建筑设计拥有高分辨率实景三维模型
3d
点云SLAM2 天前
Pytorch中cuda相关操作详见和代码示例
人工智能·pytorch·python·深度学习·3d·cuda·多gpu训练