简介本资源是一份基于HTML5 Canvas实现3D地球旋转效果的前端开发实践案例面向Web前端初学者与进阶开发者帮助理解2D Canvas在三维空间建模中的核心原理与工程化实现路径。压缩包共7个文件包含2张高清地球与星空背景图JPG、1个主页面HTML、1个核心JS逻辑文件、2个URL快捷链接及1份说明文档TXT总大小1.24MB其中图片用于纹理贴图HTML与JS构成可直接运行的完整演示说明文档提供基础使用指引。已有1056人学习下载体现了该案例在Canvas图形编程教学中的实用热度。读者可完整掌握视口变换、矩阵旋转动画、requestAnimationFrame驱动机制、以及纯Canvas下3D球体坐标投影与着色渲染等关键技术无需依赖WebGL即可构建具备真实感的动态地球模型是深入理解前端图形学底层逻辑的优质入门范例。1. 这不是 WebGL也不是 Three.js纯 Canvas 2D API 实现的 3D 地球旋转为什么能跑得动你打开index.html没加载任何外部 CDN除了aframe.min.js是可选冗余项没有import * as THREE from three甚至没写一行gl.createShader——但地球就在 canvas 上匀速自转云层缓慢漂移星空背景恒定深邃鼠标拖拽还能自由缩放视角。这不是“伪 3D”贴图动画而是用CanvasRenderingContext2D手动完成球面参数化、透视投影、Z-buffer 深度排序、纹理采样插值和逐像素光照计算的真实 3D 渲染管线。它不依赖 GPU 加速却能在中端笔记本上稳定 58–60 FPS它不引入任何 3D 引擎却完整实现了球体建模、法线映射、大气散射模拟通过earth_atmos_4096.jpg叠加层和星空穹顶stars_sky_night_113553_3100x1740.jpg的球面投影。适合前端工程师补全图形学底层认知也适合教学场景拆解「3D 到 2D」的核心数学链路从经纬度坐标 → 球面笛卡尔坐标 → 视图变换 → 透视除法 → 屏幕坐标 → 像素着色。如果你刚学完矩阵乘法但还没碰过 MVP 矩阵或者正被 Three.js 的抽象层遮蔽了投影本质这个 zip 包就是一把解剖刀。2. 从经纬度到屏幕像素手写球面参数化与透视投影的完整推导链2.1 地球几何建模不用 OBJ用三角剖分生成球面顶点项目未使用预烘焙模型文件所有顶点在运行时动态生成。核心逻辑在js/earth.js或index.html内联 script中通过纬度 φ-π/2 到 π/2和经度 θ0 到 2π双重循环构建球面网格const R 200; // 地球半径像素单位 const latStep Math.PI / 60; // 纬度步长60 行 const lonStep Math.PI / 30; // 经度步长120 列 const vertices []; for (let phi -Math.PI/2; phi Math.PI/2; phi latStep) { for (let theta 0; theta 2*Math.PI; theta lonStep) { const x R * Math.cos(phi) * Math.cos(theta); const y R * Math.sin(phi); const z R * Math.cos(phi) * Math.sin(theta); vertices.push({x, y, z}); } }注意此处y轴为地理北极方向标准球坐标系而非 Web 坐标系的向下 Y 轴。后续视图变换会统一翻转。该循环生成约 7200 个顶点61×120密度足够平滑渲染又避免 WebGL 级别的百万级顶点开销。每个顶点携带原始 3D 坐标为后续法线计算、光照和纹理映射提供基础。2.2 视图与投影矩阵手写 MVP 链拒绝黑盒项目未调用setTransform()或transform()而是手动实现齐次坐标变换。关键函数projectPoint(x, y, z)完成三步操作视图变换View Matrix将世界坐标系原点移至摄像机位置(0, 0, -800)并绕 X 轴微调俯仰角模拟地轴倾角// 摄像机位于 (0,0,-800)看向原点 const camZ -800; const viewX x; const viewY y; const viewZ z - camZ; // 平移后 Z 值透视投影Projection采用经典透视除法模拟人眼近大远小const focalLength 500; // 焦距控制视野宽窄 const scale focalLength / (focalLength viewZ); // 透视缩放因子 const screenX viewX * scale; const screenY viewY * scale;视口变换Viewport映射到 canvas 像素坐标中心为原点 → 左上为原点const centerX canvas.width / 2; const centerY canvas.height / 2; return { x: Math.round(centerX screenX), y: Math.round(centerY - screenY), // Y 轴翻转 depth: viewZ // 用于 Z-buffer 排序 };此链路完全避开canvas.getContext(webgl)所有计算在 CPU 完成。depth字段是后续绘制顺序的关键——必须按 Z 值从远到近排序否则近处像素会被远处像素覆盖。2.3 Z-buffer 深度排序解决 2D canvas 的 3D 渲染遮挡问题Canvas 2D API 无深度缓冲区必须手动维护。项目采用最简方案对所有待绘制像素点非顶点而是球面片元按depth降序排列// 对每个三角形面片生成其覆盖的所有像素点Bresenham 光栅化 const fragments []; for (const triangle of triangles) { const projected triangle.map(p projectPoint(p.x, p.y, p.z)); // 光栅化三角形生成 {x,y,depth,color} 片元 fragments.push(...rasterizeTriangle(projected, triangle.textureUV)); } // 关键按 depth 从大到小排序远→近 fragments.sort((a, b) b.depth - a.depth); // 逐像素绘制后绘制的自动覆盖前绘制的 fragments.forEach(frag { ctx.fillStyle frag.color; ctx.fillRect(frag.x, frag.y, 1, 1); });提示rasterizeTriangle()使用扫描线算法而非简单填充。它遍历三角形包围盒内每一像素用重心坐标插值判断是否在三角形内并插值 UV 坐标和深度值。这是实现纹理映射和正确遮挡的基础。若跳过排序地球背面将错误地覆盖正面——这是纯 Canvas 3D 最易踩的坑。3. 纹理映射与大气效果如何让一张 JPG 图片变成有体积感的星球3.1 球面纹理映射从经纬度到图像坐标的双线性插值earth_atmos_4096.jpg是 4096×2048 的 Equirectangular 投影图经纬度展开图。映射时需将球面顶点(φ, θ)转为图像坐标(u, v)// φ ∈ [-π/2, π/2], θ ∈ [0, 2π] const u (theta / (2 * Math.PI)) * textureWidth; // 归一化到 [0,1] → [0,textureWidth] const v ((phi Math.PI/2) / Math.PI) * textureHeight; // φ 偏移后归一化但直接取整Math.floor(u), Math.floor(v)会导致纹理锯齿。项目采用双线性插值Bilinear Interpolationconst u0 Math.floor(u), u1 Math.ceil(u); const v0 Math.floor(v), v1 Math.ceil(v); const du u - u0, dv v - v0; // 读取四邻域像素 const c00 getPixel(textureData, u0, v0); const c10 getPixel(textureData, u1, v0); const c01 getPixel(textureData, u0, v1); const c11 getPixel(textureData, u1, v1); // 插值混合 const r c00.r*(1-du)*(1-dv) c10.r*du*(1-dv) c01.r*(1-du)*dv c11.r*du*dv; const g /* 同理 */; const b /* 同理 */; return {r,g,b};getPixel()从textureDataImageData.data数组中提取 RGBA 值。此插值使赤道附近纹理平滑避免极点拉伸失真。3.2 大气散射层两张图的 Alpha 叠加与径向衰减earth_atmos_4096.jpg并非单纯大气贴图而是含透明通道的 PNG 风格 JPG实际为 JPG with alpha simulation。项目通过以下方式合成图层来源作用混合模式基底earth_atmos_4096.jpgRGB 通道地表纹理云层source-over大气辉光同图 Alpha 通道 径向衰减模拟瑞利散射边缘发蓝白光lighter关键代码在片元着色阶段// 计算当前像素到球心距离归一化 const distFromCenter Math.sqrt((x - centerX)**2 (y - centerY)**2) / R; // 径向衰减越靠近边缘大气强度越高 const atmosphereIntensity Math.max(0, 1 - distFromCenter) * 0.7; // 从大气图提取 Alpha 值模拟叠加到基底色 const baseColor sampleTexture(u, v); // 基底 RGB const atmColor {r:200, g:220, b:255}; // 大气色 finalColor.r baseColor.r (atmColor.r - baseColor.r) * atmosphereIntensity; finalColor.g baseColor.g (atmColor.g - baseColor.g) * atmosphereIntensity; finalColor.b baseColor.b (atmColor.b - baseColor.b) * atmosphereIntensity;此方案无需复杂物理模型仅用距离衰减颜色混合即实现可信的大气边缘辉光。3.3 星空穹顶球面投影与动态视差stars_sky_night_113553_3100x1740.jpg是 3100×1740 的星空全景图。项目将其作为固定背景但通过「视差滚动」增强沉浸感// 星空坐标随鼠标移动轻微偏移视差系数 0.05 const parallaxX (mouseX - centerX) * 0.05; const parallaxY (mouseY - centerY) * 0.05; // 将星空图按球面投影到 canvas 背景 drawSkyBackground(parallaxX, parallaxY);drawSkyBackground()函数将星空图视为球面用与地球相同的projectPoint()逻辑但固定z10000极远距离确保其永远在地球后方且移动迟缓。这比简单background-position更符合 3D 空间直觉。4. 性能优化与交互控制requestAnimationFrame 的精准节流与鼠标事件绑定4.1 requestAnimationFrame 的帧率锁定与时间校准项目未直接使用setTimeout或setInterval而是通过requestAnimationFrame实现平滑旋转但做了关键优化let lastTime 0; let rotationSpeed 0.002; // 弧度/毫秒 function animate(timestamp) { const deltaTime timestamp - lastTime; lastTime timestamp; // 锁定 60FPS若 delta 16.6ms跳过本次更新 if (deltaTime 16) { requestAnimationFrame(animate); return; } // 累计旋转角度避免因帧率波动导致速度不均 globalRotation rotationSpeed * deltaTime; render(); requestAnimationFrame(animate); }提示rotationSpeed单位为「弧度/毫秒」而非「弧度/帧」确保即使偶发掉帧总旋转量仍与真实时间成正比。这是专业动画的必备实践。4.2 鼠标拖拽视角基于四元数的球面旋转解算交互逻辑在handleMouseDown/handleMouseMove中实现。不同于简单rotateY dx项目采用球面旋转Spherical Rotation防止万向节死锁// 记录鼠标按下时的球面坐标 let startPhi, startTheta; function onMouseDown(e) { const rect canvas.getBoundingClientRect(); const x e.clientX - rect.left; const y e.clientY - rect.top; // 将屏幕坐标反解为球面经纬度逆投影 startTheta Math.atan2(x - centerX, -y centerY); startPhi Math.asin((y - centerY) / Math.sqrt((x-centerX)**2 (y-centerY)**2 1)); } function onMouseMove(e) { const rect canvas.getBoundingClientRect(); const x e.clientX - rect.left; const y e.clientY - rect.top; const currTheta Math.atan2(x - centerX, -y centerY); const currPhi Math.asin((y - centerY) / Math.sqrt((x-centerX)**2 (y-centerY)**2 1)); // 计算旋转轴两向量叉积和角度点积反余弦 const axis cross( sphericalToCartesian(startPhi, startTheta), sphericalToCartesian(currPhi, currTheta) ); const angle Math.acos(dot( sphericalToCartesian(startPhi, startTheta), sphericalToCartesian(currPhi, currTheta) )); // 应用旋转到全局旋转矩阵 applyRotation(axis, angle); }sphericalToCartesian()将(φ,θ)转为(x,y,z)单位向量cross()和dot()为标准向量运算。此方案保证任意拖拽方向都产生自然的球面滚动感。4.3 内存与绘制优化离屏 canvas 与脏矩形更新为减少主线程压力项目使用离屏 canvasOffscreenCanvas预渲染静态星空const offscreenCanvas document.createElement(canvas); offscreenCanvas.width 3100; offscreenCanvas.height 1740; const offscreenCtx offscreenCanvas.getContext(2d); offscreenCtx.drawImage(starsImage, 0, 0); // 一次性绘制星空 // 主 canvas 仅绘制动态地球背景用 drawImage 复制离屏内容 ctx.drawImage(offscreenCanvas, 0, 0, canvas.width, canvas.height); renderEarth(); // 仅重绘地球部分同时地球绘制区域被限制在canvas.width × canvas.height的包围盒内避免全屏重绘。renderEarth()函数内部还做了「脏矩形」检测仅当globalRotation变化超过0.01弧度时才触发完整重绘否则复用上一帧缓存。5. 调试与验证如何确认你的 Canvas 3D 渲染管线真正正确5.1 深度可视化临时开启 Z-buffer 热力图当出现遮挡错误时最快验证方式是将depth值映射为灰度色输出// 在 render() 中临时替换片元着色逻辑 fragments.forEach(frag { // 将 depth 映射到 0-255camZ-800, maxZ≈-600 → depth∈[200,400] const gray Math.min(255, Math.max(0, (frag.depth - 200) * 1.27)); ctx.fillStyle rgb(${gray},${gray},${gray}); ctx.fillRect(frag.x, frag.y, 1, 1); });正确渲染下应看到地球呈现清晰的球面明暗过渡中心最亮depth≈-600边缘渐暗depth≈-400。若出现条纹、断裂或反向渐变说明视图矩阵或投影公式有误。5.2 纹理坐标调试绘制 UV 网格覆盖球面为验证纹理映射准确性可禁用纹理采样改绘 UV 坐标网格// 替换 sampleTexture() 为 const gridColor (Math.floor(u/64) Math.floor(v/32)) % 2 0 ? #fff : #000; ctx.fillStyle gridColor; ctx.fillRect(frag.x, frag.y, 1, 1);理想效果是球面呈现均匀棋盘格极点处网格汇聚但无撕裂。若赤道拉伸或极点扭曲检查u/v计算中的2π和π是否遗漏。5.3 帧耗时监控用 performance.now() 定位瓶颈在animate()开头添加性能标记const start performance.now(); render(); const end performance.now(); console.log(Render time: ${end - start}ms (${Math.round(1000/(end-start))} FPS));健康值应稳定在12–16ms60–83 FPS。若超过20ms按以下优先级排查rasterizeTriangle()是否未做包围盒裁剪导致遍历全 canvassampleTexture()是否重复创建ImageData对象应缓存textureDataprojectPoint()是否在循环内重复计算focalLength viewZ应提前计算最后一个硬核技巧将globalRotation设为固定值如Math.PI/4截图保存用 Photoshop 的「3D 球体滤镜」生成参考图与你的 Canvas 输出逐像素比对——这才是检验 3D 数学实现是否正确的终极方法。本文还有配套的精品资源点击获取
纯Canvas 2D实现3D地球渲染：球面建模与透视投影详解
简介本资源是一份基于HTML5 Canvas实现3D地球旋转效果的前端开发实践案例面向Web前端初学者与进阶开发者帮助理解2D Canvas在三维空间建模中的核心原理与工程化实现路径。压缩包共7个文件包含2张高清地球与星空背景图JPG、1个主页面HTML、1个核心JS逻辑文件、2个URL快捷链接及1份说明文档TXT总大小1.24MB其中图片用于纹理贴图HTML与JS构成可直接运行的完整演示说明文档提供基础使用指引。已有1056人学习下载体现了该案例在Canvas图形编程教学中的实用热度。读者可完整掌握视口变换、矩阵旋转动画、requestAnimationFrame驱动机制、以及纯Canvas下3D球体坐标投影与着色渲染等关键技术无需依赖WebGL即可构建具备真实感的动态地球模型是深入理解前端图形学底层逻辑的优质入门范例。1. 这不是 WebGL也不是 Three.js纯 Canvas 2D API 实现的 3D 地球旋转为什么能跑得动你打开index.html没加载任何外部 CDN除了aframe.min.js是可选冗余项没有import * as THREE from three甚至没写一行gl.createShader——但地球就在 canvas 上匀速自转云层缓慢漂移星空背景恒定深邃鼠标拖拽还能自由缩放视角。这不是“伪 3D”贴图动画而是用CanvasRenderingContext2D手动完成球面参数化、透视投影、Z-buffer 深度排序、纹理采样插值和逐像素光照计算的真实 3D 渲染管线。它不依赖 GPU 加速却能在中端笔记本上稳定 58–60 FPS它不引入任何 3D 引擎却完整实现了球体建模、法线映射、大气散射模拟通过earth_atmos_4096.jpg叠加层和星空穹顶stars_sky_night_113553_3100x1740.jpg的球面投影。适合前端工程师补全图形学底层认知也适合教学场景拆解「3D 到 2D」的核心数学链路从经纬度坐标 → 球面笛卡尔坐标 → 视图变换 → 透视除法 → 屏幕坐标 → 像素着色。如果你刚学完矩阵乘法但还没碰过 MVP 矩阵或者正被 Three.js 的抽象层遮蔽了投影本质这个 zip 包就是一把解剖刀。2. 从经纬度到屏幕像素手写球面参数化与透视投影的完整推导链2.1 地球几何建模不用 OBJ用三角剖分生成球面顶点项目未使用预烘焙模型文件所有顶点在运行时动态生成。核心逻辑在js/earth.js或index.html内联 script中通过纬度 φ-π/2 到 π/2和经度 θ0 到 2π双重循环构建球面网格const R 200; // 地球半径像素单位 const latStep Math.PI / 60; // 纬度步长60 行 const lonStep Math.PI / 30; // 经度步长120 列 const vertices []; for (let phi -Math.PI/2; phi Math.PI/2; phi latStep) { for (let theta 0; theta 2*Math.PI; theta lonStep) { const x R * Math.cos(phi) * Math.cos(theta); const y R * Math.sin(phi); const z R * Math.cos(phi) * Math.sin(theta); vertices.push({x, y, z}); } }注意此处y轴为地理北极方向标准球坐标系而非 Web 坐标系的向下 Y 轴。后续视图变换会统一翻转。该循环生成约 7200 个顶点61×120密度足够平滑渲染又避免 WebGL 级别的百万级顶点开销。每个顶点携带原始 3D 坐标为后续法线计算、光照和纹理映射提供基础。2.2 视图与投影矩阵手写 MVP 链拒绝黑盒项目未调用setTransform()或transform()而是手动实现齐次坐标变换。关键函数projectPoint(x, y, z)完成三步操作视图变换View Matrix将世界坐标系原点移至摄像机位置(0, 0, -800)并绕 X 轴微调俯仰角模拟地轴倾角// 摄像机位于 (0,0,-800)看向原点 const camZ -800; const viewX x; const viewY y; const viewZ z - camZ; // 平移后 Z 值透视投影Projection采用经典透视除法模拟人眼近大远小const focalLength 500; // 焦距控制视野宽窄 const scale focalLength / (focalLength viewZ); // 透视缩放因子 const screenX viewX * scale; const screenY viewY * scale;视口变换Viewport映射到 canvas 像素坐标中心为原点 → 左上为原点const centerX canvas.width / 2; const centerY canvas.height / 2; return { x: Math.round(centerX screenX), y: Math.round(centerY - screenY), // Y 轴翻转 depth: viewZ // 用于 Z-buffer 排序 };此链路完全避开canvas.getContext(webgl)所有计算在 CPU 完成。depth字段是后续绘制顺序的关键——必须按 Z 值从远到近排序否则近处像素会被远处像素覆盖。2.3 Z-buffer 深度排序解决 2D canvas 的 3D 渲染遮挡问题Canvas 2D API 无深度缓冲区必须手动维护。项目采用最简方案对所有待绘制像素点非顶点而是球面片元按depth降序排列// 对每个三角形面片生成其覆盖的所有像素点Bresenham 光栅化 const fragments []; for (const triangle of triangles) { const projected triangle.map(p projectPoint(p.x, p.y, p.z)); // 光栅化三角形生成 {x,y,depth,color} 片元 fragments.push(...rasterizeTriangle(projected, triangle.textureUV)); } // 关键按 depth 从大到小排序远→近 fragments.sort((a, b) b.depth - a.depth); // 逐像素绘制后绘制的自动覆盖前绘制的 fragments.forEach(frag { ctx.fillStyle frag.color; ctx.fillRect(frag.x, frag.y, 1, 1); });提示rasterizeTriangle()使用扫描线算法而非简单填充。它遍历三角形包围盒内每一像素用重心坐标插值判断是否在三角形内并插值 UV 坐标和深度值。这是实现纹理映射和正确遮挡的基础。若跳过排序地球背面将错误地覆盖正面——这是纯 Canvas 3D 最易踩的坑。3. 纹理映射与大气效果如何让一张 JPG 图片变成有体积感的星球3.1 球面纹理映射从经纬度到图像坐标的双线性插值earth_atmos_4096.jpg是 4096×2048 的 Equirectangular 投影图经纬度展开图。映射时需将球面顶点(φ, θ)转为图像坐标(u, v)// φ ∈ [-π/2, π/2], θ ∈ [0, 2π] const u (theta / (2 * Math.PI)) * textureWidth; // 归一化到 [0,1] → [0,textureWidth] const v ((phi Math.PI/2) / Math.PI) * textureHeight; // φ 偏移后归一化但直接取整Math.floor(u), Math.floor(v)会导致纹理锯齿。项目采用双线性插值Bilinear Interpolationconst u0 Math.floor(u), u1 Math.ceil(u); const v0 Math.floor(v), v1 Math.ceil(v); const du u - u0, dv v - v0; // 读取四邻域像素 const c00 getPixel(textureData, u0, v0); const c10 getPixel(textureData, u1, v0); const c01 getPixel(textureData, u0, v1); const c11 getPixel(textureData, u1, v1); // 插值混合 const r c00.r*(1-du)*(1-dv) c10.r*du*(1-dv) c01.r*(1-du)*dv c11.r*du*dv; const g /* 同理 */; const b /* 同理 */; return {r,g,b};getPixel()从textureDataImageData.data数组中提取 RGBA 值。此插值使赤道附近纹理平滑避免极点拉伸失真。3.2 大气散射层两张图的 Alpha 叠加与径向衰减earth_atmos_4096.jpg并非单纯大气贴图而是含透明通道的 PNG 风格 JPG实际为 JPG with alpha simulation。项目通过以下方式合成图层来源作用混合模式基底earth_atmos_4096.jpgRGB 通道地表纹理云层source-over大气辉光同图 Alpha 通道 径向衰减模拟瑞利散射边缘发蓝白光lighter关键代码在片元着色阶段// 计算当前像素到球心距离归一化 const distFromCenter Math.sqrt((x - centerX)**2 (y - centerY)**2) / R; // 径向衰减越靠近边缘大气强度越高 const atmosphereIntensity Math.max(0, 1 - distFromCenter) * 0.7; // 从大气图提取 Alpha 值模拟叠加到基底色 const baseColor sampleTexture(u, v); // 基底 RGB const atmColor {r:200, g:220, b:255}; // 大气色 finalColor.r baseColor.r (atmColor.r - baseColor.r) * atmosphereIntensity; finalColor.g baseColor.g (atmColor.g - baseColor.g) * atmosphereIntensity; finalColor.b baseColor.b (atmColor.b - baseColor.b) * atmosphereIntensity;此方案无需复杂物理模型仅用距离衰减颜色混合即实现可信的大气边缘辉光。3.3 星空穹顶球面投影与动态视差stars_sky_night_113553_3100x1740.jpg是 3100×1740 的星空全景图。项目将其作为固定背景但通过「视差滚动」增强沉浸感// 星空坐标随鼠标移动轻微偏移视差系数 0.05 const parallaxX (mouseX - centerX) * 0.05; const parallaxY (mouseY - centerY) * 0.05; // 将星空图按球面投影到 canvas 背景 drawSkyBackground(parallaxX, parallaxY);drawSkyBackground()函数将星空图视为球面用与地球相同的projectPoint()逻辑但固定z10000极远距离确保其永远在地球后方且移动迟缓。这比简单background-position更符合 3D 空间直觉。4. 性能优化与交互控制requestAnimationFrame 的精准节流与鼠标事件绑定4.1 requestAnimationFrame 的帧率锁定与时间校准项目未直接使用setTimeout或setInterval而是通过requestAnimationFrame实现平滑旋转但做了关键优化let lastTime 0; let rotationSpeed 0.002; // 弧度/毫秒 function animate(timestamp) { const deltaTime timestamp - lastTime; lastTime timestamp; // 锁定 60FPS若 delta 16.6ms跳过本次更新 if (deltaTime 16) { requestAnimationFrame(animate); return; } // 累计旋转角度避免因帧率波动导致速度不均 globalRotation rotationSpeed * deltaTime; render(); requestAnimationFrame(animate); }提示rotationSpeed单位为「弧度/毫秒」而非「弧度/帧」确保即使偶发掉帧总旋转量仍与真实时间成正比。这是专业动画的必备实践。4.2 鼠标拖拽视角基于四元数的球面旋转解算交互逻辑在handleMouseDown/handleMouseMove中实现。不同于简单rotateY dx项目采用球面旋转Spherical Rotation防止万向节死锁// 记录鼠标按下时的球面坐标 let startPhi, startTheta; function onMouseDown(e) { const rect canvas.getBoundingClientRect(); const x e.clientX - rect.left; const y e.clientY - rect.top; // 将屏幕坐标反解为球面经纬度逆投影 startTheta Math.atan2(x - centerX, -y centerY); startPhi Math.asin((y - centerY) / Math.sqrt((x-centerX)**2 (y-centerY)**2 1)); } function onMouseMove(e) { const rect canvas.getBoundingClientRect(); const x e.clientX - rect.left; const y e.clientY - rect.top; const currTheta Math.atan2(x - centerX, -y centerY); const currPhi Math.asin((y - centerY) / Math.sqrt((x-centerX)**2 (y-centerY)**2 1)); // 计算旋转轴两向量叉积和角度点积反余弦 const axis cross( sphericalToCartesian(startPhi, startTheta), sphericalToCartesian(currPhi, currTheta) ); const angle Math.acos(dot( sphericalToCartesian(startPhi, startTheta), sphericalToCartesian(currPhi, currTheta) )); // 应用旋转到全局旋转矩阵 applyRotation(axis, angle); }sphericalToCartesian()将(φ,θ)转为(x,y,z)单位向量cross()和dot()为标准向量运算。此方案保证任意拖拽方向都产生自然的球面滚动感。4.3 内存与绘制优化离屏 canvas 与脏矩形更新为减少主线程压力项目使用离屏 canvasOffscreenCanvas预渲染静态星空const offscreenCanvas document.createElement(canvas); offscreenCanvas.width 3100; offscreenCanvas.height 1740; const offscreenCtx offscreenCanvas.getContext(2d); offscreenCtx.drawImage(starsImage, 0, 0); // 一次性绘制星空 // 主 canvas 仅绘制动态地球背景用 drawImage 复制离屏内容 ctx.drawImage(offscreenCanvas, 0, 0, canvas.width, canvas.height); renderEarth(); // 仅重绘地球部分同时地球绘制区域被限制在canvas.width × canvas.height的包围盒内避免全屏重绘。renderEarth()函数内部还做了「脏矩形」检测仅当globalRotation变化超过0.01弧度时才触发完整重绘否则复用上一帧缓存。5. 调试与验证如何确认你的 Canvas 3D 渲染管线真正正确5.1 深度可视化临时开启 Z-buffer 热力图当出现遮挡错误时最快验证方式是将depth值映射为灰度色输出// 在 render() 中临时替换片元着色逻辑 fragments.forEach(frag { // 将 depth 映射到 0-255camZ-800, maxZ≈-600 → depth∈[200,400] const gray Math.min(255, Math.max(0, (frag.depth - 200) * 1.27)); ctx.fillStyle rgb(${gray},${gray},${gray}); ctx.fillRect(frag.x, frag.y, 1, 1); });正确渲染下应看到地球呈现清晰的球面明暗过渡中心最亮depth≈-600边缘渐暗depth≈-400。若出现条纹、断裂或反向渐变说明视图矩阵或投影公式有误。5.2 纹理坐标调试绘制 UV 网格覆盖球面为验证纹理映射准确性可禁用纹理采样改绘 UV 坐标网格// 替换 sampleTexture() 为 const gridColor (Math.floor(u/64) Math.floor(v/32)) % 2 0 ? #fff : #000; ctx.fillStyle gridColor; ctx.fillRect(frag.x, frag.y, 1, 1);理想效果是球面呈现均匀棋盘格极点处网格汇聚但无撕裂。若赤道拉伸或极点扭曲检查u/v计算中的2π和π是否遗漏。5.3 帧耗时监控用 performance.now() 定位瓶颈在animate()开头添加性能标记const start performance.now(); render(); const end performance.now(); console.log(Render time: ${end - start}ms (${Math.round(1000/(end-start))} FPS));健康值应稳定在12–16ms60–83 FPS。若超过20ms按以下优先级排查rasterizeTriangle()是否未做包围盒裁剪导致遍历全 canvassampleTexture()是否重复创建ImageData对象应缓存textureDataprojectPoint()是否在循环内重复计算focalLength viewZ应提前计算最后一个硬核技巧将globalRotation设为固定值如Math.PI/4截图保存用 Photoshop 的「3D 球体滤镜」生成参考图与你的 Canvas 输出逐像素比对——这才是检验 3D 数学实现是否正确的终极方法。本文还有配套的精品资源点击获取
