HTML5原生不支持画球体，需依赖WebGL或Three.js；Three.js中用THREE.SphereGeometry(radius, widthSegments, heightSegments)创建，须配合材质与Mesh使用；纯WebGL需手动计算球坐标顶点；Canvas 2D仅能模拟球体光影效果。
HTML5 本身不提供直接画球体的 API；所谓“HTML5 建模”，实际依赖的是 WebGL（通过 WebGLRenderingContext）或更高层的库（如 Three.js），而原生 HTML5 的 2D 上下文根本无法渲染三维球体。
Three.js 中用 THREE.SphereGeometry 创建球体
这是最常见、最实用的路径。它不是“HTML5 自带功能”，而是基于 WebGL 封装后的易用接口。
-
THREE.SphereGeometry构造函数接受三个参数：radius（半径）、widthSegments（经度分段数）、heightSegments（纬度分段数） - 分段数过低（如都设为 4）会导致球面明显棱角化；建议生产环境至少用
32或64 - 注意：该几何体默认以原点为中心，不自动添加材质或网格；必须手动创建
THREE.Mesh并指定材质（如THREE.MeshBasicMaterial）
const geometry = new THREE.SphereGeometry(1, 32, 32); const material = new THREE.MeshNormalMaterial(); const sphere = new THREE.Mesh(geometry, material); scene.add(sphere);
不用库、纯 WebGL 实现球体需要自己算顶点
这涉及球坐标转笛卡尔坐标的数学推导，属于真正底层建模。你得手动生成顶点数组、索引数组，并上传到 GPU 缓冲区。
- 核心公式是：
x = r * sin(φ) * cos(θ)，y = r * sin(φ) * sin(θ)，z = r * cos(φ)，其中φ ∈ [0, π]，θ ∈ [0, 2π] - 每组
(φ, θ)对应一个顶点；要构成三角面片，还需按规则生成index数组（通常是两个相邻纬度环之间的四边形拆成两个三角形） - 容易出错点：法向量未归一化导致光照异常；索引顺序错误引发面片朝向翻转（被背面剔除）
Canvas 2D 上“画球”只是模拟光影的圆形
如果只用 的 2D 上下文，你画不出真正的三维球体——只能用渐变、阴影和贝塞尔曲线伪造立体感。
立即学习“前端免费学习笔记（深入）”；
-
ctx.arc()只能画圆，不是球；所谓“球体效果”靠ctx.createRadialGradient()模拟高光与明暗过渡 - 这种画法无深度、无旋转、无交互，仅适用于 UI 装饰或教学示意
- 不能参与任何 3D 场景合成，也不能与真实
WebGL对象共存于同一视觉空间
const gradient = ctx.createRadialGradient(80, 80, 10, 80, 80, 50); gradient.addColorStop(0, '#fff'); gradient.addColorStop(1, '#333'); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.fill();
初学者最容易忽略的初始化前提
哪怕只写三行球体代码，也必须确保以下五件事已就位，否则控制台报错但不提示原因：
-
元素存在且有明确宽高（CSS 设置无效，必须用canvas.width/canvas.height属性） - 已正确获取
webgl上下文（canvas.getContext('webgl')），并检查返回值是否为null - Three.js 脚本已加载（
） - 已创建
THREE.Scene、THREE.PerspectiveCamera和THREE.WebGLRenderer，且调用了renderer.render(scene, camera) - 没有遗漏
requestAnimationFrame循环——静态球体可能渲染出来，但旋转/动画会卡死
真正麻烦的从来不是“怎么画球”，而是确认当前技术栈是否支持三维渲染、上下文是否活、坐标系是否对齐、以及光照和相机参数是否让球体落在可视范围内——这些比几何体构造本身更容易卡住进度。
