企业官网建设流程全解析

搭建网站php源码,网站美工工作步骤是什么,怎么停止网站,有没有网站做lol网站的#x1f3a8; 3D建模从零入门手册 目标读者#xff1a;完全没接触过3D建模的小白 阅读时间#xff1a;30-40 分钟 核心收获#xff1a;从安装到完成第一个完整3D模型并放到网页上 预处理#xff1a;已完成软件安装#xff08;参考02_技术选型#xff09; #x1f3af; … 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. 按 ShiftA → 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. 在编辑模式中ShiftA → 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白瓷有点光亮常见材质参数速查材质类型MetallicRoughness示例陶瓷杯0.00.2咖啡杯金属杯1.00.3不锈钢杯木桌0.00.5木制桌面玻璃杯0.00.05玻璃水杯还需设置Transmission1塑料0.00.4塑料杯渲染预览右上角有三个圆球图标从左到右 ○ 线框 → 只看骨架 ○ 实体 → 看形状不看材质 ● 材质预览 → 看材质效果推荐 ○ 最终渲染 → 最好看但慢建议平时用材质预览看效果确认没问题再用最终渲染出图。 第四步导出模型到Web2-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!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/three0.160.0/build/three.module.js;import{GLTFLoader}fromhttps://cdn.jsdelivr.net/npm/three0.160.0/examples/jsm/loaders/GLTFLoader.js;import{OrbitControls}fromhttps://cdn.jsdelivr.net/npm/three0.160.0/examples/jsm/controls/OrbitControls.js;// 1. 基本场景搭建 // 场景容纳所有对象的房间constscenenewTHREE.Scene();// 相机你的眼睛constcameranewTHREE.PerspectiveCamera(60,// 视野角度window.innerWidth/window.innerHeight,// 宽高比0.1,// 最近距离1000// 最远距离);camera.position.set(5,3,5);// 放到斜上方看// 渲染器把场景画到屏幕上constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);renderer.setPixelRatio(window.devicePixelRatio);document.body.appendChild(renderer.domElement);// 2. 灯光 // 环境光四面八方都有光不会太暗constambientLightnewTHREE.AmbientLight(0xffffff,0.5);scene.add(ambientLight);// 平行光像太阳一样从某个方向照来constdirectionalLightnewTHREE.DirectionalLight(0xffffff,0.8);directionalLight.position.set(5,10,5);scene.add(directionalLight);// 3. 加载模型 constloadernewGLTFLoader();loader.load(./models/coffee_cup.glb,// 模型文件路径// 加载成功的回调function(gltf){constmodelgltf.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让你用鼠标旋转、缩放、平移constcontrolsnewOrbitControls(camera,renderer.domElement);controls.target.set(0,0,0);// 旋转中心controls.enableDampingtrue;// 平滑动画效果// 5. 响应窗口大小变化 window.addEventListener(resize,(){camera.aspectwindow.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函数里添加letmodelnull;// loader加载回调里保存引用// model gltf.scene;functionanimate(){requestAnimationFrame(animate);controls.update();// 自动旋转if(model){model.rotation.y0.005;// 每帧转一小点}renderer.render(scene,camera);}