cesium(四)：Material及MaterialProperty 设置材质

傣味洋芋2025-12-08 11:16

前言：这里所说的材质包括：颜色、纹理、图片等。设置的方法有：

一、Material

二、MaterialProperty

这里主要讲MaterialProperty

1.ColorMaterialProperty ：设置颜色

用：material: Cesium.Color.RED.withAlpha(0.5)，可设置不同的MaterialProperty

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  materialColor();//颜色
});


/**
  * 设置颜色
* **/
function materialColor() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });

  //方法一，构造时赋材质
  var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: Cesium.Color.RED.withAlpha(0.5)//可设置不同的MaterialProperty
    }
  });
  viewer.zoomTo(entity)
}

</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

2.ImageMaterialProperty ：设置图片

Cesium.ImageMaterialProperty设置图片

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  materialImage();//图片
});


/**
  * 设置图片
* **/
function materialImage() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });

  //方法一，构造时赋材质
  var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: new Cesium.ImageMaterialProperty({
        image: './assets/img/fbb3.webp',
        color: Cesium.Color.PINK,
        repeat: new Cesium.Cartesian2(4, 4)
      })
    }
  });
  viewer.zoomTo(entity)
}


</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

图片没出来：

3.CheckerboardMaterialProperty ：设置棋盘格

evenColor：获取或设置指定第一个 Color 的属性，默认白色

oddColor：获取或设置指定第二个 Color 的属性，默认黑色

repeat:获取或设置 Cartesian2 属性，该属性指定图块在每个方向上重复多少次。

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  materialCheckerboard();//棋盘纹理
});

/**
  * 设置棋盘纹理
* **/
function materialCheckerboard() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });

  //方法一，构造时赋材质
  var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: new Cesium.CheckerboardMaterialProperty({
        evenColor: Cesium.Color.PINK,
        oddColor: Cesium.Color.RED,
        repeat: new Cesium.Cartesian2(4, 4)
      })
    }
  });
  viewer.zoomTo(entity)
}


</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

4.StripeMaterialProperty：设置竖型条纹

offset：获取或设置数字属性，该属性指定模式中的点开始绘画；以0.0为偶数颜色的开始，以1.0为开始的奇数颜色，2.0再次为偶数颜色，以及任何倍数或分数值在两者之间。

orientation ：获取或设置指定 StripeOrientation 的属性，主要是水平还是垂直，默认水平

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  //materialCheckerboard();//棋盘纹理
  StripeMaterial();//棋盘纹理
});

/**
  * 设置竖条纹
* **/
function StripeMaterial() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });


  var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: new Cesium.StripeMaterialProperty({
        evenColor: Cesium.Color.PINK,
        oddColor: Cesium.Color.RED,
        repeat: 32,
        offset: 20,
        orientation: Cesium.StripeOrientation.VERTICAL
      })
    }
  });

  viewer.zoomTo(entity)
}



</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

5.StripeMaterialProperty：设置网格

color：获取或设置指定网格 Color 的属性。

cellAlpha :获取或设置数字属性，该属性指定单元格alpha值。

lineCount :获取或设置 Cartesian2 属性，该属性指定沿每个轴的网格线数。

lineOffset :该属性指定沿每个轴的网格线的起始偏移量。

lineThickness :该属性指定沿每个轴的网格线的粗细。

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  //materialCheckerboard();//棋盘纹理
  //StripeMaterial();//棋盘纹理
  GridMaterial();//设置网格
});

/**
  * 设置网格
* **/
function GridMaterial() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });


  var entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
    ellipse: {
      semiMinorAxis: 250000.0,
      semiMajorAxis: 400000.0,
      material: new Cesium.GridMaterialProperty({
        color: Cesium.Color.RED,
        cellAlpha: 0.2,
        lineCount: new Cesium.Cartesian2(8, 8),
        lineThickness: new Cesium.Cartesian2(2.0, 2.0)
      })
    }
  });

  viewer.zoomTo(entity)
}


</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

6.polyline：设置一条线

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  //materialCheckerboard();//棋盘纹理
  //StripeMaterial();//棋盘纹理
  //GridMaterial();//设置网格
  polyline();//设置一条线

});


