当你打开微信小程序开发工具，想要制作一个“球”的时候，你可能会发现事情并没有想象中那么简单。这个“球”可以是一个3D的篮球模型，也可以是一个2D的弹跳小球动画，甚至可以是一个物理模拟中的重力小球。一开始会直接去搜索“小程序 3D 球体 代码”，然后复制粘贴，结果发现渲染不出来，或者卡得不行。这背后的原因，往往不是代码错了，而是对小程序渲染机制的理解不够。

今天这篇文章，我们就来彻底拆解“微信小程序制作球”这件事。我会从三个完全不同的实现路径入手，告诉你每种场景下该怎么做，以及为什么有些做法会失败。你不需要有3D图形学基础，但我会尽量把原理讲透，让你以后遇到类似的问题能自己判断。

一、用Canvas做2D弹跳球：从静态到动态的陷阱

如果你只是想做一个在屏幕上弹来弹去的小球，用Canvas是最直接的方式。会写一个 requestAnimationFrame 或者 setInterval 来更新小球位置，但很快就发现一个问题：小程序里用 setInterval 做动画，页面滑动时会卡顿，甚至直接停止。这是因为小程序的渲染线程和逻辑线程是分开的，setInterval 属于逻辑线程，当页面被切换或滑动时，逻辑线程的优先级会被降低。

正确的做法是使用 wx.createSelectorQuery() 结合 canvas 的 requestAnimationFrame 方法。具体来说，你需要先获取canvas实例，然后在 onReady 生命周期里启动一个循环：

const ctx = wx.createCanvasContext('myCanvas');
function drawBall() {
ctx.clearRect(0, 0, 300, 300);
ctx.beginPath();
ctx.arc(x, y, 20, 0, 2 * Math.PI);
ctx.setFillStyle('#ff6600');
ctx.fill();
x += dx; y += dy;
if (x > 280 || x < 20) dx = -dx;
if (y > 280 || y < 20) dy = -dy;
ctx.draw();
requestAnimationFrame(drawBall);
}

这里有一个关键细节：ctx.draw() 必须放在最后，并且每个动画帧只能调用一次。很多新手会忘记 ctx.draw()，结果画面一片空白。另外，小程序的 requestAnimationFrame 在后台页面会被自动暂停，这反而是好事——省电。但如果你希望小球在后台也继续运动（比如游戏），就需要用 setInterval 配合 Date.now() 来计算时间差，而不是依赖帧率。

还有一个容易忽略的点：canvas的尺寸。小程序里canvas的宽高如果只写在wxml的 style 里，而不写在 canvas-id 对应的属性上，会导致绘制出来的图形比例失真。比如你设置 width: 300px; height: 300px;，但canvas内部的坐标系默认是300x150（因为小程序canvas有默认宽高比）。解决方案是在wxml中同时设置 width="300" height="300"（不带单位），或者在 onReady 里用 wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }) 动态获取实际尺寸。

二、用WebGL或Three.js做3D球体：性能与兼容性的平衡

如果你想要一个立体的、可以旋转的球体，比如一个地球仪或者一个篮球，那就需要用到3D渲染。小程序的canvas 2D API无法直接绘制3D图形，你必须使用WebGL。好消息是，微信小程序从基础库2.9.0开始支持 type="webgl" 的canvas，但坏消息是，直接写WebGL代码非常繁琐，你需要自己处理顶点着色器、片段着色器、矩阵变换……

这时候会想到引入Three.js。确实，Three.js封装了底层WebGL操作，但直接在小程序里使用npm包 three 会遇到问题：Three.js依赖 window 和 document 对象，而小程序运行环境没有这些。你可能会找到一些“小程序适配版”的Three.js，比如 threejs-miniprogram，但它只支持部分功能，而且版本通常比较旧。

我的建议是：如果只是做一个简单的球体，不要用Three.js。你可以用纯WebGL写一个球体网格，代码量其实不大。核心思路是生成球体的顶点数据（经纬度网格），然后通过顶点着色器绘制三角形。这里给出一个简化版的步骤：

1. 在wxml中声明canvas，加上 type="webgl"。
2. 在js中获取WebGL上下文：const gl = canvas.getContext('webgl');
3. 编写顶点着色器和片段着色器（字符串形式），编译链接成program。
4. 生成球体顶点：用两个嵌套循环，纬度从 -90° 到 90°，经度从 0° 到 360°，每个顶点计算 x = r * cos(lat) * cos(lon)，y = r * sin(lat)，z = r * cos(lat) * sin(lon)。
5. 将这些顶点数据存入缓冲区，并设置索引缓冲区（因为球体由三角形组成）。
6. 在 requestAnimationFrame 循环中，更新旋转矩阵并绘制。

这个过程听起来复杂，但如果你对照着OpenGL教程一步步来，你会发现它比想象中要简单。而且这样做的好处是，你完全控制了渲染流程，不会因为Three.js的兼容性问题而卡住。举个例子，我曾经在一个项目里需要实时改变球体的颜色和纹理，用Three.js的材质系统反而因为内存泄漏导致崩溃，换成纯WebGL后，手动管理纹理上传和释放，性能提升了30%。

