Cesium实现一材质多贴图，一个模型多张贴图，自定义attribute

最新推荐文章于 2026-06-15 10:28:56 发布

原创

最新推荐文章于 2026-06-15 10:28:56 发布 · 3.2k 阅读

本文介绍如何在Cesium中实现同一模型上不同贴图的切换。通过自定义顶点和片元着色器，利用imgIdx属性指定每个顶点对应的贴图。此方法允许在运行时动态改变贴图，实现丰富的视觉效果。

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

思路：

Material.fabric.uniforms添加自定义的两张贴图image_0，image_1。

Geometry.attributes添加imgIdx自定义属性，用于标识该顶点使用哪张贴图。

顶点着色器把imgIdx传入片元着色器。

片元着色器把imgIdx传入source（插值后的结果会有误差，所以用差的绝对值小于0.1来判断标识的值），source中根据imgIdx的值选取采样器（贴图）。

源码仓库：Apps/shaderMaterial_mult_img.html · changjiuxiong/Cesium-1.62Test - Gitee.com

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="https://blog.csdn.net/Build/Cesium/Cesium.js"></script>
  <style>
    @import url(../Build/Cesium/Widgets/wid

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

标签