剃须刀产品动态设计：Blender建模到Three.js交互展示全流程

我们为什么要花力气给一把剃须刀做“动态设计”？先看一个很现实的问题：传统产品详情页里，一把剃须刀只有三张静帧图——一张正面、一张侧面、一张45度角。用户看完之后，很难判断它的握持感如何，刀头能不能贴合面部，机身是金属还是塑料，防水到底能做到什么程度。

这些问题本质上不是“图片精度不够”，而是“静态画面丢失了结构与功能信息”。而动态设计解决的核心，正是把抽象的卖点转化为可感知的视觉叙事：刀头怎么浮动，机身怎么拆开，水珠在表面怎么滑落，整机转动时高光怎么流动。它让用户在一段十几秒的动画里，完成对产品从外观到结构的快速认知。

这篇文章以“松下剃须刀”作为案例载体，不讲那些空泛的“设计理念”，而是给出一条能落地的技术路线：从产品分析、建模拆解、材质灯光的动态设计、Blender 动画制作，到 Web 端 Three.js 交互展示的完整链路。如果你正在做产品动画、电商 3D 展示，或者想把工业设计图变成可交互的线上模型，这篇文章可以帮你少走不少弯路。

1. 剃须刀动态设计的核心不是炫技，而是信息分层

很多人做产品动态设计时，第一反应是“转得越花越好”。这是一个典型的误区。剃须刀这类小家电，它的动态展示要完成的任务远比“好看”更复杂。

从信息传达的角度看，一次完整的剃须刀动态展示应该至少包含三个层级：

第一层是外观认知。用户需要看清整机轮廓、配色、材质肌理和品牌标识。这一层对应的是“旋转展示”，一般用一个 360 度水平旋转镜头完成。

第二层是结构认知。剃须刀不是一块铁疙瘩，它由刀头、刀网、机身、开关、充电接口、底座等多个部件组成。动态设计需要用“爆炸图”或“分层演示”的方式，让用户理解这些部件如何组装、如何拆解。松下剃须刀常见的往复式刀头结构，尤其适合用爆炸图来表现刀网、内刀片、外刀片的层级关系。

第三层是功能认知。剃须刀最核心的卖点是浮动贴面、防水清洗、长续航。注意，“防水”这个卖点用静态图很难表达，但是动画可以：水珠从机身滑落、整机在水流下冲洗、LED 指示灯在水雾中依然清晰。动态设计在这里的价值，是把“参数”翻译成“体验”。

所以，做动态设计之前，先做信息分层。你要先回答一个问题：这一段动画到底要让观众记住什么？如果三个层级全都塞进一个镜头里，观众什么都记不住。在我做过的小家电展示项目里，最稳妥的做法是拆成三段：外观展示 5 秒，结构拆解 8 秒，功能演示 6 秒。

这个阶段还要注意，不要为了动态而动态。剃须刀的握持感、重量感，是通过镜头的“稳定性”和“节奏”来传达的，不是通过剧烈的相机抖动。产品动画里，镜头是严谨的，运动是克制的，这和游戏 CG 里的镜头语言完全不同。

2. 建模之前，先看懂产品的材质分区和结构逻辑

拿到一个实际产品，不要急着打开软件建模。先做“产品拆解观察”，这一步决定了后期材质和动画的复杂度。

以松下剃须刀典型的往复式结构为例，从视觉和材质上通常可以分为几个区域：

这里真正容易踩的坑，是在建模阶段就把所有细节做进去。比如刀网上的几百个孔，如果全部用几何方式挖出来，模型面数会爆炸，后期动画和 Web 展示一定会卡。更合理的做法是：近景特写时用几何孔洞或高精度置换材质，整机展示时用透明贴图的方式模拟孔洞。也就是“分区精度管理”。

