可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
Cesium添加雷达扫描效果、RadaScan
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
0
点赞
0
评论
收藏
分享
举报
Cesium添加雷达扫描效果、RadaScan
Terry
关注
已关注
0
0
0
1879
发表于 2020-06-11 20:50:10
### ByteV中已经包含完整的Cesium雷达扫描效果代码 懒得看教程的,可以直接搬运,搬运地址:http://www.bytev.com.cn/index.php?app=shop&ac=editor&id=1410 核心代码使用加载shader实现扫描效果 ```javascript /* 添加雷达扫描线 地形遮挡开启 lon:-74.01296152309055 lat:40.70524201566827 height:129.14366696393927 viewer cartographicCenter 扫描中心 radius 半径 米 scanColor 扫描颜色 duration 持续时间 毫秒 */ function AddRadarScanPostStage(viewer, cartographicCenter, radius, scanColor, duration) { var ScanSegmentShader = "uniform sampler2D colorTexture;\\n" + "uniform sampler2D depthTexture;\\n" + "varying vec2 v_textureCoordinates;\\n" + "uniform vec4 u_scanCenterEC;\\n" + "uniform vec3 u_scanPlaneNormalEC;\\n" + "uniform vec3 u_scanLineNormalEC;\\n" + "uniform float u_radius;\\n" + "uniform vec4 u_scanColor;\\n" + "vec4 toEye(in vec2 uv, in float depth)\\n" + " {\\n" + " vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\\n" + " vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\\n" + " posInCamera =posInCamera / posInCamera.w;\\n" + " return posInCamera;\\n" + " }\\n" + "bool isPointOnLineRight(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\\n" + "{\\n" + "vec3 v01 = testPt - ptOnLine;\\n" + "normalize(v01);\\n" + "vec3 temp = cross(v01, lineNormal);\\n" + "float d = dot(temp, u_scanPlaneNormalEC);\\n" + "return d > 0.5;\\n" + "}\\n" + "vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\\n" + "{\\n" + "vec3 v01 = point -planeOrigin;\\n" + "float d = dot(planeNormal, v01) ;\\n" + "return (point - planeNormal * d);\\n" + "}\\n" + "float distancePointToLine(in vec3 ptOnLine, in vec3 lineNormal, in vec3 testPt)\\n" + "{\\n" + "vec3 tempPt = pointProjectOnPlane(lineNormal, ptOnLine, testPt);\\n" + "return length(tempPt - ptOnLine);\\n" + "}\\n" + "float getDepth(in vec4 depth)\\n" + "{\\n" + "float z_window = czm_unpackDepth(depth);\\n" + "z_window = czm_reverseLogDepth(z_window);\\n" + "float n_range = czm_depthRange.near;\\n" + "float f_range = czm_depthRange.far;\\n" + "return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\\n" + "}\\n" + "void main()\\n" + "{\\n" + "gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\\n" + "float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\\n" + "vec4 viewPos = toEye(v_textureCoordinates, depth);\\n" + "vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\\n" + "float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\\n" + "float twou_radius = u_radius * 2.0;\\n" + "if(dis < u_radius)\\n" + "{\\n" + "float f0 = 1.0 -abs(u_radius - dis) / u_radius;\\n" + "f0 = pow(f0, 64.0);\\n" + "vec3 lineEndPt = vec3(u_scanCenterEC.xyz) + u_scanLineNormalEC * u_radius;\\n" + "float f = 0.0;\\n" + "if(isPointOnLineRight(u_scanCenterEC.xyz, u_scanLineNormalEC.xyz, prjOnPlane.xyz))\\n" + "{\\n" + "float dis1= length(prjOnPlane.xyz - lineEndPt);\\n" + "f = abs(twou_radius -dis1) / twou_radius;\\n" + "f = pow(f, 3.0);\\n" + "}\\n" + "gl_FragColor = mix(gl_FragColor, u_scanColor, f + f0);\\n" + "}\\n" + "}\\n"; var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter); var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1); var _CartographicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500); var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartographicCenter1); var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1); var _CartographicCenter2 = new Cesium.Cartographic(cartographicCenter.longitude + Cesium.Math.toRadians(0.001), cartographicCenter.latitude, cartographicCenter.height); var _Cartesian3Center2 = Cesium.Cartographic.toCartesian(_CartographicCenter2); var _Cartesian4Center2 = new Cesium.Cartesian4(_Cartesian3Center2.x, _Cartesian3Center2.y, _Cartesian3Center2.z, 1); var _RotateQ = new Cesium.Quaternion(); var _RotateM = new Cesium.Matrix3(); var _time = (new Date()).getTime(); var _scratchCartesian4Center = new Cesium.Cartesian4(); var _scratchCartesian4Center1 = new Cesium.Cartesian4(); var _scratchCartesian4Center2 = new Cesium.Cartesian4(); var _scratchCartesian3Normal = new Cesium.Cartesian3(); var _scratchCartesian3Normal1 = new Cesium.Cartesian3(); var ScanPostStage = new Cesium.PostProcessStage({ fragmentShader: ScanSegmentShader, uniforms: { u_scanCenterEC: function () { return Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center); }, u_scanPlaneNormalEC: function () { var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center); var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1); _scratchCartesian3Normal.x = temp1.x - temp.x; _scratchCartesian3Normal.y = temp1.y - temp.y; _scratchCartesian3Normal.z = temp1.z - temp.z; Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal); return _scratchCartesian3Normal; }, u_radius: radius, u_scanLineNormalEC: function () { var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center); var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1); var temp2 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center2, _scratchCartesian4Center2); _scratchCartesian3Normal.x = temp1.x - temp.x; _scratchCartesian3Normal.y = temp1.y - temp.y; _scratchCartesian3Normal.z = temp1.z - temp.z; Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal); _scratchCartesian3Normal1.x = temp2.x - temp.x; _scratchCartesian3Normal1.y = temp2.y - temp.y; _scratchCartesian3Normal1.z = temp2.z - temp.z; var tempTime = (((new Date()).getTime() - _time) % duration) / duration; Cesium.Quaternion.fromAxisAngle(_scratchCartesian3Normal, tempTime * Cesium.Math.PI * 2, _RotateQ); Cesium.Matrix3.fromQuaternion(_RotateQ, _RotateM); Cesium.Matrix3.multiplyByVector(_RotateM, _scratchCartesian3Normal1, _scratchCartesian3Normal1); Cesium.Cartesian3.normalize(_scratchCartesian3Normal1, _scratchCartesian3Normal1); return _scratchCartesian3Normal1; }, u_scanColor: scanColor } }); viewer.scene.postProcessStages.add(ScanPostStage); } ```
点击查看更多
全部评论
登录
|
注册
关于作者
Terry
TA的个人主页
关注
已关注
文章
52
粉丝
31
获赞
15
评论
8
访问
81517
ThreeJS 轮廓线特效 OutLinePath
创建海洋特效组件 THREEJS 海洋效果 Shader实现
ThreeJS后期处理通道
Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial
ThreeJs光效流转特效
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接