cesium实现立体墙（垂直、水平）渐变泛光效果

文章目录

1.实现效果
2.实现方法
- 2.1材质文件
- 2.2代码调用
- 2.3其他类型
- - 2.3.1立体向下
  - 2.3.2水平逆时针
  - 2.3.3水平顺时针

Cesium实战系列文章总目录：传送门

1.实现效果

2.实现方法

通过分析材质可以发现，设置其纹理材质的漫反射diffuse颜色和透明度alpha属性即可，具体可见下文的着色器代码。

2.1材质文件

这里将立体向上泛光效果材质封装成了WallDiffuseMaterialProperty.js，代码如下：

/** @Description: 动态扩散墙的墙体效果（参考开源代码）（不同高度透明度不同）* @Version: 1.0* @Author: Julian* @Date: 2022-03-07 19:50:46* @LastEditors: Julian* @LastEditTime: 2022-03-08 13:34:04*/
class WallDiffuseMaterialProperty {constructor(options) {this._definitionChanged = new Cesium.Event();this._color = undefined;this.color = options.color;};get isConstant() {return false;}get definitionChanged() {return this._definitionChanged;}getType(time) {return Cesium.Material.WallDiffuseMaterialType;}getValue(time, result) {if (!Cesium.defined(result)) {result = {};}result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color);return result}equals(other) {return (this === other ||(other instanceof WallDiffuseMaterialProperty &&Cesium.Property.equals(this._color, other._color)))}
}Object.defineProperties(WallDiffuseMaterialProperty.prototype, {color: Cesium.createPropertyDescriptor('color'),
})Cesium.WallDiffuseMaterialProperty = WallDiffuseMaterialProperty;
Cesium.Material.WallDiffuseMaterialProperty = 'WallDiffuseMaterialProperty';
Cesium.Material.WallDiffuseMaterialType = 'WallDiffuseMaterialType';
Cesium.Material.WallDiffuseMaterialSource =`uniform vec4 color;czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);vec2 st = materialInput.st;material.diffuse = color.rgb * 2.0;material.alpha = color.a * (1.0 - fract(st.t)) * 0.8;return material;}`Cesium.Material._materialCache.addMaterial(Cesium.Material.WallDiffuseMaterialType, {fabric: {type: Cesium.Material.WallDiffuseMaterialType,uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),},source: Cesium.Material.WallDiffuseMaterialSource},translucent: function(material) {return true;}
})

2.2代码调用

引入材质js文件后，使用entity方式创建墙体，并设置其材质即可。

// 绘制墙体
this.viewer.entities.add({name: "立体墙效果",wall: {positions: positions,// 设置高度maximumHeights: new Array(positions.length).fill(50),minimunHeights: new Array(positions.length).fill(0),// 扩散墙材质material: new Cesium.WallDiffuseMaterialProperty({color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)}),}
})

2.3其他类型

上面实现的是立体向上泛光效果，通过修改着色器代码，还可以实现其他方向的渐变泛光效果。

首先要对WebGL纹理坐标有一定了解，使用二维纹理坐标st代表常规xy坐标，坐标范围为[0.0-1.0]之间。

2.3.1立体向下

只需将上文着色器代码中透明度设置修改如下，即按t轴高度设置透明度。

material.alpha = color.a * (fract(st.t)) * 0.8;

立体向下渐变效果：

2.3.2水平逆时针

将透明度设置为与s轴正相关。修改代码如下：

material.alpha = color.a * (fract(st.s)) * 0.8;

水平逆时针渐变效果：

2.3.3水平顺时针

将透明度渐变设置为与s轴负相关即可，修改代码如下：

material.alpha = color.a * (1.0 - fract(st.s)) * 0.8;

水平顺时针渐变效果如下：

cesium实现立体墙（垂直、水平）渐变泛光效果相关推荐

Cesium实战专栏09.Cesium动态立体墙
前言之前在某个三维安防布控管理平台中需要在场景中绘制警戒区,用来表示某些区域具有特定意义,需要进行封锁,不允许靠近,比如军事重地.某些重要会议场所等.使用的是Cesium中的墙体类,实现拉伸显示来模 ...
单行文字垂直/水平跑马灯效果
需求描述接到的需求是这样的:跑马灯效果一次展示一行文字循环滚动文字滚动到视野中停留一秒后滚出. 静态效果如下图,文字从下往上或者从右往左滚动,滚动到此位置时停留一秒(不会传动图... 网络上有 ...
cesium实现动态立体墙效果
文章目录 1.实现效果 2.实现方法 2.1自定义材质 2.2纹理图片 2.3代码调用 Cesium实战系列文章总目录: 传送门设置自定义MaterialProperty,实现动态立体墙体效果 1. ...
html垂直线性渐变,CSS线性渐变垂直和水平渐变linear-gradient
CSS线性渐变 .test1{ width: 200px; height: 80px; text-align: center; line-height: 80px; margin-bottom: 10 ...
使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果
使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果废话不多说,直接先来看下最终实现的动态立体墙效果图. 如果图片还不够直观,那么点击链接查看在线示例. 首先我们需要用到ArcG ...
html垂直线性渐变,html5线性渐变
来源: http://www.html5china.com/css3/20111124_2894.html 渐变可以创建类似于彩虹的效果,低版本的浏览器不的不使开发者用图片来实现,CSS3将会轻松实现 ...
div渐变遮罩效果：纵向和水平反向渐变遮罩效果，让戛然而止的页面多一丝丝淡淡的过渡效果，温柔中透露着一缕缕优雅...
-webkit-mask-image: linear-gradient(transparent, white 20px, white calc(100% - 20px),transparent ...
CSS3来绘制一个3维立体游泳圈_立体墙绘画绘制技巧来了，襄阳墙体彩绘公司介绍...
立体墙绘给人的感觉是想一个生活中真实的物体,和平面画相比,立体画是较为吸引他人.因为平面化没有让人觉得是一个动态的感觉.立体画大家也知道是不好进行绘制,所以下面由襄阳艺术彩绘公司为大家介绍立体画的绘制 ...
android实现超酷的腾讯视频首页和垂直水平网格瀑布流一揽子效果
代码地址如下: http://www.demodashi.com/demo/13381.html 先来一波demo截图实现ListView.GridView.瀑布流 1.导入RecyclerView ...