结构逻辑方面，建模时要按“真实拆解关系”分层命名。剃须刀从外到内大致是：外刀网层、内刀头层、刀头支架层、机身外壳层、内部组件层。每个层一会在做爆炸图动画时，就是一个独立的运动层级。如果你在建模时把它们合并成了一个物体，后续做动画就得重新拆，返工成本非常高。

建模路径建议这样走：

1. 导入真实产品的三视图作为背景参考图。
2. 用基础几何体（圆柱体、立方体）搭出整体比例。
3. 用细分曲面（Subdivision Surface）把机身轮廓修顺。
4. 用布尔运算做开关孔、充电口、显示屏凹槽。
5. 卡线后添加倒角修改器，让硬边在渲染时有真实的高光过渡。
6. 按部件命名分组，确保每个可动部件都是独立对象。

一个容易忽略的细节是“分模线”。真实的塑料产品不是一整块，而是由前壳、后壳、按钮等零件组装而成，零件之间有细小的缝隙。这些缝隙在静帧里不明显，但在旋转动画里，它们决定了产品的真实感。如果模型是一个完全无缝的整体，灯光一扫就会显得“塑料感过强”，因为真实产品一定是有装配缝隙的。

3. 从基础几何体到可用的剃须刀模型：一个最小实现流程

这一步我们进入实际建模操作。这里以 Blender 为例，说明从基础几何体到可展示模型的最小流程。Blender 免费、跨平台，并且后面要用的动态设计和 Web 导出都支持得很好，是目前做这类产品展示性价比最高的工具。

先说明一点：建模没有唯一路径，下面这个流程是为了“快速产出可用的展示模型”，不是雕刻级的高精模型流程。

第一步，建机身主体。新建一个圆柱体，修改顶点数为 32 或更高，让表面足够圆滑。先将圆柱体压扁到接近机身的宽高比，然后进入编辑模式，选中顶面和底面，调整大小形成上窄下宽的流线轮廓。

第二步，添加细分曲面修改器。把视图细分层级调到 2，渲染细分层级调到 2 或 3。这时模型会变圆润，但边缘也会被“吃掉”。所以要再添加一个倒角修改器，只对需要硬边的边缘线生效。记住一个原则：细分负责“圆”，倒角负责“硬”，两者配合才能得到真实产品的转折感。

第三步，布尔运算开孔。先创建一个与机身相交的小圆柱体，放在充电接口或开关的位置。为机身添加布尔修改器，运算方式选择“差值”（Difference），用小圆柱体挖出凹槽。布尔运算结束之后，记得应用修改器，然后手动修复边缘的三角面，否则后面的倒角会产生黑色坏面。

下面是一段用 Blender Python API 快速搭建基础机身的示例脚本。它创建一个带细分和倒角的圆筒，适合作为机身建模的起点：

import bpy import bmesh # 添加基础圆柱体 bpy.ops.mesh.primitive_cylinder_add( vertices=64, radius=0.05, depth=0.16, location=(0, 0, 0) ) obj = bpy.context.active_object obj.name = "Body_Base" # 添加细分曲面修改器 sub = obj.modifiers.new(name="Smooth", type='SUBSURF') sub.levels = 2 sub.render_levels = 3 # 添加倒角修改器 bevel = obj.modifiers.new(name="HardEdges", type='BEVEL') bevel.width = 0.002 bevel.segments = 3 bevel.limit_method = 'ANGLE' bevel.angle_limit = 0.5

如果你不想用脚本，手动操作等价于：添加圆柱体 → 给倒角 → 给细分曲面 → 调整参数。脚本的好处是方便批量创建对称部件，比如左右两个装饰条，可以直接复制对象并镜像。

第四步，用单独对象搭建刀头。刀头不要和机身合并。新建扁平的圆柱体作为刀网基座，放在机身顶部。再复制几层，通过缩放形成刀头组件的层次。刀头的每个零件都保持独立对象，命名前缀统一为“Cutter_”，这样后面做爆炸图时可以直接按名称批量选中。

