Web 3D 基础概念：从 Mesh 到 GLB

AI 参与说明（Agent：Grok）：本文根据作者提供的 Web 3D 入门提纲，对照 Khronos glTF 2.0、Three.js、Blender glTF 导出器、OpenUSD 与 Apple AR Quick Look 的公开资料整理并校验。资料整理于 2026-09-08。运行记录：模型 grok-4.6，提供方 xAI，执行入口 Grok Build TUI。场景选择与记忆路径是本文的实践建议，不是格式规范本身的要求。

3D 模型不是一张图片，而是一组描述形状、外观、运动和观察条件的结构化数据。第一次接触 Web 3D 时，Mesh、UV、PBR、glTF、GLB、Draco 看起来互不相关，其实都落在同一条链路上：如何用数据描述三维物体，再把它交给浏览器或引擎高效渲染。

本文只建立这条链路的概念地图。工具选择、Blender 与 Three.js 如何协作，以及可直接操作的站内 demo，见 Three.js 与 Blender 入门。

阅读前先看这几个词

中文名称用于导读对照，后文固定使用英文名称。Mesh 在本文首先指表面几何数据；Three.js 里同名的场景对象会单独标明。

glTF is an API-neutral runtime asset delivery format. It is designed for efficient transmission and loading of 3D scenes and models, not as a replacement for authoring files from Digital Content Creation tools. GLB is the binary container that can pack JSON, buffers, and images into one file. 理解这一点，后面所有格式差异都可以看成：它们决定保留哪些数据、用什么方式编码、服务哪一个工作阶段。这里的 Digital Content Creation 指 Blender 这类建模与动画制作软件。Khronos glTF README · glTF 2.0 Specification

一份 3D 模型里有哪些数据

制作软件里的“椅子”或“角色”，在文件里通常是下面这些数据的组合。它们可以分开存储，也可以一起打包。

flowchart TB
    Vertex["Vertex"] --> Mesh["Mesh"]
    Edge["Edge"] --> Mesh
    Face["Face"] --> Mesh
    Normal["Normal"] --> Mesh
    UV["UV"] --> Mesh
    Texture["Texture"] --> Material["Material"]
    Material --> Scene["Scene"]
    Mesh --> Scene
    Skinning["Skinning"] --> Animation["Animation"]
    MorphTarget["Morph Target"] --> Animation
    Animation --> Scene
    Camera["Camera"] --> Scene
    Light["Light"] --> Scene
    Node["Node Hierarchy"] --> Scene

Mesh、Vertex、Edge、Face

Blender 把 Mesh 的基本元素定义为 Vertex、Edge 和 Face。Vertex 是三维空间中的一个点；Edge 用直线连接两个 Vertex；Face 是三个、四个或更多 Vertex 围成的表面。三个 Vertex 构成 Triangle，四个构成 Quad，更多则称为 n-gon。Blender Mesh Structure

一个立方体最少需要 8 个 Vertex、12 条 Edge、6 个 Face；若全部拆成 Triangle，则是 12 个 Triangle。模型越复杂，Vertex 和 Face 越多。这就是高面数与低面数的核心差别：高面数细节多、渲染开销大；低面数更适合实时显示。

glTF stores mesh data as triangles only. 导出到 glTF 时，Quad 和 n-gon 会被自动转换成 Triangle。这也是运行时格式和制作格式的一个分界：制作阶段可以保留更方便编辑的 Face，交付给网页时通常只留下 GPU 直接使用的 Triangle。Blender glTF 2.0 · Khronos 3D Commerce Asset Creation Guidelines

本文的 Mesh 指表面几何数据。Three.js 里的 Mesh 是另一回事：它把 Geometry 与 Material 组合成可放入 Scene 的对象。一份椅子素材可以包含多个 Mesh、多套 Material，甚至 Animation。日常说的 Model 也不一定等于一个 Mesh。Three.js Mesh · Three.js Fundamentals

Normal 与 UV

Normal is a unit XYZ vector defining the perpendicular to the surface. 渲染时用它判断这个面朝向哪里，从而计算明暗。方向错误时，表面会看起来内凹，或光照落在错误一侧。glTF 2.0 Specification：Technical Terminology

UV 是把二维 Texture 贴到三维表面的映射坐标，可以理解成给表面“展平画一张地图”。展开得越合理，木纹、标签越不容易扭曲。glTF 在导出时，不连续的 UV 或平坦着色的边可能导致 Vertex 被拆开，所以文件里的 Vertex 数量有时会高于制作软件里看到的数量。Blender UV Mapping · Blender glTF 2.0

Material、Texture 与 PBR

Material 决定表面看起来像木头、塑料还是金属。Texture 给这些参数提供图像采样，不只是“贴上去的照片”。

