基于Cesium的单独三维模型浏览

最近一直在学习Cesium三维GIS框架，今天Cesium交流群中有好友问怎么样用Cesium来开发单独三维模型浏览功能，刚好在查找相关资料时，无意中看到官方的三维模型转gltf的页面，转换成功后会显示模型浏览效果。觉得应该可以解决这位好友的问题，于是查看页面源码，提出相关代码，建立页面，测试成功，鼠标控制模型缩放，720度视角查看.目前Cesium框架只支持gltf格式3D模型。

具体实现过程代码如下：

'use strict';

    var viewer;

    var scene;

window.onload = function() {

        viewer = new Cesium.Viewer('cesiumContainer', {

            animation: true,

            baseLayerPicker: false,

            timeline: true,

            geocoder: false,

            homeButton: false,

            sceneModePicker: false,

            navigationHelpButton: false,

            globe: false,

            skyAtmosphere: false,

            skyBox: false,

            fullscreenElement: 'cesiumContainer'

        });

        scene = viewer.scene;

        scene.backgroundColor = Cesium.Color.GRAY;//设置场景背景色

        scene.renderError.addEventListener(function() {

            //If a model fails to load, restart render loop.

            scene.primitives.removeAll();

            viewer.useDefaultRenderLoop = true;

        });

$(".cesium-viewer-animationContainer,.cesium-viewer-timelineContainer").hide();//隐藏时钟，时间轴控件

loadModelBlob("model/CesiumDrone.gltf");//加载3D模型

//添加动画

viewer.clock.shouldAnimate = true; // default 开启动画自动播放

viewer.clock.multiplier = 5;//动画播放速度

}

2.模型加载方法

function loadModelBlob(blob) {

scene.primitives.removeAll();

var origin = Cesium.Cartesian3.fromDegrees(0, 0, 10000);

var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, new Cesium.HeadingPitchRoll());

var model = scene.primitives.add(Cesium.Model.fromGltf({

url: blob,

modelMatrix: modelMatrix,

minimumPixelSize: 128

}));

model.readyPromise.then(function(model) {

model.activeAnimations.addAll({

speedup: 0.5,

loop: Cesium.ModelAnimationLoop.REPEAT

});

var camera = viewer.camera;

var heading = Cesium.Math.toRadians(230.0);

var pitch = Cesium.Math.toRadians(-20.0);

var range = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);

var controller = scene.screenSpaceCameraController;

controller.minimumZoomDistance = range * 0.5;

controller.maximumZoomDistance = range * 2;

var boundingSphere = Cesium.BoundingSphere.transform(model.boundingSphere, model.modelMatrix, new Cesium.BoundingSphere());

camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(heading, pitch, range));

}).otherwise(function(error) {

window.alert(error);

});

return model.readyPromise;

}