经纬志
首页 / Cesium / 使用示例

把 canvas 贴图塞进 GLB

画布画好红蓝分区加网格,转成 PNG 字节后写进 GLB 的二进制块, 模型加载出来自带贴图,不需要任何图片文件。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

贴图在 GLB 里是四件事

一份内嵌贴图要写全四处:bufferViews 里加一段指向 PNG 字节的区域, images 声明这一段是 image/png, textures 把图像与采样器配成一对, 最后在 materials 的 baseColorTexture 引用纹理序号。

几何侧还要提供 TEXCOORD_0 属性,否则 UV 全为 0, 整个模型只会显示贴图左上角一个像素的颜色。

字节从哪来

画布调用 toDataURL 得到 base64,示例用 atob 逐字符还原成 Uint8Array,再作为最后一段数据追加进二进制块。 图像段不需要 4 字节对齐之外的额外处理,块长度补齐即可。

可调参数

位置改什么效果
drawTexture 的配色换两种颜色盒体两个分区变色
画布尺寸512 改成 128贴图变糊,字节数减少
wrapS / wrapT改成 33071贴图不再重复,边缘拉伸
「旋转 90°」按钮点击换一面对着相机

贴图坐标由建模决定。立方体每个面都用了完整的 0 到 1 UV, 所以六个面重复同一张图。想让顶面单独一张, 需要给顶面四个顶点分配不同的 UV,或者把顶面拆成另一个 primitives。