glTF defines materials using a metallic-roughness PBR model. 核心通道包括 Base Color、Metallic、Roughness，并可配合 Normal Map、Emissive 和烘焙后的 Ambient Occlusion。PBR 提供跨工具较一致的表面描述，并不自动等于照片级效果；模型、光照和参数仍然重要。glTF 2.0 Specification：Materials · Blender glTF 2.0

制作软件里常见多层节点混合。面向实时交付时，这些效果通常要烘焙成位图 Texture，而不是把完整节点图带进网页。Khronos 3D Commerce Asset Creation Guidelines

Skinning、Morph Target 与 Animation

会动的角色通常有一套 Skeleton。Skinning computes and applies individual transforms for each vertex of a mesh primitive. 在 glTF 里，这些控制点叫 joint；Vertex 绑定到 joint 上，joint 旋转时带动周围表面变形。glTF 2.0 Specification：Skinning

Morph Target 是另一类变形：它记录 Vertex 属性相对基础形状的差值，适合表情、开合之类的局部变化。glTF 2.0 的 Animation 可以驱动 Node 的平移、旋转、缩放，以及 Morph Target 的权重；循环播放、多段动作之间的混合通常由运行时应用决定，而不是写死在文件里。glTF 2.0 Specification：Animations

Scene、Node、Camera、Light

一份完整资产除了形状本身，通常还有：

• Scene：要呈现的对象及其关系。
• Node：层级与局部变换，例如轮子是汽车的子对象。
• Camera：观察位置、朝向和视野。
• Light：方向光、点光、聚光等照明；Blender 的 Area Light 和 World lighting 并不属于 glTF 核心，导出时会被忽略，除非使用扩展并明确勾选。Blender glTF 2.0

不同格式的本质差别，就是它们决定保留上述数据中的哪些部分，以及用什么方式编码。

常见 3D 文件格式按阶段分工

这些格式不是互相替代的“更好/更差”清单，而是分别服务制作、交换和运行时交付。Khronos 的实时资产指南把它们分成三类：native authoring（如 .blend）、interchange（如 USD、FBX、OBJ）和 delivery（如 glTF、USDZ）。Khronos 3D Commerce Asset Creation Guidelines

flowchart TB
    Authoring["Authoring<br/>.blend"] --> Interchange["Interchange<br/>FBX / OBJ / USD"]
    Authoring --> Delivery["Runtime delivery<br/>glTF / GLB / USDZ"]
    Interchange --> Delivery
    Delivery --> Runtime["Web / Engine / AR"]
    CAD["CAD / 3D print<br/>STEP / IGES / STL"] --> Other["精确几何或打印，不是网页运行时主路径"]

为什么需要这么多格式：

• 制作阶段要保留可编辑信息，例如未应用的修改器、图层和节点网络，所以用 .blend 这类工程文件。
• 软件间传输需要一种多方都能读的交换格式。OBJ、FBX、USD 都承担过这个角色，但它们不是专门为“体积小、加载快”设计的。
• 最终给网页、手机或引擎消费时，需要去掉制作过程中的冗余，让 GPU 尽快用上 Triangle、Texture 和 Animation。这正是 glTF / GLB 出现的原因。

CAD 的 STEP / IGES 和打印用的 STL 走的是另一条需求：精确尺寸或加工几何。把它们拿来做网页商品预览，通常还要先转成 Triangle Mesh，再导出 glTF。USD 不是“又一种 Mesh 文件”那么简单，它描述可组合的场景层；Apple 的 AR Quick Look 使用 USDZ 在 iPhone、iPad 和 Apple Vision Pro 上预览三维物体。OpenUSD Introduction · Apple AR Quick Look

glTF 与 GLB：Web 3D 为什么常用它们

社区里常把 glTF 比作“3D 领域的 JPEG”。这是传播用语，规范本身的表述更精确：glTF is a royalty-free specification for the efficient transmission and loading of 3D scenes and models. 它减少资产体积，也减少运行时解开这些资产所需的处理。Khronos glTF README

一份 glTF 资产可以表现为：

.gltf 形式（JSON + 外部资源）
scene.gltf     ← JSON：Node、Material、Animation 等描述
scene.bin      ← 几何、Animation 等二进制缓冲
textures/
  ├─ basecolor.png
  ├─ normal.png
  └─ roughness.png

.glb 形式（Binary glTF）
scene.glb      ← 上面这些内容装进一个二进制文件

A glTF asset is represented by a JSON file (.gltf), binary buffers (.bin), and image files. These resources MAY also be stored together in a GLB container. JSON 文件应使用 model/gltf+json；GLB 应使用 .glb 与 model/gltf-binary。glTF 2.0 Specification：glTF Basics

GLB 的动机很具体：如果 JSON 去引用许多外部文件，加载要发多次请求；如果把二进制数据用 Base64 嵌进 JSON，体积大约增加 33%，解码也更慢。Binary glTF 把 JSON、buffer 和图像放进同一个二进制 blob，避免这两类开销。它仍可以引用外部资源，例如把图像留在外面。glTF 2.0 Specification：GLB File Format

