360SDN.COM

首页/GIS/列表

Cesium学习笔记(五):3D 模型

来源:  2018-07-04 11:23:34    评论:0点击:

Cesium支持3D模型,包括关键帧动画,皮肤的改变还有单个节点的选择等,Cesium还提供了了一个基于网络的工具,将COLLADA模型转换为glTF,方便和优化模型添加

 还记得我们在实体添加的时候添加过一个3D模型么,具体是这样的


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;

这里写图片描述

如果你想导入自定义的3D模型, 可以使用obj转gltf工具或者dae转gltf工具进行转化, 要记得带贴图哦, 不然转出来就是白的了,详细见第九节导入3D模型. 官网上也是有提供的, 戳这里, 不过网页版的只能转10m以下的, 而且速度也不行,还是考虑github上的工具吧

参考资料:官方文档


来源:https://blog.csdn.net/UmGsoil/article/details/74572877


 
	  	
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权