/**
  * 设置一条线
* **/
function polyline() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });


  var entity = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-77, 35,
      -77.1, 35]),
      width: 5,
      material: Cesium.Color.RED
    }
  });

  viewer.zoomTo(entity)
}

</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

7.PolylineGlowMaterialProperty：设置一条发光

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  //materialCheckerboard();//棋盘纹理
  //StripeMaterial();//棋盘纹理
  //GridMaterial();//设置网格
  // polyline();//设置一条线
  PolylineGlowMaterial();//发光线
});




/**
  * 设置发光线条
* **/
function PolylineGlowMaterial() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });


  var entity = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-77, 35,
      -77.1, 35]),
      width: 5,
      material: new Cesium.PolylineGlowMaterialProperty({
        glowPower: 0.2,
        color: Cesium.Color.RED
      })
    }
  });

  viewer.zoomTo(entity)
}



</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

8.PolylineOutlineMaterialProperty：设置线条的宽度、纹理

javascript 复制代码 
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  //materialColor();//颜色
  //materialImage();//图片
  //materialCheckerboard();//棋盘纹理
  //StripeMaterial();//棋盘纹理
  //GridMaterial();//设置网格
  // polyline();//设置一条线
  //PolylineGlowMaterial();//发光线
  PolylineOutlineMaterial();//设置线条的宽度、纹理
});

/**
  * 设置线条的宽度、纹理
* **/
function PolylineOutlineMaterial() {
  //初始化
  let viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true, //是否显示动画控件
    baseLayerPicker: true, //是否显示图层选择控件
    fullscreenButton: true, //是否显示全屏按钮
    vrButton: true, // vr部件
    geocoder: true, // 位置搜索部件
    homeButton: true, //是否显示Home按钮
    infoBox: false, //是否显示点击要素之后显示的信息
    sceneModePicker: true, // 二三维切换部件
    timeline: true, //是否显示时间线控件
    navigationHelpButton: true, //是否显示帮助信息控件
  });


  var entity = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-77, 35,
      -77.1, 35]),
      width: 5,
      material: new Cesium.PolylineOutlineMaterialProperty({
        color: Cesium.Color.ORANGE,
        outlineWidth: 3,
        outlineColor: Cesium.Color.BLACK
      })
    }
  });

  viewer.zoomTo(entity)
}


</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
相关推荐
郝学胜-神的一滴1 天前
[简化版 GAMES 101] 计算机图形学 04：二维变换上
c++·算法·unity·godot·图形渲染·unreal engine·cesium
星夜泊客1 天前
unity 海底海洋资源OceanEnviromentPackUrp材质丢失修正
unity·游戏引擎·材质
_李小白3 天前
【OSG学习笔记】Day 35: Material（材质）
笔记·学习·材质
duansamve4 天前
Cesium快速入门到精通系列教程二十五：以较长经纬度跨度为基准，将多边形充满屏幕，返回此时的中心点坐标及相机高度
cesium
康谋自动驾驶5 天前
3DGS 与 OpenMATERIAL：场景表示与材质标准的分层协同
3d·材质·仿真·3dgs·openmaterial
2401_863801467 天前
制作转换3Dtiles时候cesium(b3dm)模型没有阴影，没有材质感，发白显示太假怎么办
3d·arcgis·材质·3dtiles
白狐_7989 天前
基于 Google Opal 的批量产品图改色工作流实践：从参考材质图到 5 张商品图一致化输出
人工智能·材质
阿琳a_10 天前
在github上部署个人的vitepress文档网站
前端·vue.js·github·网站搭建·cesium
mxwin11 天前
Unity Mask 贴图：用一张纹理的 RGBA 通道分别控制 PBR 材质参数
unity·材质·贴图
云上飞4763696211 天前
glb模型在Cesium中发黑的机理分析
cesium·glb模型发黑
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03GitHub 镜像站点04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手06AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析07Oh My Codex 快速使用指南08CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南09从限购到畅通：GLM-5.1 Coding Plan接入攻略10LLM Wiki：让大模型替你打理知识库的完整指南