Blender 导出器把三种形式写得很清楚：

• glTF Binary（.glb）：Mesh、Texture 和相关信息打进单个二进制文件，便于分享和拷贝。
• glTF Separate（.gltf + .bin + textures）：JSON 可检查、Texture 可单独替换；分发时必须把整组文件一起带走。
• glTF Embedded（.gltf）：用 Base64 把数据写进 JSON，效率最低，只在必须走纯文本通道时使用。Blender glTF 2.0：File Format Variations

flowchart TB
    GLB["GLB"] --> Header["12-byte Header<br/>magic / version / length"]
    GLB --> JSONChunk["JSON chunk"]
    GLB --> BINChunk["BIN chunk"]
    JSONChunk --> Desc["Scene / Node / Material / Animation 描述"]
    BINChunk --> Payload["Vertex、索引、Skinning、图像等二进制数据"]

面向普通用户下载、CDN 分发、网页直接加载时，几乎总是优先选 .glb，因为它不容易在传输过程中丢失 Texture 或路径失效。需要人工检查 JSON、或超大 Texture 要单独缓存时，再用 .gltf 多文件形式。

Three.js 把 glTF 作为大多数项目的推荐工作流：Where possible, we recommend using glTF. Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. 功能覆盖 Mesh、Material、Texture、Skin、Skeleton、Morph Target、Animation、Light 和 Camera。FBX、OBJ、COLLADA 仍可用，但不是默认首选。Three.js Loading 3D Models

在浏览器里加载一个 GLB

Three.js 的 GLTFLoader 同时支持 .gltf 和 .glb，因为两者是同一套数据结构，只是封装方式不同。官方最小用法如下；它假定页面里已经有一个 scene，不是完整应用。GLTFLoader · Three.js Loading 3D Models

import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

const loader = new GLTFLoader();

loader.load(
  "path/to/model.glb",
  function (gltf) {
    scene.add(gltf.scene);
  },
  undefined,
  function (error) {
    console.error(error);
  },
);

加载结果里常用的是 gltf.scene。资源还可以带 animations、cameras 和多个 scenes。若文件使用了 KHR_draco_mesh_compression 或 KTX2 Texture，还要分别设置 DRACOLoader 和 KTX2Loader，否则压缩数据无法解码。GLTFLoader.setDRACOLoader

能加载不代表画面与 Blender 里完全相同。Material 转换、环境照明、颜色空间和缺失的 Light 都会造成差异，必须在最终网页里核对。Blender 中的任意节点组合、Simulation 或 Compositing 也不保证能被 glTF 表达。Three.js 与 Blender 入门

如果还没有模型文件，可以先用站内 demo 观察 Geometry、Material、Light 与 Camera 分别改变什么：打开 Three.js 基础交互 demo。

体积和运行时怎么优化

交付到网页前，还会遇到几个压缩与性能术语。中文名称只在这里对照一次。

“看起来精致”不等于适合放进移动网页。几何面数、Texture 分辨率、Material 数量和 Animation 轨道都会同时影响下载时间、内存和 GPU 成本。Khronos 的实时资产指南把常见手段写进交付侧：合并 Mesh 以减少 Draw Call、压缩几何与 Texture、按目标平台控制 Triangle 数量。Khronos 3D Commerce Asset Creation Guidelines

Draco geometry compression allows glTF to stream compressed geometry instead of raw vertex data. KTX v2 images with Basis Universal supercompression can reduce transmission size and GPU memory compared with core PNG/JPEG. 这两项都是扩展，不是每个查看器都默认内置；Three.js 需要额外 loader。KHR_draco_mesh_compression · KHR_texture_basisu

制作软件适合改形状和外观；已经导出的 glTF 更适合用专门工具做可重复的体积处理。glTF Transform 是面向 glTF 2.0 的读写 SDK 与 CLI，用来打包、拆分或优化现有模型，而不是替代 Blender 做艺术编辑。glTF Transform

一条最短的记忆路径

制作在 .blend 里完成 → 跨软件传输用 FBX / OBJ / USD → 要在网页、手机或 AR 上展示，导出 glTF；面向分发时优先 GLB。

.blend 相当于可反复修改的源文件，GLB 相当于打包后给运行时消费的成品。它不是把 Blender 的完整编辑环境搬进浏览器，而是把 Scene、Mesh、Material、Texture 和部分 Animation 变成加载器可以直接解析的数据。

若目标是网页里的 3D 交互，建议先分清这些数据各负责什么，再加载一个现成的 GLB；素材有问题和网页如何显示素材，是两类不同的排查路径。

关联阅读

• Three.js 与 Blender 入门：适用场景、3D 基础概念与协作流程：工具分工、导出边界和可操作 demo。
• 可视化工具：D3.js、Chart.js 与 Three.js：统计图表与 3D 内容的任务差别。
• Frontend 工具链导航：返回专题入口。