做完基础模型后，去“物体模式”检查三个点：切换为线框模式看有没有破面；切换为实体模式看细分后的轮廓是否流畅；选中所有部件，检查原点（Origin）是否都在合理位置。原点位置非常重要，因为它决定了部件旋转动画时围绕哪个点运动。建议把每个部件的原点设置到实际装配轴心处。

4. 材质与灯光：让塑料、金属和橡胶一眼就能区分

建模解决的是“形”，材质和灯光解决的是“质”。剃须刀动态设计成败的另一个关键，是你能不能把“金属边框”和“塑料机身”拉开层次。如果所有材质看起来都一样，那产品图就会失去真实感。

Blender 中所有基于物理的材质都可以从一个节点开始：Principled BSDF。这个节点的核心参数并不多，真正要掌握的是以下几项：

这里最容易被误解的地方是：真实世界里的“黑色塑料”并不是纯黑色。如果你把基础色设为 #000000，它看起来会像一块黑洞洞的吸光布，完全失去体积感。正确做法是让它保持一个极低的亮度，比如 #1A1A1A 到 #2A2A2A 之间，这样灯光扫过去时，材质表面才能出现值得看的反射层次。

用脚本批量给多个部件指定材质是更高效的方式。比如下面的脚本，可以按名称前缀给机身部件分配亚光塑料材质，给刀头分配金属材质：

import bpy def create_material(mat_name, color, metallic, roughness): mat = bpy.data.materials.new(mat_name) mat.use_nodes = True bsdf = mat.node_tree.nodes["Principled BSDF"] bsdf.inputs["Base Color"].default_value = color bsdf.inputs["Metallic"].default_value = metallic bsdf.inputs["Roughness"].default_value = roughness return mat plastic_mat = create_material( "Mat_Plastic", (0.16, 0.16, 0.17, 1.0), 0.0, 0.65 ) metal_mat = create_material( "Mat_Metal", (0.9, 0.9, 0.92, 1.0), 1.0, 0.18 ) # 按名称前缀分配材质 for obj in bpy.data.objects: if obj.type == 'MESH': if obj.name.startswith("Body_"): obj.data.materials.clear() obj.data.materials.append(plastic_mat) elif obj.name.startswith("Cutter_"): obj.data.materials.clear() obj.data.materials.append(metal_mat)

灯光方面，产品动画不需要复杂的灯光系统。推荐“主光 + 辅光 + 轮廓光”的三点布光结构，再叠加一张 HDR 环境贴图作为环境反射。主光负责照亮产品正面，亮度最高；辅光放在侧面补光，亮度约为主光的一半；轮廓光放在产品后上方，用来勾出边缘的高光，让机身和背景分离。

环境贴图的重要性被很多人低估。金属材质本身没有颜色，它反射的是周围环境。如果没有环境贴图，金属表面只会出现几盏灯的点状高光，看起来非常单调。给场景添加一张模糊的室内或影棚 HDR，金属质感会立刻丰富起来。注意环境贴图的模糊程度要夸张一点，太清晰会反射出乱七八糟的穿帮物体。

5. 动态设计：旋转、爆炸图和功能演示的动画制作

材质灯光就绪后，进入真正的“动态设计”环节。这一节我们不讨论渲染输出，先讨论动画本身的运动逻辑。

5.1 外观展示动画：用最克制的旋转呈现造型

外观展示动画最简单，但也最容易犯错。很多人会让产品绕重心做 360 度旋转，结果产品像在“飘”。正确做法是：让相机围绕产品旋转，而不是产品自身旋转。相机在稳定的轨道上移动，产品保持静止，画面会显得非常稳定、专业。

在 Blender 中实现方式很简单：给相机添加一个空物体作为父级，让空物体绕 Z 轴旋转 360 度，相机始终看向产品。关键帧设置为：第 1 帧空物体旋转 0 度，第 60 帧旋转 360 度。

