效果
技术栈
cesium 1.103
vue3
实现
import * as Cesium from 'cesium'
export default function DynamicWallMaterialProperty(options) {
this._definitionChanged = new Cesium.Event()
this._color = undefined
this._colorSubscription = undefined
this.color = options.color
this.duration = options.duration
this.trailImage = options.trailImage
this._time = new Date().getTime()
this._viewer = options.viewer
}
Object.defineProperties(DynamicWallMaterialProperty.prototype, {
isConstant: {
get: function () {
return false
},
},
definitionChanged: {
get: function () {
return this._definitionChanged
},
},
color: Cesium.createPropertyDescriptor('color'),
})
DynamicWallMaterialProperty.prototype.getType = function (time) {
return 'DynamicWall'
}
DynamicWallMaterialProperty.prototype.getValue = function (time, result) {
if (!Cesium.defined(result)) {
result = {}
}
result.color = Cesium.Property.getValueOrClonedDefault(
this._color,
time,
Cesium.Color.WHITE,
result.color
)
if (this.trailImage) {
result.image = this.trailImage
} else {
result.image = Cesium.Material.DynamicWallImage
}
if (this.duration) {
result.time =
((new Date().getTime() - this._time) % this.duration) / this.duration
}
this._viewer.scene.requestRender()
return result
}
DynamicWallMaterialProperty.prototype.equals = function (other) {
return (
this === other ||
(other instanceof DynamicWallMaterialProperty &&
Cesium.Property.equals(this._color, other._color))
)
}
Cesium.Material.DynamicWallType = 'DynamicWall'
Cesium.Material.DynamicWallImage = '/src/assets/col.png'
Cesium.Material.DynamicWallSource =
'czm_material czm_getMaterial(czm_materialInput materialInput)n
{n
// 调用 czm_getDefaultMaterial 函数获取一个默认的材质实例,并将其存储在 material 变量中n
czm_material material = czm_getDefaultMaterial(materialInput);n
// // 获取纹理坐标(st)的二维向量n
vec2 st = materialInput.st;n
// 纹理采样,依据时间动态变化,fract 函数用于计算余数,使纹理坐标在[0, 1)范围内循环。n
vec4 colorImage = texture(image, vec2(fract(st.t - time), st.t));n
// 创建一个 vec4 类型的变量用于存储片段颜色n
vec4 fragColor;n
// 将颜色的 RGB 分量除以 1.0(即保持不变),并赋值给 fragColor 的 RGBn
fragColor.rgb = color.rgb / 1.0;n
// 对 fragColor 进行 gamma 校正。czm_gammaCorrect 是一个函数,用于调整颜色的亮度,以便在不同的显示设备上显示一致。n
fragColor = czm_gammaCorrect(fragColor);n
//设置材质的 alpha 值,通常是纹理的 alpha 分量乘以颜色的 alpha 值。n
material.alpha = colorImage.a * color.a;n
// 设置材质的漫反射颜色(diffuse)为 color.rgb,漫反射颜色决定了材质在受到光照时的反射效果。n
material.diffuse = color.rgb;n
// 设置材质的发光颜色(emission)为 fragColor.rgb,发光颜色决定了材质在没有外部光源时的自发光效果。n
material.emission = fragColor.rgb;n
// 返回修改后的材质。n
return material;n
}'
Cesium.Material._materialCache.addMaterial(Cesium.Material.DynamicWallType, {
fabric: {
type: Cesium.Material.DynamicWallType,
uniforms: {
color: new Cesium.Color(1.0, 1.0, 1.0, 1),
image: Cesium.Material.DynamicWallImage,
time: 0,
},
source: Cesium.Material.DynamicWallSource,
},
translucent: function (material) {
return true
},
})
调用方法
let positions = Cesium.Cartesian3.fromDegreesArray([
113.8236839, 22.528061, 113.9236839, 22.628061, 114.0236839, 22.528061,
113.9236839, 22.428061, 113.8236839, 22.528061,
])
const wall = viewer.entities.add({
name: '立体墙效果',
wall: {
positions: positions,
maximumHeights: new Array(positions.length).fill(400),
minimumHeights: new Array(positions.length).fill(0),
material: new DynamicWallMaterialProperty({
viewer,
color : Cesium.Color.RED,
duration: 1500,
}),
},
})
viewer.zoomTo(wall)
材质图片
遇到的错误
Fragment shader compile log: ERROR: 0:9: ‘texture2D’ : no matching overloaded function found
ERROR: 0:9: ‘=’ : dimension mismatch
ERROR: 0:9: ‘=’ : cannot convert from ‘const mediump float’ to ‘highp 4-component vector of float’
我这里直接把texture2D改为texture即可。
参考文章
cesium实现动态立体墙效果_cesium特效wall-CSDN博客
阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=20825,转载请注明出处。
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=20825,转载请注明出处。
评论0