一周Blender+Cannon：把宝可梦扔进网页里蹦跶

01从打卡到上瘾：一周重拾Blender的意外收获

“每天一个案例”听起来像句口号，却真让我把快捷键肌肉记忆练了出来。跟着大神的节奏，把《宝可梦》里的小动物拆成模型、贴上材质、塞进Cannon物理引擎，最后让它们在网页里“活”起来——整个流程走下来，gltf+bin的导出、物理材料的调试、碰撞事件的监听全部踩了一遍坑，也全部填了回来。

02模型准备：轻量是王道

Blender里把皮丘、胖丁、小火龙一股脑做好，最终只留gltf+bin做导出。obj、gltf、glb轮番对比，发现glb体积最小、兼容最好，塞进网页几乎不占带宽，于是锁定它当“运输格式”。

03物理引擎骨架：先搭世界，再搭地面

```javascript

class Physics {

constructor(scale = 1, stageSize) {

this.scale = scale;

this.stageSize = stageSize;

this.materials = {};

this.world = new CANNON.World({

gravity: new CANNON.Vec3(0, -60 scale, 0),

broadphase: new CANNON.SAPBroadphase(this.world),

solver: { iterations: 4 },

allowSleep: true,

});

this.initMaterials(); // 定义低、中、高三种反弹系数

this.initGround(); // 地面平面直接竖直摆放，高度留给玩家空间

}

// 材料初始化、世界添加材料、地面初始化等代码省略……

}

```

04核心API封装：让物体“出生”有据可循

把重复操作封装成函数，后续调用只需传参数：

createBody：动态/静态随意切换，材料、质量、位置、旋转一次给齐

createShape：盒子、圆柱、球体通用接口，半径、高度、分段数灵活配

createBox/Cylinder/Sphere：快捷构造器，直接返回物理体与形状

setAngle：四元数旋转，支持x/y/z轴，角度单位弧度

remove：一键回收尸体，防止内存泄漏

tick：固定60帧步进，delta时间片喂给物理世界

05把模型塞进物理世界：一个“皮丘发射”示例

```javascript

function createJLQ() {

// 创建主体，质量1，位置(30, -10, 30)，绕y轴旋转π/2弧度

let body = physics.createBody(1, { x: 30, y: -10, z: 30, y: 0, x: Math.PI / 2 }, PHYSICS_MATERIAL.normalBounce);

// 定义圆柱段，统一旋转角度与位置偏移

let shapes = [ / ...圆柱数据数组... / ];

shapes.forEach((cylinder, index) => {

// 先创建物理形状，再创建可视化辅助（可选）

let shape = physics.createCylinderShape(cylinder.topRadius, cylinder.bottomRadius, cylinder.height, cylinder.segments);

if (showGuides) { // 开发模式可视化辅助

let guideMesh = stage.createCylinder(cylinder.x, cylinder.y, cylinder.z, cylinder.topRadius, cylinder.bottomRadius, cylinder.height, cylinder.segments, 0xff0000); // 红色方便截图定位

guideMesh.position.copy(cylinder.position); // 对齐视觉中心

jlq.add(guideMesh); // 把辅助网格挂到父节点，方便后期清理

}

body.addShape(shape, new CANNON.Vec3(cylinder.x, cylinder.y, cylinder.z), new CANNON.Quaternion(0, 0, cylinder.rotation)); // 把形状与局部坐标一起传进去，避免硬编码偏移

});

// 把物理体与网格绑定，方便后续统一处理碰撞事件等业务逻辑

let physicsItem = { mesh: jlq, physics: body };

physicsItems.push(physicsItem); // 加入全局列表，方便后续遍历清理与事件监听

return physicsItem; // 返回项目实例，开发者可直接操作mesh与physics双向绑定数据与物理状态

}

```

06让小动物“活”起来的下一步：碰撞检测与交互响应

物理世界跑起来只是第一步，真正让网页好玩的是碰撞事件回调。给每个物理体绑定collide事件监听器，触发时执行trigger()函数，可在里面写“掉落检测”“叠加计数”“掉落积分”等业务逻辑；再配合鼠标点击发射，就能实现“点哪出哪”的爽快反馈。此外，通过调整不同材料的摩擦与反弹系数，还能让皮丘与胖丁在不同场景下拥有截然不同的“落地姿势”与“弹跳节奏”，为视觉表现再添一抹动态细节。