var viewer = new Cesium.Viewer('cesiumContainer');var entity = viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), model : { uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf' }});viewer.trackedEntity = entity; 我们将3D模型直接以实体的形式添加进去,效果很不错,这次我们换种形式var viewer = new Cesium.Viewer('cesiumContainer');var scene = viewer.scene;var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));var model = scene.primitives.add(Cesium.Model.fromGltf({ url : '../Apps/SampleData/models/CesiumGround/Cesium_Ground.gltf', modelMatrix : modelMatrix, minimumPixelSize : 512, maximumScale : 200000})); 你会发现这个模型却没有自带动画效果,让我们来给他加上动画Cesium.when(model.readyPromise).then(function(model) { model.activeAnimations.addAll({ //永久重复 loop : Cesium.ModelAnimationLoop.REPEAT });}); 这时候就有动画效果了,这个动画效果我们也是可以控制的,比如让它慢一点或者回放一遍model.activeAnimations.addAll({ loop : Cesium.ModelAnimationLoop.REPEAT, //这个半速是相对于Cesium的clock来说的 speedup : 0.5, reverse : true}); 那么这两种方法有什么区别呢?追溯一下源码可以发现,其实用实体(entities)创建的3D模型最终通过GeometryInstance转化成了primitives,也就是说两者根本上是一样的,不过用实体方式创建会更简单一点。顺带稍微查了下,用实体方式创建因为在用GeometryInstance会进行一个分类处理,能够充分利用GPU性能,所以在性能上还会更优化一些我们还可以精准的选择3D模型上的一个个小的部件//获得当前鼠标在模型上触碰位置的名字var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);handler.setInputAction( function (movement) { //当鼠标移动时获取移动的末位置 var pick = scene.pick(movement.endPosition); //简单来说就是这个点上有东西,那就打log if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) { console.log('node: ' + pick.node.name + '. mesh: ' + pick.mesh.name); } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); 可以看到控制台把每个部件的名字都打印出来了Cesium还为我们提供了一个检查器,我们可以通过这个检查器来查看我们模型的边界、轴坐标等,当前这个检查器的功能不止在3D模型上,还有拾取当前点的经纬度等其他功能viewer.extend(Cesium.viewerCesiumInspectorMixin); 只需要一行就可以开启点开primitives,pick我们这个模型就可以了我们还可以给模型改变一下属性var viewer = new Cesium.Viewer('cesiumContainer')var entity = viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), model : { uri : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf', //模型颜色,透明度 color : Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(0.5)), //轮廓线 silhouetteColor : Cesium.Color.fromAlpha(Cesium.Color.GREEN, parseFloat(0.5)), //模型样式['Highlight', 'Replace', 'Mix'] colorBlendMode : Cesium.ColorBlendMode.MIX, //colorBlendAmount需要选择mix后将colorBlendAmountEnabled设置为true才能使用 colorBlendAmountEnabled : true, colorBlendAmount : parseFloat(0.8) }});viewer.trackedEntity = entity; - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
|