Cesium (四) 3D模型

Myth丶恋晨 2022-07-20 18:58 346阅读 0赞

3D模型

我们可以转换、加载并且在Cesium中使用3D模型。Cesium支持glTF（一个新兴的Web 3D模型工业标准）格式的3D模型，并且提供在线的 COLLADA - glTF转换工具。Cesium针对3D模型支持关键帧动画、皮肤、单独节点选取等特性。

Cesium自带了三个模型：飞机、车辆、人。下面的例子载入一个车辆模型：

var scene = viewer.scene;
    //创建坐标
    var coord = Cesium.Cartesian3.fromDegrees( -75.62898254394531, 40.02804946899414, 0.0 );
    //创建一个东（X，红色）北（Y，绿色）上（Z，蓝色）的本地坐标系统
    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( coord );
    // 改变3D模型的模型矩阵，可以用于移动物体
    // 物体的世界坐标 = 物体的模型坐标 * 世界矩阵
    var model = scene.primitives.add( Cesium.Model.fromGltf( {//异步的加载模型
        url : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf',
        modelMatrix : modelMatrix, //模型矩阵
        scale : 200.0 //缩放
    } ) );

Cesium自带的3个模型已经内嵌了动画关键桢，如果需要播放动画，可以在调用Model.fromGltf后添加以下代码：

Cesium.when( model.readyPromise ).then( function( model )
    {
        model.activeAnimations.addAll( {//播放模型中全部动画，如果需要播放单个动画，可以调用add，传入动画id
            loop : Cesium.ModelAnimationLoop.REPEAT, //直到被移出activeAnimations，一直播放
             speedup : 0.5,  //加速播放
             reverse : true  //逆序播放
        } );
    } );

动画与Cesium的时钟系统同步化。

与其它Primitive一样，对3D模型的选取也是被支持的，当前点击的glTF node id、glTF mess一并被获取：

var handler = new Cesium.ScreenSpaceEventHandler( scene.canvas );
    handler.setInputAction( function( movement )
    {
        var pick = scene.pick( movement.endPosition );
        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 );