js
(function(global, factory) {
if (typeof exports === 'object') {
if (typeof Cesium == 'undefined') return null;
module.exports = factory(Cesium);
} else {
if (typeof window.Cesium == 'undefined') return null;
global.WallMaterialProperty = factory(Cesium);
}
}(typeof window !== "undefined" ? window : this, function(Cesium) {
/*
流动纹理面
duration 持续时间 毫秒
repeat 纹理重复次数
image 纹理
*/
function WallMaterialProperty(color, duration) {
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._colorSubscription = undefined;
this.color = color;
this.duration = duration;
this._time = (new Date()).getTime();
}
Object.defineProperties(WallMaterialProperty.prototype, {
isConstant: {
get: function() {
return false;
}
},
definitionChanged: {
get: function() {
return this._definitionChanged;
}
},
color: Cesium.createPropertyDescriptor('color')
});
WallMaterialProperty.prototype.getType = function(time) {
return 'WallMaterialProperty';
}
WallMaterialProperty.prototype.getValue = function(time, result) {
if (!Cesium.defined(result)) {
result = {};
}
result.color = resultcolor((((new Date()).getTime() - this._time)) % (this.duration * 35) / (this.duration * 35));
result.time = (((new Date()).getTime() - this._time)) / this.duration;
return result;
function resultcolor(p) {
var a = p;
//var a = p / (scale * 7);//0-1
var r = 1;
var g = 1;
var b = 1;
if (a >= 0 && a < 0.14) {
g = a / 0.28;
b = 0;
} else if (a >= 0.14 && a < 0.28) {
g = (a - 0.14) / 0.28 + 0.5
b = 0;
} else if (a >= 0.28 && a < 0.42) {
r = 1 - (a - 0.28) / 0.14;
b = 0
} else if (a >= 0.42 && a < 0.56) {
r = 0;
b = (a - 0.42) / 0.14
} else if (a >= 0.56 && a < 0.7) {
r = 0;
g = 1 - (a - 0.56) / 0.14
} else if (a >= 0.7 && a < 0.84) {
r = (a - 0.7) / 0.14;
g = 0;
} else if (a >= 0.84 && a < 1) {
g = 0;
b = 1 - (a - 0.84) / 0.16
}
r = r > 1 ? 1 : r;
g = g > 1 ? 1 : g;
b = b > 1 ? 1 : b;
return new Cesium.Color(r, g, b);
}
}
WallMaterialProperty.prototype.equals = function(other) {
return this === other || (other instanceof WallMaterialProperty && Property.equals(this._color, other._color))
}
Cesium.WallMaterialProperty = WallMaterialProperty;
Cesium.Material.WallMaterialProperty = 'WallMaterialProperty';
Cesium.Material.WallImage1 = "./images/WallImage1.png";
Cesium.Material.WallImage2 = "./images/WallImage2.png";
Cesium.Material.WallSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
czm_material material = czm_getDefaultMaterial(materialInput);\n\
vec2 st = materialInput.st;\n\
vec4 colorImage = texture2D(image, vec2(0.8-st.t, st.s));\n\
vec4 colorImage2 = texture2D(image2, vec2(st.s, fract(st.t*1.0- time)));\n\
material.alpha = colorImage.a * color.a + 0.5*colorImage2.r;\n\
material.diffuse = color.rgb;\n\
material.emission = vec3(0.8);\n\
return material;\n\
}"
Cesium.Material._materialCache.addMaterial(Cesium.Material.WallMaterialProperty, {
fabric: {
type: Cesium.Material.WallMaterialProperty,
uniforms: {
color: new Cesium.Color(0.5, 0.5, 0.5, 1.0),
image: Cesium.Material.WallImage1,
image2: Cesium.Material.WallImage2,
time: 0
},
source: Cesium.Material.WallSource
},
translucent: function(material) {
return material.uniforms.color.alpha <= 1.0;;
}
});
return WallMaterialProperty;
}));
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="description" content="Create 3D models using glTF.">
<title>WallExample</title>
<link href='lib/Cesium/Widgets/widgets.css' rel='stylesheet' />
<script type="text/javascript" src="lib/Cesium/Cesium.js"></script>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="WallMaterialProperty.js"></script>
</head>
<body style="width: 100%;height: 100%;margin: 0px;overflow: hidden;">
<div id="cesiumContainer" class="fullSize"></div>
<script id="cesium_sandcastle_script">
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
}),
selectionIndicator: false,
animation: false, //是否创建动画小器件，左下角仪表
baseLayerPicker: false, //是否显示图层选择器
fullscreenButton: false, //是否显示全屏按钮
geocoder: false, //是否显示geocoder小器件，右上角查询按钮
homeButton: false, //是否显示Home按钮
infoBox: false, //是否显示信息框
sceneModePicker: false, //是否显示3D/2D选择器
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, //是否显示时间轴
navigationHelpButton: false, //是否显示右上角的帮助按钮
scene3DOnly: true,
automaticallyTrackDataSourceClocks: false, //自动追踪最近添加的数据源的时钟设置
sceneMode: Cesium.SceneMode.SCENE3D, //初始场景模式
});
let three = viewer.entities.add({
name: 'Wall',
wall: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
118.286419, 31.864436, 20000.0,
119.386419, 31.864436, 20000.0,
119.386419, 32.864436, 20000.0,
118.286419, 32.864436, 20000.0,
118.286419, 31.864436, 20000.0,
]),
material: new Cesium.WallMaterialProperty(Cesium.Color.GREEN, 1000)
}
})
viewer.flyTo(three, {
duration: 0.0
})
</script>
</body>
</html>
wall.png
网友评论