还有一个细节：运动曲线要设置“缓入缓出”，也就是动画开始时慢慢加速，结束时慢慢减速。不要让旋转速度恒定不变，那会显得机械。在 Blender 的“曲线编辑器”里选中旋转曲线，设置“缓动类型”为“Easy Ease”，即可获得自然的起停节奏。

5.2 爆炸图动画：把装配逻辑变成视觉语言

爆炸图是剃须刀动态设计里信息量最大的镜头内容。对外行观众来说，它很酷；对产品工程师来说，它直接展示了装配关系。

爆炸图的原理非常朴素：把装配好的产品零件，沿装配轴方向逐个向外平移，产生“拆开”的效果；再反向平移，产生“组装”的效果。关键不是“怎么移动”，而是“移动顺序”。

以剃须刀为例，建议的拆解顺序是：外刀网先向上移动，然后是内刀头组件，再然后是刀头支架，最后是机身外壳向后移动。顺序要符合“先外后内、先上后下”的拆装直觉，观众才能看懂。

在 Blender 中，先把零部件挂在对应的空物体层级下，然后给空物体打位置关键帧。比如外刀网，第 10 帧在装配位置，第 30 帧向上移动 0.05 米，第 50 帧回到装配位置。注意，每个部件的移动时间可以稍微错开，形成依次弹出的节奏，而不是同时移动。错开 5 到 10 帧就够了。

这里有个实践上的小技巧：不要手动挪动零件来对齐位置，这样误差很大。正确做法是在装配姿态下记录初始位置，再在爆炸姿态下记录目标位置，把这两帧之间的差值用关键帧过渡表达。如果你需要精确控制移动量，可以在 Blender 的“N”面板中直接输入三维坐标。

5.3 功能演示动画：用局部运动表达抽象卖点

功能演示是拉开普通动画和高级动画差距的地方。以剃须刀的“浮动刀头”卖点为例，现实中刀头可以左右小幅摆动，贴合面部曲线。这个动作幅度很小，但在动画里非常有效，因为它用几度角的摆动就让用户理解了产品的核心结构。

做法是：把刀头组件放在一个空物体下，将空物体的原点放在刀头转动的铰链位置，然后给空物体的旋转打关键帧。比如第 0 帧倾斜 -8 度，第 20 帧倾斜 +8 度，第 40 帧回到 0 度，循环两次，模拟使用时的动态感。

“防水”卖点的动画表达略复杂，但思路清晰：创建一个包含了水滴粒子的系统，让水滴从产品上方落下，落在机身上后沿表面滑落。对三次元材质，要增加水滴的光泽度和透明度，水滴使用带透射的玻璃材质，通过 IOR 参数调整折射效果。小提示：水滴动画不需要大量粒子，10 到 20 个水滴就足够真实，粒子太多反而会抢走产品的视觉焦点。

在做动画规划时，建议先写一个简单的镜头脚本，不要直接在软件里凭感觉动。一张纸就够：

有了这个脚本，你再回软件里做动画，思路会清晰很多，也不容易漏掉关键卖点。

6. 从 Blender 到 Web：用 Three.js 实现可交互的产品展示

如果只做视频动画，交给渲染器输出即可。但在今天的电商和官网场景里，用户更期待“能转、能点、能拆”的交互式 3D 展示。所以，Blender 里做好的动态设计，最终往往要导出到 Web 端。这里我们用 Three.js 完成一个最小可用的交互展示。

6.1 从 Blender 导出 glTF 模型

Blender 是原生支持 glTF 格式导出的。在“文件”菜单中选择“导出”，选择 glTF 2.0 格式即可。导出时有几个关键选项：

• 格式选“glTF Binary (.glb)”，因为二进制格式体积更小，加载更快。
• 动画勾选“导出动画”，这样 Blender 里做好的关键帧动画会保留。
• 材质选择“导出全部材质”，确保粗糙度、金属度等 PBR 参数被保留。
• 如果模型面数较高，建议先在 Blender 里做一次减面，或者把导入的纹理图集压缩为 Web 友好的尺寸。

