17370845950

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 循环——静态球体可能渲染出来，但旋转/动画会卡死

真正麻烦的从来不是“怎么画球”，而是确认当前技术栈是否支持三维渲染、上下文是否活、坐标系是否对齐、以及光照和相机参数是否让球体落在可视范围内——这些比几何体构造本身更容易卡住进度。