🎨 3D建模从零入门手册
目标读者：完全没接触过3D建模的小白
阅读时间：30-40 分钟
核心收获：从安装到完成第一个完整3D模型并放到网页上
预处理：已完成软件安装（参考02_技术选型）
🎯 学习目标
读完本手册并动手操作后，你能做到：
- Blender中的基本建模（不看教程也能操作）
- 给模型加上材质和贴图
- 在网页里展示自己的3D模型
- 完成一个咖啡店场景模型
📌 第一步：Blender界面快速熟悉（1-2天）
打开Blender后看到的
┌──────────────────────────────────────────────────┐ │ 工具栏(T) │ 3D视口 (主工作区域) │ 属性栏(N) │ │ │ │ │ │ 选择工具 │ ┌────────┐ │ 位置X:0 │ │ 移动工具 │ │ 正方体 │ ← 默认有一个正方体 │ 位置Y:0 │ │ 旋转工具 │ └────────┘ │ 位置Z:0 │ │ 缩放工具 │ │ 尺寸X:2 │ │ │ 地面圆圈 = 3D光标位置 │ │ │ │ │ │ │ │ 左下角：信息 右下角：画面显示 │ │ └────────────┴──────────────────────────────────────┴───────────┘🖱️ 基本鼠标操作（这是最关键的！）
| 操作 | 怎么做 | 效果 |
|---|---|---|
| 旋转视角 | 鼠标中键拖曳 | 绕着看 |
| 移动视角 | Shift + 中键拖曳 | 平移 |
| 缩放 | 鼠标滚轮上下 | 近远 |
| 选择对象 | 左键点击 | 选中 |
| 新增物体 | Shift + A | 添加菜单 |
| 删除 | X 键 | 删除确认 |
| 进入编辑 | Tab 键 | 编辑模式 |
⚠️重要提醒：Blender默认用中键旋转。如果没有中鼠标键，可以去 Edit > Preferences > Keymap，勾选 “Emulate 3 Button Mouse”，用 Alt+左键代替。
📌 第二步：建你的第一个模型——咖啡杯（3-5天）
目标效果
___________ / \ ← 杯口（空心） | | | ┌───┐ | | │咖啡│ | ← 杯身 | └───┘ | | | \___________/ ← 杯底 ↑ ╭──╮ ← 把手 │ │ ╰──╯详细操作步骤
第1步：删除默认正方体
1. 打开Blender（默认场景有正方体） 2. 左键选中正方体 3. 按 X 键 → 弹出确认 → 点 "Delete" 4. 场景清空了第2步：添加圆柱体作为杯身
1. 按 Shift+A → Mesh → Cylinder（圆柱体） 2. 左下角会出现参数面板： - Vertices: 32（足够圆了） - Radius: 1 - Depth: 2（高度） 3. 按Enter确认第3步：进入编辑模式，挖空杯口
1. 确保圆柱选中，按 Tab 进入编辑模式 2. 按 numpad 7（小键盘7）→ 切换为俯视图 3. 按 3（数字键）→ 切换为面选择模式 4. 左键点击圆柱顶面 → 选中顶面 5. 按 X → Delete → "Faces" → 顶面被删了（杯口是空的了） 6. 回到立体视角：按 numpad 0 或中键旋转第4步：加粗杯口边缘（挤出）
1. 仍在编辑模式中 2. 选择杯口的边圈：按 2（边选择模式） 3. 按 Alt+左键 点击杯口的一条边 → 整个边圈选中 4. 按 E（挤出Extrude）→ 向上移动一点 → 左键确认 （这就是杯口突出的边沿） 5. 按 S 缩放大一点 → 左键确认第5步：添加把手（用圆环）
1. 在编辑模式中：Shift+A → Mesh → Torus（圆环） 2. 参数调整： - Major Radius: 0.6（圆环的大圈半径） - Minor Radius: 0.15（圆环管子的粗细） - Major Segments: 24 - Minor Segments: 12 3. 用 G 键移动到杯子侧面 4. 用 R 键旋转90度（让把手竖起来） 5. 用 S 键缩放到合适大小第6步：细分修平滑
1. 按 Tab 回到物体模式 2. 右上角 Modifier Properties（🔧图标） 3. Add Modifier → Subdivision Surface 4. Viewport Level: 2（数值越大越光滑，但越慢）✅ 验证检查
□ 杯口是空心的（能看到里面） □ 杯身是光滑的圆柱形 □ 有把手附着在侧面 □ 整体看起来像一个杯子📌 第三步：添加材质和贬图（2-3天）
材质是什么？
简单说就是告诉电脑"这个物体表面是什么质感"：
- 是金属的？反光不反光？
- 是塑料的？粗糙还是光滑？
- 是什么颜色？
基本材质设置
步骤：
1. 选中咖啡杯 2. 在右侧面板选 Material Properties（球体图标） 3. 点 "New" 创建新材质 4. 材质名字改为 "CupMaterial" 5. 调整参数： - Base Color（底色）: 点色块，选你喜欢的颜色 - Metallic（金属度）: 0.1（陶瓷不是金属） - Roughness（粗糙度）: 0.3（白瓷有点光亮）常见材质参数速查
| 材质类型 | Metallic | Roughness | 示例 |
|---|---|---|---|
| 陶瓷杯 | 0.0 | 0.2 | 咖啡杯 |
| 金属杯 | 1.0 | 0.3 | 不锈钢杯 |
| 木桌 | 0.0 | 0.5 | 木制桌面 |
| 玻璃杯 | 0.0 | 0.05 | 玻璃水杯（还需设置Transmission=1） |
| 塑料 | 0.0 | 0.4 | 塑料杯 |
渲染预览
右上角有三个圆球图标，从左到右： ○ 线框 → 只看骨架 ○ 实体 → 看形状，不看材质 ● 材质预览 → 看材质效果（推荐） ○ 最终渲染 → 最好看，但慢建议平时用"材质预览"看效果，确认没问题再用"最终渲染"出图。
📌 第四步：导出模型到Web（2-3天）
导出为GLTF格式
1. 选中咖啡杯模型 2. File → Export As → 选格式 3. 选 "glTF 2.0 (.glb)"（推荐GLB格式，单文件，紧凑） 4. 保存到项目文件夹为什么选GLB？因为网页最好用这个格式，支持材质、动画，文件小。
用Three.js在网页显示
项目结构：
my-3d-project/ ├── index.html ├── main.js └── models/ └── coffee_cup.glb ← 从Blender导出的文件index.html：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>我的3D咖啡杯</title><style>*{margin:0;padding:0;}body{overflow:hidden;background:#1a1a2e;}canvas{display:block;}</style></head><body><!-- Three.js自动创建canvas元素 --><scriptsrc="main.js"type="module"></script></body></html>main.js：
// 导入Three.js（使用CDN）import*asTHREEfrom'https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js';import{GLTFLoader}from'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/loaders/GLTFLoader.js';import{OrbitControls}from'https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js';// === 1. 基本场景搭建 ===// 场景（容纳所有对象的"房间"）constscene=newTHREE.Scene();// 相机（你的眼睛）constcamera=newTHREE.PerspectiveCamera(60,// 视野角度window.innerWidth/window.innerHeight,// 宽高比0.1,// 最近距离1000// 最远距离);camera.position.set(5,3,5);// 放到斜上方看// 渲染器（把场景画到屏幕上）constrenderer=newTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.setPixelRatio(window.devicePixelRatio);document.body.appendChild(renderer.domElement);// === 2. 灯光 ===// 环境光（四面八方都有光，不会太暗）constambientLight=newTHREE.AmbientLight(0xffffff,0.5);scene.add(ambientLight);// 平行光（像太阳一样从某个方向照来）constdirectionalLight=newTHREE.DirectionalLight(0xffffff,0.8);directionalLight.position.set(5,10,5);scene.add(directionalLight);// === 3. 加载模型 ===constloader=newGLTFLoader();loader.load('./models/coffee_cup.glb',// 模型文件路径// 加载成功的回调function(gltf){constmodel=gltf.scene;model.scale.set(1,1,1);// 缩放model.position.set(0,0,0);// 位置scene.add(model);console.log('✅ 模型加载成功！');},// 加载进度回调function(xhr){console.log(`加载中...${(xhr.loaded/xhr.total*100).toFixed(1)}%`);},// 加载失败回调function(error){console.error('❌ 加载失败:',error);});// === 4. 鼠标控制 ===// OrbitControls让你用鼠标旋转、缩放、平移constcontrols=newOrbitControls(camera,renderer.domElement);controls.target.set(0,0,0);// 旋转中心controls.enableDamping=true;// 平滑动画效果// === 5. 响应窗口大小变化 ===window.addEventListener('resize',()=>{camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight);});// === 6. 渲染循环（每帧刷新画面） ===functionanimate(){requestAnimationFrame(animate);// 下一帧再调用自己controls.update();// 更新控制器renderer.render(scene,camera);// 画一帧}animate();// 开始！本地运行
# 需要一个简单的本地服务器（直接打开html不行，会报CORS错误）# 方法一：用VS Code 的 Live Server插件# → 在VS Code里安装插件 "Live Server"# → 右键 index.html → "Go Live"# 方法二：用Node.jscdmy-3d-project npx serve.# 然后在浏览器去 http://localhost:5000✅ 最终验证
□ 浏览器里看到你的咖啡杯 □ 能用鼠标旋转观看角度 □ 能用滚轮放大缩小 □ 模型材质颜色是你想要的 □ 页面不报错🎓 课后练习（拓展能力）
练习1：在Blender里新建一个木桌模型，导出显示在网页 练习2：给模型加动画（Blender里的Animation工作区） 练习3：网页里添加一个旋转按钮，让模型自动转动 练习4：添加点击效果（点击模型变颜色）练习3参考代码（自动旋转）
// 在main.js的animate函数里添加：letmodel=null;// loader加载回调里保存引用：// model = gltf.scene;functionanimate(){requestAnimationFrame(animate);controls.update();// 自动旋转if(model){model.rotation.y+=0.005;// 每帧转一小点}renderer.render(scene,camera);}