导出后你会得到一个.glb文件，这就是 Web 端要加载的 3D 资产。

6.2 一个最小可用的 Three.js 展示页面

下面这个 HTML 页面，加载并通过鼠标拖拽旋转产品，实现了最基本的 360 度检查功能：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>剃须刀动态展示</title> <style> body { margin: 0; overflow: hidden; background: #1a1a1a; } canvas { display: block; } #info { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-family: sans-serif; font-size: 14px; } </style> </head> <body> <div id="info">鼠标拖拽旋转 | 滚轮缩放</div> <!-- 通过 ES Module 引入 Three.js --> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/" } } </script> <script type="module"> import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100); camera.position.set(1.2, 0.8, 1.2); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.autoRotate = true; controls.autoRotateSpeed = 1.5; // 基础灯光：主光 + 辅光 scene.add(new THREE.AmbientLight(0xffffff, 0.5)); const dirLight = new THREE.DirectionalLight(0xffffff, 2); dirLight.position.set(2, 3, 4); scene.add(dirLight); const loader = new GLTFLoader(); loader.load('razor.glb', (gltf) => { scene.add(gltf.scene); }, undefined, (error) => { console.error('模型加载失败', error); }); function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate(); window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); </script> </body> </html>

这段代码实现了三件事：加载 glTF 模型、轨道控制交互、自动旋转。你可以把razor.glb替换为自己的模型文件路径。对于想展示“爆炸图”的需求，可以在 Blender 里提前做好拆解动画并导出，然后在 Three.js 里通过下面的方式控制动画播放：

// 获取第一个动画动作 const animations = gltf.animations; const mixer = new THREE.AnimationMixer(gltf.scene); animations.forEach((clip) => { const action = mixer.clipAction(clip); action.play(); }); // 在 animate 循环里更新 mixer function animate() { requestAnimationFrame(animate); if (mixer) mixer.update(0.016); // 按 60fps 的步长更新 controls.update(); renderer.render(scene, camera); }

需要提醒的是，Web 端展示要考虑模型体积。一个生产级细节是：在 Blender 中把贴图尺寸压缩到 1024 或 512，导出前执行“清理未使用数据”，避免.glb文件带一堆用不到的材质节点。目标是把单个模型体积控制在 5MB 以内，移动端才能流畅加载和旋转。

还有一点容易被忽略：Three.js 的灯光和 Blender 里的灯光不完全一致。Blender 里效果很好的三点布光，导到 Three.js 后，由于环境贴图和光照模型差异，往往需要重新调节灯光。建议在 Web 端使用 DirectionalLight + AmbientLight + Environment 贴图的组合，效果最接近离线渲染的结果。

7. 渲染输出：Eevee 与 Cycles 的选择，以及输出设置

动态设计做到这一步，模型、材质、动画、交互都完成了。接下来要产出视频内容，涉及渲染器的选择。

Blender 提供两个主流渲染器：Eevee 和 Cycles。简单判断：

做剃须刀这类有很多金属、玻璃材质的产品，我的建议是：预览和调材质用 Eevee（因为快），最终输出用 Cycles（因为准）。如果你使用的是较新版本的 Blender，Cycles 的光线追踪性能已经大幅提升，单帧几十秒到几分钟是常见水平，一个 6 秒动画按 24fps 算约 144 帧，用 GPU 渲染可以接受。

输出设置建议：

• 分辨率：1920 × 1080 起步，如果有电商详情页大图需求，可以输出 2560 × 1440。
• 帧率：24fps 或 30fps。产品动画建议 30fps，动作更顺滑。
• 采样：Cycles 下用 128 到 256 个采样，配合降噪器，可以得到噪点可接受的画面。
• 格式：优先输出 PNG 序列帧，再用视频编辑软件合成，避免软件崩溃导致全部重渲。需要透明背景时，PNG 的 RGBA 通道可以保留透明信息。

视频合成不是重点，但需要知道一个流程：把 PNG 序列拖入 DaVinci Resolve 或 Blender 自带的 Video Sequencer，按时间轴排列，输出 H.264 MP4 格式。这样可以统一进行色彩校正和字幕叠加，让最终视频更完整。

8. 常见问题与排查方法

动态设计制作过程中，问题往往集中在模型、材质、动画和导出这几个环节。下面按出现频率整理一份排查表，供你参考。

一个常见的 Web 加载问题值得单独说明：如果你本地打开 HTML 页面时，模型总是加载失败，大概率不是代码问题，而是浏览器禁止通过 file:// 协议请求本地文件。解决方式是启动一个简单的本地服务器，在项目目录运行python -m http.server 8080，然后访问http://localhost:8080查看。

9. 动态设计的工程化建议

这类项目通常是多人协作的产物：建模、动画、开发、运营，可能由不同的人负责不同环节。为了保证交付顺畅，以下几点工程规范建议收藏备用。

9.1 命名与层级规范

Blender 大纲视图里的命名，会直接跟随导出结果进入 Three.js。所以命名规范早早定下来，能为后期省下大量时间。推荐的命名方式：

• 部件前缀：Body_、Cutter_、Button_、Display_
• 材质前缀：Mat_、Tex_
• 动画动作：Action_Open、Action_Explode、Action_Float

只要命名统一，批量赋材质、批量导出、Three.js 端按名称控制显示隐藏，都会非常方便。

9.2 版本管理与备份

Blender 文件迭代快，建议每次大版本改动后“另存为”一次，保留历史版本，不要在一个.blend文件上反复覆盖。渲染输出的 PNG 序列帧建议保留原始素材，方便后期重新合成。

9.3 成本与性能控制

动态设计项目最大的成本是渲染时间和 Web 端加载时长。从项目一开始就要明确：精度高到什么程度，面向什么设备。如果目标是移动端 H5 页面，那就要从一开始就把模型精度控制在“Web 友好”范围，而不是做完了高精度模型再减面。先确定终端的性能边界，再决定建模和渲染的精度，能省掉大半返工。

9.4 安全与合规提醒

在制作产品展示时，如果要使用品牌商标、产品外观或参数，需要确保自己拥有合法授权，或项目本身就是业务合作的一部分。本文以“松下剃须刀”为案例是作为技术演示用途，不能随意将成品用于商业宣传。这一点在 B2B 合作和企业内部项目中尤其重要，涉及产品图、商标、宣传文案等素材时，务必提前确认授权边界。

10. 总结与下一步

回到开头的问题：给剃须刀做动态设计，本质上不是炫技，而是把用户关心的功能卖点，通过镜头、材质、结构和交互变成可感知的视觉语言。整个流程可以总结为四个环节：

第一，产品分析。先做信息分层，明确一个动画要传达外观、结构还是功能。 第二，建模与材质。按真实装配关系建模，用 PBR 材质拉开金属、塑料和橡胶的层次。 第三，动态设计与渲染。用克制的镜头运动和精准的部件拆解，完成外观展示、爆炸图和功能演示。 第四，Web 交互。通过 Blender 导出 glTF，用 Three.js 让用户自己转动、缩放、触发动画。

下一步建议你找一个真实的产品（不一定非要是剃须刀），先按这个流程跑通一个“最小版本”：一个带基础材质的模型、一段 360 度旋转动画、一个 Three.js 加载页面。把链路跑通之后，再逐步增加爆炸图、水滴粒子、多相机机位这些高级内容。

动态设计是一个“工程+审美”结合的方向，建模、材质、动画、前端每一块都有大量细节。这篇文章给到的是整体方法论和最小可用实现，真正的手感，还需要在项目里反复打磨。如果你在某个环节卡住了，优先检查模型层级、材质参数和导出选项，80% 的问题都出在这三个地方。