首页 / Cesium / 使用示例
用 canvas 画贴图
没有现成的图片也能有贴图:在页面里画一块棋盘加边框,转成 dataURL 直接当材质用,地面和盒体各贴一次。
源码与运行效果
从画布到材质
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 的尺寸。