核心内容摘要
谁动了我的桌面？百款“数字寄生虫”围城，一场输不起的赛博保卫战
3D建模从零入门手册目标读者完全没接触过3D建模的小白阅读时间
分钟核心收获从安装到完成第一个完整3D模型并放到网页上预处理已完成软件安装参考02_技术选型 学习目标读完本手册并动手操作后你能做到Blender中的基本建模不看教程也能操作给模型加上材质和贴图在网页里展示自己的3D模型完成一个咖啡店场景模型 第一步Blender界面快速熟悉
天打开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左键代替。
第二步建你的第一个模型——咖啡杯
天目标效果___________ / \ ← 杯口空心 | | | ┌───┐ | | │咖啡│ | ← 杯身 | └───┘ | | | \___________/ ← 杯底 ↑ ╭──╮ ← 把手 │ │ ╰──╯详细操作步骤第1步删除默认正方体
打开Blender默认场景有正方体
左键选中正方体
按 X 键 → 弹出确认 → 点 Delete
场景清空了第2步添加圆柱体作为杯身
按 ShiftA → Mesh → Cylinder圆柱体
左下角会出现参数面板 - Vertices: 32足够圆了 - Radius: 1 - Depth: 2高度
按Enter确认第3步进入编辑模式挖空杯口
确保圆柱选中按 Tab 进入编辑模式
按 numpad 7小键盘7→ 切换为俯视图
按 3数字键→ 切换为面选择模式
左键点击圆柱顶面 → 选中顶面
按 X → Delete → Faces → 顶面被删了杯口是空的了
回到立体视角按 numpad 0 或中键旋转第4步加粗杯口边缘挤出
仍在编辑模式中
选择杯口的边圈按 2边选择模式
按 Alt左键 点击杯口的一条边 → 整个边圈选中
按 E挤出Extrude→ 向上移动一点 → 左键确认 这就是杯口突出的边沿
按 S 缩放大一点 → 左键确认第5步添加把手用圆环
在编辑模式中ShiftA → Mesh → Torus圆环
参数调整 - Major Radius:
6圆环的大圈半径 - Minor Radius:
15圆环管子的粗细 - Major Segments: 24 - Minor Segments: 12
用 G 键移动到杯子侧面
用 R 键旋转90度让把手竖起来
用 S 键缩放到合适大小第6步细分修平滑
按 Tab 回到物体模式
右上角 Modifier Properties图标
Add Modifier → Subdivision Surface
Viewport Level: 2数值越大越光滑但越慢✅ 验证检查□ 杯口是空心的能看到里面 □ 杯身是光滑的圆柱形 □ 有把手附着在侧面 □ 整体看起来像一个杯子 第三步添加材质和贬图
天材质是什么简单说就是告诉电脑这个物体表面是什么质感是金属的反光不反光是塑料的粗糙还是光滑是什么颜色基本材质设置步骤
选中咖啡杯
在右侧面板选 Material Properties球体图标
点 New 创建新材质
材质名字改为 CupMaterial
调整参数 - Base Color底色: 点色块选你喜欢的颜色 - Metallic金属度:
1陶瓷不是金属 - Roughness粗糙度:
3白瓷有点光亮常见材质参数速查材质类型MetallicRoughness示例陶瓷杯
0.
0
2咖啡杯金属杯
1.
0
3不锈钢杯木桌
0.
0
5木制桌面玻璃杯
0.
0
05玻璃水杯还需设置Transmission1塑料
0.
0
4塑料杯渲染预览右上角有三个圆球图标从左到右 ○ 线框 → 只看骨架 ○ 实体 → 看形状不看材质 ● 材质预览 → 看材质效果推荐 ○ 最终渲染 → 最好看但慢建议平时用材质预览看效果确认没问题再用最终渲染出图。
第四步导出模型到Web
天导出为GLTF格式
选中咖啡杯模型
File → Export As → 选格式
选 glTF
0 (.glb)推荐GLB格式单文件紧凑
保存到项目文件夹为什么选GLB因为网页最好用这个格式支持材质、动画文件小。
用Three.js在网页显示项目结构my-3d-project/ ├── index.html ├── main.js └── models/ └── coffee_cup.glb ← 从Blender导出的文件index.html!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title我的3D咖啡杯/titlestyle*{margin:0;padding:0;}body{overflow:hidden;background:#1a1a2e;}canvas{display:block;}/style/headbody!-- Three.js自动创建canvas元素 --scriptsrcmain.jstypemodule/script/body/htmlmain.js// 导入Three.js使用CDNimport*asTHREEfromhttps://cdn.jsdelivr.net/npm/three
0.
1
0/build/three.module.js;import{GLTFLoader}fromhttps://cdn.jsdelivr.net/npm/three
0.
1
0/examples/jsm/loaders/GLTFLoader.js;import{OrbitControls}fromhttps://cdn.jsdelivr.net/npm/three
0.
1
0/examples/jsm/controls/OrbitControls.js;//
基本场景搭建 // 场景容纳所有对象的房间constscenenewTHREE.Scene();// 相机你的眼睛constcameranewTHREE.PerspectiveCamera(60,// 视野角度window.innerWidth/window.innerHeight,// 宽高比
1,// 最近距离1000// 最远距离);camera.position.set(5,3,
;// 放到斜上方看// 渲染器把场景画到屏幕上constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.setPixelRatio(window.devicePixelRatio);document.body.appendChild(renderer.domElement);//
灯光 // 环境光四面八方都有光不会太暗constambientLightnewTHREE.AmbientLight(0xffffff,
0.
;scene.add(ambientLight);// 平行光像太阳一样从某个方向照来constdirectionalLightnewTHREE.DirectionalLight(0xffffff,
0.