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

用 canvas 画贴图

没有现成的图片也能有贴图:在页面里画一块棋盘加边框,转成 dataURL 直接当材质用,地面和盒体各贴一次。

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

从画布到材质

ImageMaterialProperty.image 接受 URL、图片对象,也接受 canvas 转出的 dataURL。示例先画 256 × 256 的图案,再调用 toDataURL('image/png'),得到的字符串直接赋给材质, 整个过程不产生网络请求。

repeat 控制平铺次数。地面用 3 × 2,盒体用 1 × 1, 同一张图在不同几何上的疏密完全由这个参数决定。

贴图怎么铺到面上

面图元会用纹理坐标把图片拉伸到整个面,因此地面铺满整块图案; 盒体的每个侧面和顶面各用一次完整纹理,拐角处不连续, 这是默认贴图方式的结果,不是图片本身的问题。

可调参数

位置改什么效果
平铺滑杆1 到 10地面图案密度
drawTexture 内的颜色换成暖色整张贴图配色改变
transparent改成 true配合带透明通道的图案
color设成半透明白整体减淡贴图

大图会拖慢首帧。画布尺寸越大,转 dataURL 和解码越慢。 贴图只在屏幕上占几百像素时,256 或 512 已经够用, 没必要用 2048 的尺寸。