HTML5本身不提供建模能力与3D渲染管线；所谓“建模”依赖WebGL（如Three.js）、WebGPU或SVG等技术实现；Three.js中遮挡由depthTest和renderOrder共同控制：默认depthTest开启，按Z值自动遮挡；关闭depthTest后则按renderOrder顺序覆盖。
HTML5 中没有原生“建模”或“层级遮挡控制”的 3D 模型系统
直接说结论：HTML5 本身不提供建模能力，也不内置 3D 渲染管线。所谓“HTML5 建模”，实际是通过 WebGL（如 Three.js）、WebGPU 或 SVG 等技术在浏览器中模拟 3D/2D 表现。层级（z-order）和前后遮挡关系，取决于你用的是哪一层技术栈。
Three.js 中控制模型前后遮挡：靠渲染顺序 + depthTest + renderOrder
在 Three.js 中，遮挡不是靠“把 A 放在 B 前面”这种 UI 式 z-index，而是由深度缓冲（depthTest）和绘制顺序共同决定。默认开启 depthTest，此时物体按世界空间 Z 值（相机空间中的 z）自动遮挡——近的盖住远的。
但有时你需要手动干预，比如 UI 元素总在最前、半透明物体正确混合、或强制某模型先画：
-
mesh.renderOrder = 1：数值越小越早绘制；若两个物体都启用depthTest，renderOrder不影响遮挡逻辑，只影响着色器执行时机 -
mesh.material.depthTest = false：关闭深度测试，该模型将完全忽略 Z 值，按绘制顺序覆盖（后画的盖住先画的） -
mesh.material.transparent = true+material.opacity ：必须配合depthWrite = false和合理renderOrder，否则透明物体会出现穿帮 - 多个
Group或Scene实例可分层管理：例如用一个scene.background子场景放远景，主scene放主体，scene.overlay放 HUD，再按需调用renderer.render(scene, camera)多次
Canvas 2D / SVG 中模拟层级：用 DOM 顺序或 context.save() + z-index
如果只是简单 2.5D 效果（比如等距游戏、平面堆叠图），不用 WebGL，靠 或 ：
立即学习“前端免费学习笔记（深入）”；
-
：绘制顺序即层级顺序 —— 先drawImage()背景，再画角色，最后画 UI。没有“Z 轴”，只有 JS 控制的绘图时序 -
：元素在 DOM 中的顺序决定渲染顺序，后写的style="z-index: 10"，但仅当 SVG 嵌入 HTML 且父容器为position: relative时部分生效，不可靠 - 避免在
中混用globalCompositeOperation来“模拟遮挡”：它改的是像素混合模式（如"destination-over"），不是真实深度，容易逻辑混乱
常见踩坑：为什么模型总是穿模或顺序错乱？
这不是 HTML5 的问题，而是渲染原理没对齐导致的典型现象：
-
renderer.setClearColor(0x000000, 0)忘了传 alpha 值，导致透明背景未启用 alpha 通道，UI 层无法正确叠加 - 多个
Mesh共享同一材质实例，修改其中一个的depthTest会影响全部（材质是引用传递） - 使用
OrbitControls后没调用controls.update()，导致相机矩阵未刷新，worldPosition.z计算错误，手动排序失效 - 在
requestAnimationFrame中反复创建新Geometry或Material，触发隐式重绘和内存泄漏，间接破坏渲染队列稳定性
真正要调“层级”，得先确认你用的是哪条技术路径，再进到对应 API 里动 renderOrder、关 depthTest、或重排 DOM/绘制顺序。没有银弹，也没有全局 z-index 可设。
