青岛网站上排名p2p网站开发公司

当前位置： 首页 > news >正文

青岛网站上排名,p2p网站开发公司,私企建筑公司排名,了解深圳网站定制开发公司投标内容有个视频投放的功能动画#xff0c;原本想实现这么一个效果#xff1a; 案例效果来自别人的展示作品#xff0c;Leader一眼就相中了这个效果#xff0c;可惜别人的终究是别人的#xff0c;又不会白白给你#xff0c;终究是要自己动手尝试。 动画方面的展示…公司投标内容有个视频投放的功能动画原本想实现这么一个效果 案例效果来自别人的展示作品Leader一眼就相中了这个效果可惜别人的终究是别人的又不会白白给你终究是要自己动手尝试。 动画方面的展示效果我已经非常熟练了无非就是两种写法1. 实体绑定时间轴监听路径以及姿态2. CZML加载模型和点位集合。 为了方便我一般都用第二种。动画方面没有问题那么就差一个视椎体视频了只要把这个做出来把它跟CZML的时间轴绑定起来就完事了。 Step 0: 思路构建一个视椎体然后计算远截面四点坐标利用这四个点来画一个矩形贴入视频材质完成视频在视椎体内播放。 使用CZML播放动画将视椎体的朝向更正为垂直向下再将位置绑定给动画中的实体让它们一起运动。 经过不懈努力拿到一个视椎体方法可以计算出四点点位视频作为材质镶嵌到视椎体头部偶然间尝试到的perPositionHeight: true解决了多边形不贴合问题视频播放也解决了一切都在向着美好的方向最后发现视椎体我控制不了它旋转到垂直向下的方向这需要足够的矩阵计算能力还有就是动态更新位置也是个技术大关一时半会儿搞不定Game Over 花费了不少时间去追求最高品质效果受阻后开始琢磨阉割版。 虽然接下来实现的可能是个简陋功能但能让Leader有个可以交差的东西后续有时间再重新研究。 想法去除视椎体添加一个适合贴视频的材质让它跟随无人机一起运动可以简单实现视频追着无人机飞。 Step 1: 思路 动态点还是依靠CZML实现在dataSource.then方法内部作用域中获取路径实体添加rectangle矩形所需四个点通过Cesium.CallbackProperty回调函数实时计算。 部分代码 dataSource.then(function (dataSource) {var entity dataSource.entities.getById(path);entity.viewFrom new Cesium.Cartesian3(0.0, 0, 15000.0);that.viewer.trackedEntity entity;const videoElement document.getElementById(ceguiji); //视频早已绑定到标签that.viewer.entities.add({rectangle: {coordinates: new Cesium.CallbackProperty(function (time, result){var sourpos entity.position.getValue(time);var cartographic1 Cesium.Ellipsoid.WGS84.cartesianToCartographic(sourpos);var lon1 Cesium.Math.toDegrees(cartographic1.longitude);var lat1 Cesium.Math.toDegrees(cartographic1.latitude);var height1 cartographic1.height;return Cesium.Rectangle.fromDegrees(lon1-0.0001,lat1 - 0.0002, lon10.0001, lat10.0002)},false),material: videoElement},})}很容易就出来一个跟随路径飞行的视频但跟路径夹角基础在45度视频长宽被拉伸得不成型还不能变方向这就是固定点的局限性直接pass。 Step 2: 思路将材质换成视频墙plane比wall更合适只需要一个动点长宽皆可由属性定义这样一个长宽合适的视频就跟随路径移动了但有个两个问题一个是大难题怎样实时更新姿态另一个视频立起来了我还要让它倒下去跟地面平行。 部分代码 var bluePlane that.viewer.entities.add({name : Blue plane,position : Cesium.Cartesian3.fromDegrees(118.835100, 35.183068, 190),plane : {plane : new Cesium.Plane(Cesium.Cartesian3.UNIT_Y, 0.0),dimensions : new Cesium.Cartesian2(-150.0, 100.0),material : videoElement,stRotation: Cesium.Math.toRadians(90)},}); 经过一系列尝试我发现解决将它放平的难度可能比解决实时更新姿态的难度更高AI也说了这两个材质设计之初就没考虑过空间问题所以还是换吧。 Step 3: 思路box材质让我看到了希望它是一个立体盒子我可以通过设置长宽、高为0来实现一个平面视频墙。 var bluePlane that.viewer.entities.add({name : Blue plane,position : Cesium.Cartesian3.fromDegrees(118.835100, 35.183068, 190),box: {dimensions : new Cesium.Cartesian3(60.0, 30.0, 0.0),material: videoElement},}); 轻松得到一个平行地面的视频材质所以只剩下最后一个问题如何让材质跟随路径调整姿态。 Step 4: 思路我尝试将box加入czml中这样它可以通过czml的自带属性来实时更新姿态我就不用考虑变换矩阵 {id: box,name: uva-box-fly,availability: 2022-08-04T10:00:00Z/2022-08-04T15:00:00Z,box: {dimensions: {cartesian: [60.0, 30.0]},material: Cesium.Color.RED.withAlpha(0.5),},orientation: {velocityReference: #position},model: {gltf: /models/Cesium_Air.glb,scale: 2},position: {epoch: 2022-08-04T10:00:00Z,cartographicDegrees: [],},},但我发现视频是横着放的这个暂且不管得到下面这个效果。 因为它用的是飞机路径的position和飞机路线重合所以就叠一起了我复制了一份路径存储数组在push的时候高度降低50这样就可以分离飞机和视频。 但再看效果发现连飞机都复刻下来了简直离谱 Step 5: 接上一步既然都是要在dataSource.then中实现那么加入实体追踪的方式似乎也难不了多少尝试了一下思路很轻易就实现了同样的效果关键点在于设置实体方向orientation: Cesium.Quaternion.IDENTITY这个值可以根据position初始化姿态也就可以做到跟随路径同步调整方向但实现效果上我看到了一个斜放的刀片一样的东西视频方向永远倾斜这跟视椎体初始化角度问题一样是个大毛病。
看到只差最后一步我只能去搜寻旋转实体的方法让它在原有姿态基础上旋转到合适角度。原本尝试了Cesium.Transforms.headingPitchRollQuaternion(Cesium.Cartesian3.fromDegrees(lon,lat,height), new Cesium.HeadingPitchRoll(45, 0, 0))这个常用办法但报错了搜了一下AI发现这个用于局部坐标系而我获取到的点已经是Cartesian3方法不可用于是尝试更难的四元数矩阵转换还好没给我出现太多阻碍连着解决了几个小问题实现了比较好的一版。 部分代码 var bluePlane that.viewer.entities.add({name : Blue plane,position : Cesium.Cartesian3.fromDegrees(118.835100, 35.183068, 190),orientation: Cesium.Quaternion.IDENTITY,box: {dimensions : new Cesium.Cartesian3(60.0, 30.0, 0.0),material: videoElement},});that.viewer.clock.onTick.addEventListener(function(clock) {var currentTime that.viewer.clock.currentTime;var currentOrientation entity.orientation.getValue(currentTime);if (Cesium.defined(currentOrientation) currentOrientation instanceof Cesium.Quaternion) {var newOrientation Cesium.Quaternion.clone(currentOrientation);// 应用旋转var rotationQuaternion Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(-90));var finalOrientation Cesium.Quaternion.multiply(newOrientation, rotationQuaternion, new Cesium.Quaternion());// 更新实体的 orientationbluePlane.orientation new Cesium.ConstantProperty(finalOrientation);} else {console.error(Orientation is not a valid Cesium.Quaternion);}})var property new Cesium.SampledPositionProperty();//存储坐标for (var ind 0; ind timesArr.length; ind) {var time Cesium.JulianDate.addSeconds(that.viewer.clock.currentTime,timesArr[ind],new Cesium.JulianDate());var position entity.position.getValue(time);if (position) {var cartographic Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);var lat Cesium.Math.toDegrees(cartographic.latitude);var lng Cesium.Math.toDegrees(cartographic.longitude);var hei cartographic.height / 1.9;property.addSample(time,Cesium.Cartesian3.fromDegrees(lng, lat, hei));}}bluePlane.position property;效果我很满意实现了我最初的思路视频和无人机保持相对静止状态同时飞行和调整朝向视频可以播放于是迫不及待地写入了项目。 阉割版视频投屏正式完成了Leader可以拿去交差了。 两个月后。。。 Leader找到我问我视频投放这块有什么突破性研究没有可不可以把之前看到的那个高品质效果做出来我给了他一个OK的手势。 我在来到这个公司之前是做军工项目的对于Cesium用的最多的就是军标绘制兵力单元的展示等静态方面的效果交互用的不多视椎体更是不了解。 在那次受挫之后我看了很多计算机图形学的文章搜罗了网上几乎所有对相机视椎体的介绍文章还从地理专业的高中同学以及考研的大学室友那里取了经自信已经可以试着把那个功能做出来了。 之前还遗留了个问题就是关于视椎体为什么会歪的答案我请教了Cesium中文网的作者他告诉我视椎体初始姿态会受到地理位置的影响需要手动矫正。后来我结识了很多Cesium爱好者互相分享技术探讨问题终于在某个Demo中拿到了矫正过的视椎体虽然方法被做过加密里面全是单个字母那种变量让人看的头晕但我还是将矫正方法给剥离了出来加入了我的视椎体中但很神奇的一点人家可以完美运行的方法到了我这就不断报错我逐行检查发现了几个NaN原来是计算过程中出现了不符合数学逻辑的东西由于没找到罪魁祸首我暂且在中间强行赋值跳过了几步让视椎体正常构建而不报错最后成功矫正了朝向但也留了个问题想要在视椎体构建完成之后再次改动朝向需要重新矫正视椎体我用的暴力矫正方法可没那么灵活。 不要想太多先把功能给实现再说细节方面可以慢慢来。 我重新构建了视椎体贴上视频计算出远截面四顶点相对位置构建平移矩阵移动位置构建旋转矩阵调整朝向很好都成功了接着加载CZML动画将视椎体的中心点给绑了上去视椎体其他部位都是根据中心点来自动调整的。 就在我满含期待之下纳尼视椎体不见了 就在CZML启动之后视椎体瞬移消失了我根本不知道它跑哪儿去了我询问了一些Cesium爱好者他们说可能是没有考虑缩放等属性导致视椎体变得很小或者处于隐身状态。 对此我毫无办法我的能力目前只到这里超出平移和旋转的知识还是两眼一抹黑我心想难到就止步于此了吗 不我可不是一个人我的背后还有一支完备的支援大军我有一个Cesium探讨扣扣群里面的个个都是人才说话又好听于是就将我的问题抛给了群友期待能从他们那里得到答案。 答案并没有如期拿到因为群里的老大哥不屑地告诉我视频投影群文件里早就上传的有你干嘛再自己做一个 于是我找到了那个源码如获至宝居然是封装完好的可以直接拿来用于是我就改变思路在这个封装方法的基础上继续完成我的无人机视频投放。封装的方法只到改变初始姿态这点后面的都要我自己加上但这对我而言完全不是问题很快我就看到了效果。
感谢群友的贡献功能真的很完美效果跟Leader相中的那个案例作品差不多。 视频投影源码是别人的成果我就不私自放了。