Cesium官⽅教程7--三维模型
原⽂地址：
三维模型（3D Models）
这篇教程给⼤家介绍，如何在Cesium中通过Primitive API来转换、加载、使⽤三维模型。如果你是新⼿，建议你先看下这篇的三维模型部分。
Cesium⽀持包含关键帧（key-frame）动画、⾻骼（skinning）动画的glTF格式的三维模型，并且⽀持模型节点（node）的拾取。是Khronos Group 定义的⼀个基于web上的新兴三维模型格式⾏业标准。Khronos Group是WebGL和的背后财团。Cesium提供了⼀个，可以把COLLADA(.dae)模型转换为专为Cesium优化的glTF格式。
快速开始
Cesium内置了⼀些随时可⽤的glTF模型：
带螺旋桨动画的飞机模型
带轮⼦动画的汽车模型
带⾏⾛⾻骼动画的⼈物模型
热⽓球模型
⽜奶卡车
飞机
汽车
⼈物
⽜奶车
这些模型都在Apps/SampleData/models⽬录下有各⾃的存放⽬录。⼀部分还包含⼀个COLLADA (.dae)格式的源⽂件（Cesium中不需要），⼀个glTF格式(.gltf)、⼀个⼆进制glTF格式 (.glb)。
下来我们写⽰例代码. 打开Sandcastle ⽰例。在var viewer = ...之后第4⾏，增加⼀个scene变量。
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/GroundVehicle/GroundVehicle.glb',
modelMatrix : modelMatrix,
scale : 200.0chrome浏览器官方
}));
按F8运⾏，使⽤右上⾓的位置查询⼯具，定位到 Exton, PA。
地理位置查询定位
现在我们垂直俯视观察这个汽车了。使⽤⿏标右键拉近⼀点，然后⿏标中键按下旋转视⾓放平⼀点。
拉近视⾓
Cesium.Model.fromGltf⽅法异步载⼊了glTF 以及它的⼀些外部资源⽂件，完全载⼊（响应了）之后进⾏了渲染。只需要gltf⽂件的url路径，⽰例中就是这个../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb。
fromGltf有个可选的参数scale可以⽤来放⼤缩⼩模型。很多实际⼤⼩的模型都相对地球来说太⼩了，为了测试可以⽤scale把模型放⼤⼀些，有时候甚⾄可以⾮常⼤，⽐如200000.0：
放⼤模型
fromGltf也可以设置⼀个modelMatrix去放置或者旋转模型。这个参数会⽤来创建模型的局部坐标系。我们这⾥使⽤了去创建了⼀个以经纬度（-75.62898254394531，40.02804946899414）为原点的enu（east-north-up ）局部坐标系。为了移动模型，可以随时修改模型的属性。
为了能看见坐标系统，使⽤Cesium的调试⼯具，在第4⾏的var viewer = ...之后添加如下代码：
按F8运⾏，调试⼯具已经显⽰在右上⾓了。展开Primitives⾯板，点击Pick a Primitive，然后在场景中点击汽车模型，然后勾选show reference frame。
参考坐标系
这⾥x轴（正东向）是红⾊的，y轴（正北向）是绿⾊的，z轴（垂直向上）是蓝⾊的。
如果加载飞机或者⼈物的模型，那么只需要修改代码⾥的url参数为'../../../../Apps/SampleData/models/CesiumAir/Cesium_Air.glb'或
者'../../../../Apps/SampleData/models/CesiumMan/Cesium_Man.glb'。完整的配置参数查看⽤户⼿册。
动画
上⾯的模型都⾃带了模型数据制作者内置的关键帧动画，数据制作者定义了⼀些关键位置的模型姿态，Cesium会实时插值做变换展⽰⼀个平滑的动画效果。为了能播放动画，在Cesium.Model.fromGltf调⽤后，添加下⾯的代码：
Cesium.adyPromise).then(function(model) {
model.activeAnimations.addAll({
loop : Cesium.ModelAnimationLoop.REPEAT
});
});
因为动画也是存储在glTF模型⾥，所以需要等待readyPromise执⾏后才能访问他们。⽅法调⽤后播放模型的所有动画。参数设置后，会⼀直循环播放动画，直到activeAnimations集合⾥删除了对应的动画。如果要播放某⼀个特定动画，那么使⽤⽅法，传⼀个动画id (glTF⽂件内部定义的)。
除了loop选项，addAll和add函数提供了⼀些列的参数选项，⽤来控制动画的开始、结束、播放速度，以及播放⽅向。⽐如下⾯的代码设定动画逆向按照半速（相对Cesium时钟）播放:
model.activeAnimations.addAll({
loop : Cesium.ModelAnimationLoop.REPEAT,
speedup : 0.5,
reverse : true
});
add函数返回⼀个类实例 (addAll返回⼀个该类的实例数组), 这个类包含了动画的开始、停⽌、每帧更新的事件。⽐如可以⽤来控制⼀个动画在另⼀个结束后开始播放。具体查看 , , 和事件.
动画是和Cesium时钟同步的，所以可以在动画播放控件上按下播放按钮控制它。也可以通过该控件和时间线的加速、减速、逆向播放功能来控制动画的状态。
时间线(Timeline)
为了让场景中的动画⾃动播放，可以⽤下⾯的代码来初始化Viewer：
var viewer = new Cesium.Viewer('cesiumContainer', {
shouldAnimate : true
});
拾取
和Cesium的所有图元⼀样, 如果模型被选中了，那么的返回值将包括类的实例。同时，glTF中的节点（node）id 和三⾓⽹（mesh）id 也会被返回。⽤这个可以判定精确的模型点击部位。下⾯的代码在控制台输出了⿏标所在位置对应的glTF模型中的节点和三⾓⽹。
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(
function (movement) {
var pick = scene.dPosition);
if (Cesium.defined(pick) && Cesium.de) && sh)) {
console.log('node: ' + de.name + '. mesh: ' + sh.name);
}
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE
);
把 COLLADA（dae）转 glTF
可以使⽤Cesium的. 把.dae和图⽚⽂件转为⼀个内嵌图⽚资源的.gltf⽂件。
问题
如果Cesium加载三维模型有问题，那么⾸先定位问题出现在哪个阶段：
Max，Maya, Modo, SketchUp 等建模⼯具的 COLLADA 导出器有没有问题
COLLADA-to-glTF转换⼯具有没有问题
Cesium glTF 渲染代码有没有问题
Mac 上解决问题
在Mac系统上，判定⼀个COLLADA ⽂件是否导出正常，双击.dae⽂件，它应该会显⽰在预览窗⼝上。如果模型带动画，那么⿏标移动到这个窗⼝上会显⽰⼀个动画控制的⼯具栏。
Mac 模型预览窗⼝
如果COLLADA ⽂件有问题，那么预览界⾯会提⽰错误。这⼀般是由于建模⼯具的导出器有bug。
模型预览错误
为了解决这个问题，安装，然后右键单机这个.dae⽂件，选择Open With -> Xcode。
Xcode 打开
Xcode 如同预览窗⼝⼀样显⽰模型，但是它有更多额外功能，⽐如选择⼀个独⽴的节点。Xcode实际上对于预览窗⼝上显⽰不了的dae有很多解决办法。如果模型可以在Xcode 中加载，那么选择File - Save保存⼀下就能解决问题，这时候预览就没有问题了。
Xcode中展⽰
如果还是⽆法预览，那就是COLLADA 导出器有严重问题了。⾸先确认你使⽤的最新版的建模⼯具，然后试下。如果还不能解决，那么给建模⼯具提bug去吧。也可以试下先导出.fbx格式，然后在其他⼯具中导⼊fbx，再导出dae。
Windows 上解决问题
Windows上，VS2013（包括免费的)包含⼀个模型编辑器，他可以加载COLLADA模型。判断⼀个COLLADA⽂件是否导出正常，把.dae⽂件拖拽到VS窗⼝⾥，如果正常显⽰，就是正常的。否则，可能有⼀些bug。试下。果还不能解决，那么给建模⼯具提bug去吧。也可以试下先导出.fbx格式，然后在其他⼯具中导⼊fbx，再导出dae。
Visual Studio
如果你没有Visual Studio，Autodesk 提供了⼀个基于WebGL的。可以把模型拖拽进去，⽆需登陆就能测试。但是这个⼯具不⽀持动画，如果模型包含图⽚，那么上传⼀个zip压缩包，把dae和图⽚都打进去。
Cesium 上解决问题
COLLADA ⽂件准备好之后，那么使⽤[在线⼯具 ] ()转下格式再在Cesium中加载。如果没于加载成功，那么说明这个转换⼯具或者Cesium 有bug。为了获取更多信息，打开浏览器的调试⼯具 (Chrome快捷键Ctrl-Shift-I ) ，并且选中Pause on all exceptions (Chrome在Sources⾯板⾥ )，然后刷新页⾯.
Pause On All Exceptions
也可以在上发⼀个帖⼦，我们修正bug后会提供⼀个解决⽅法。如果你发帖⼦，请包含下⾯内容：
COLLADA 源⽂件和转换后的 glTF⽂件。我们也知道不是所有⼈都愿意共享它的模型数据，但是如果你共享了，那么对于解决问题很有帮助。
当模型加载的时候浏览器控制台窗⼝输出的所有异常信息。
控制台异常
其他资源
再看下Sandcastle 中。类和类的官⽅⽂档。
中国最专业的Cesium开发者社区

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。