首页 / Cesium / 使用示例
把 canvas 贴图塞进 GLB
画布画好红蓝分区加网格,转成 PNG 字节后写进 GLB 的二进制块, 模型加载出来自带贴图,不需要任何图片文件。
源码与运行效果
贴图在 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。