如果你实在不想手写WebGL，还有一个折中方案：使用 ECharts 的3D地球组件。ECharts小程序版支持globe，你只需要配置一个 option 对象，就可以渲染出一个带纹理的地球。但要注意，ECharts的globe组件体积较大，而且需要引入 echarts-gl 插件，对小程序包大小有影响。

三、用物理引擎模拟球体运动：从视觉到交互的升级

让球动起来很简单，但让球“像真的”一样动，就需要物理引擎了。比如你做一个打砖块游戏，球撞击墙壁和砖块时的反弹角度、速度衰减，如果自己用数学公式算，很快就会陷入边界条件的泥潭。这时候引入一个轻量级的物理引擎是明智的。

在小程序里，我推荐使用 Matter.js 的简化版。Matter.js 原本是浏览器端的2D物理引擎，但它的核心部分不依赖DOM，只做数学计算。你只需要把它的 Body、Engine、World 等核心模块提取出来，或者使用社区已有的小程序适配版本。

具体做法是：

1. 在项目中引入Matter.js（通过npm或者直接复制源码）。
2. 创建一个引擎：const engine = Matter.Engine.create();
3. 创建一个球体刚体：const ball = Matter.Bodies.circle(x, y, radius);
4. 创建一个地面刚体：const ground = Matter.Bodies.rectangle(centerX, height-10, width, 20, { isStatic: true });
5. 将球体和地面加入世界：Matter.World.add(engine.world, [ball, ground]);
6. 在每一帧中更新引擎：Matter.Engine.update(engine, delta);
7. 从引擎中读取球体的位置和角度，然后绘制到canvas上。

这里有一个容易被忽视的问题：坐标转换。Matter.js的坐标系是笛卡尔坐标系，y轴向上；而小程序的canvas坐标系y轴向下。所以你在绘制时，需要把物理引擎中的y坐标取反，或者设置一个偏移量。否则你会看到球体往“上”掉落。

另外，物理引擎的 delta 时间步长需要固定。如果你用 requestAnimationFrame 的帧率变化来驱动物理更新，会导致球体在不同手机上运动速度不一样。正确的做法是使用固定的时间步长，比如 1000/60 毫秒，然后累积实际经过的时间，达到一个步长就更新一次。这叫做“固定时间步长累加器”，能保证物理模拟的一致性。

对比一下：用纯数学公式做弹跳球，你可能需要写 if (ball.y > ground.y) ball.vy = -ball.vy * 0.8，这只能模拟简单的弹性碰撞。而用Matter.js，你可以轻松添加摩擦力、空气阻力、甚至多个球体之间的碰撞。比如你想做一个台球桌，每个球碰撞后都会根据质量和速度产生真实的反弹，纯数学公式几乎不可能做到，而物理引擎只需要几行配置。

四、扩展话题：为什么你的球在真机上显示不出来？

在开发者工具上调试得好好的，一上真机就发现球不见了。常见原因有三个：

1. canvas类型不支持。 如果你用了WebGL，但真机的基础库版本低于2.9.0，canvas就会渲染失败。可以在 app.js 里用 wx.getSystemInfoSync().SDKVersion 检查版本，如果太低，提示用户升级微信。

2. 图片纹理跨域。 如果你给球体贴了一张网络图片作为纹理，小程序默认不允许跨域加载。需要先在 wx.downloadFile 下载到本地，然后用本地临时路径作为纹理。

3. canvas的CSS尺寸与像素尺寸不匹配。 尤其是在iPhone上，屏幕是2倍或3倍屏。如果你在wxml里设置 width: 300px，但canvas内部的像素宽只有300，在Retina屏幕上看起来会模糊。解决方案是用 wx.getSystemInfoSync().pixelRatio 乘以canvas的CSS尺寸，设置canvas的像素宽高。比如CSS宽300，像素比是2，那么canvas的宽度应该设为600。

最后补充一个冷知识：小程序的canvas在 scroll-view 里滚动时，绘制内容会被裁剪。如果你需要做一个可以滚动的长页面，里面嵌入一个动态球，最好把canvas放在 position: fixed 的容器里，或者使用 cover-view 覆盖在canvas上。但 cover-view 只支持原生组件，如果你用的是普通canvas，就得考虑用 movable-view 或者干脆不用滚动。

总结一下，制作一个“球”在小程序里可以有完全不同的技术选型。2D弹跳球用Canvas + requestAnimationFrame，3D球体用纯WebGL或ECharts，物理模拟用Matter.js。没有一种方案是万能的，关键是根据你的实际场景——是展示、是游戏、还是数据可视化——来选择最轻量、最可控的方式。下次当你再想做一个球的时候，不妨先问自己：这个球需要和用户交互吗？需要物理真实感吗？需要3D旋转吗？想清楚这三个问题，你就知道该从哪里下手了。