3D模型

本教程将教您如何通过Primitive API在Cesium中转换，加载和使用3D模型。如果您对Cesium不熟悉，则可能需要查看Visualizing Spatial Data教程的3D模型部分。我们计划更新此帖子以尽快使用较新的实体API。

Cesium支持3D模型，包括关键帧动画，蒙皮，以及个别节点选取，使用glTF，一种新兴的行业标准格式，用于WebGL和COLLADA背后的Khronos集团网站上的3D模型。Cesium还提供了一个基于网络的工具，可将COLLADA模型转换为glTF，以便与Cesium优化配合使用。

快速开始

铯包括一些现成可用的glTF型号：带有动画螺旋桨的飞机，带动画轮子的地面车辆以及带有剥皮步行循环的角色。

这些模型每个都有自己的目录Apps/Sandcastle/models。每个都有原始的COLLADA文件（.dae）和glTF文件（.gltf）。在Cesium应用程序中不需要原始的COLLADA文件。

我们编写代码来加载这些模型。在Sandcastle中打开Hello World示例。在var viewer = ...第4行下，添加一个scene变量。

var scene = viewer.scene;

接下来，Cesium.Model.fromGltf通过添加以下代码来加载地面车辆模型。

var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
    Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
    url : '../../SampleData/models/CesiumGround/Cesium_Ground.gltf',
    modelMatrix : modelMatrix,
    scale : 200.0
}));

点击F8，然后使用右上角的地理编码器工具缩放到宾夕法尼亚州埃克斯顿。

我们现在正在直视地面车辆。我们可以通过鼠标右键拖动来放大距离，并用鼠标中键拖动来拖动视图。

Cesium.Model.fromGltf异步加载glTF模型（包括其外部文件），并在完全加载后呈现它，从而解决该问题readyPromise。只需要.gltf文件的URL即可../../SampleData/models/CesiumGround/Cesium_Ground.gltf，本例中就是 这样。

scale还提供了一个可选项fromGltf来放大模型。许多真实模型可能很小，所以它可以帮助scale在首次测试模型时使用较大的模型，甚至是非常大的模型200000.0。例如：

modelMatrix还提供了A fromGltf来定位和旋转模型。这为模型创建了一个局部坐标系。此处Cesium.Transforms.eastNorthUpToFixedFrame用于创建一个具有-75.62898254394531经度和40.02804946899414纬度原点的局部东 – 北向上坐标系。模型的modelMatrix属性可以随时更改以移动模型。

要可视化坐标系，请通过var viewer = ...在第4 行上的任意位置添加以下代码行来使用Cesium检查器。

viewer.extend(Cesium.viewerCesiumInspectorMixin);

嗨F8，现在检查器用户界面显示在左上角。展开Primitives，点击Pick a Primitive，点击地面车辆模型，然后检查show reference frame。

这里，x轴（东）是红色的，y轴（北）是绿色，z（上）是蓝色。

我们可以使用相同的代码来分别载入飞机或角色模型，只需更改url传递fromGltf给'../../SampleData/models/CesiumAir/Cesium_Air.gltf'或'../../SampleData/models/CesiumMan/Cesium_Man.gltf'。有关其Cesium.Model.fromGltf所有选项，请参阅参考文档。

动画

这些模型中的每个模型都有内置的动画，这些动画是由艺术家进行关键帧构建的，即艺术家通过定义几个关键姿势来创建动画，Cesium在运行时插入以创建平滑动画。

要播放动画，请在调用后添加以下代码Cesium.Model.fromGltf。

Cesium.when(model.readyPromise).then(function(model) {
    model.activeAnimations.addAll({
        loop : Cesium.ModelAnimationLoop.REPEAT
    });
});

由于动画存储在glTF模型中，我们需要等待readyPromise解析才能访问它们。 addAll用于播放模型中的所有动画。 Cesium.ModelAnimationLoop.REPEAT循环播放动画直到它从activeAnimations集合中移除。要播放特定的动画，请add改为使用，并提供动画的id（glTF JSON属性名称）。

动画与铯钟同步，因此增加或减少时钟速度或使用时间轴和回放小部件反转方向也会影响模型动画。

除了loop选项外，addAll还add提供了许多选项来控制动画何时开始和停止，速度以及方向。例如，下面的动画以半速（相对于铯钟）并相反。

model.activeAnimations.addAll({
    loop : Cesium.ModelAnimationLoop.REPEAT,
    speedup : 0.5,
    reverse : true
});

add返回一个ModelAnimation对象（addAll返回这些对象的数组），该对象包含动画启动，停止和更新每个帧时的事件。这允许例如相对于另一个开始一个动画。查看启动，停止和更新事件。

选择

和所有的Cesium原语一样，如果选择了模型，Scene.pick将会返回一个Model结果的一部分。另外，还返回glTF节点和glTF网格的glTF id（JSON属性名称），以便精确选取不同的模型零件。以下示例显示控制台窗口中鼠标光标下的节点和网格名称。

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
);

将COLLADA转换为glTF

要将COLLADA模型转换为glTF以与Cesium一起使用，请使用基于Web的COLLADA-to-glTF转换器。这会将.dae文件和图像转换为.gltf嵌入图像的文件。

故障排除

如果在Cesium中加载3D模型时出现问题，请首先确定问题所在。这将是在英寸

• 建模工具的COLLADA出口商，例如Maya，Modo，SketchUp等
• COLLADA-to-glTF转换器，或者
• 铯glTF渲染器。

在Mac上排除故障

在Mac上，要确定COLLADA文件是否已正确导出，请双击该.dae文件，该文件应显示在“预览”窗口中。如果模型具有动画，将鼠标悬停在窗口底部将弹出一个工具栏来播放它们。

如果COLLADA文件无效，则预览将显示错误。这通常表明COLLADA出口商有一个用于创建COLLADA文件的错误。

要尝试解决此问题，请安装Xcode，然后右键单击该.dae文件并选择Open With -> Xcode。

Xcode显示类似于预览的模型，但具有更多功能，如选择单个节点的功能。Xcode还为无效的COLLADA文件实施了许多解决方法，所以它通常可以加载预览不能的COLLADA文件。如果模型在Xcode中加载，请选择File - Save使用变通方法保存模型，然后应该在预览确定中加载模型。

如果它仍然无法在预览中加载，那么COLLADA出口商存在问题。确保你有最新版本的建模工具，并尝试在这篇文章中的提示。如果它仍然不起作用，请将错误提交给建模工具（而不是Cesium）。它也可能值得尝试导出为.fbx其他格式，然后导入另一个建模工具与更好的COLLADA出口商。

Windows上的故障排除

在Windows上，Visual Studio 2013（包括免费的Community Edition）具有可以加载COLLADA模型的模型编辑器。要确定COLLADA文件是否正确导出，请将该.dae文件拖放到Visual Studio中，并加载它。如果没有，这通常表示COLLADA出口商用于创建COLLADA文件的错误。确保你有最新版本的建模工具，并尝试在这篇文章中的提示。如果它仍然不起作用，请将错误提交给建模工具（而不是Cesium）。它也值得尝试导出为.fbx其他格式，然后导入另一个具有更好COLLADA出口商的建模工具。

如果您没有Visual Studio，Autodesk具有一个WebGL 查看器，该查看器允许拖放操作并且不需要登录。观众不支持动画。如果模型具有图像，请上传带有.dae和图像文件的zip文件。

疑难解答铯

一旦我们有了一个有效的COLLADA文件，就可以通过COLLADA-to-glTF 转换器运行它，然后尝试在Cesium 中加载它。如果它不在铯中加载或者显示不正确，则转换器或铯中存在一个错误。要获得更多详细信息，请打开浏览器的开发人员工具（Chrome中的Ctrl-Shift-I）并启用Pause on all exceptions（Sources在Chrome 中的选项卡中），然后重新加载Cesium应用程序。

发布消息给Cesium论坛，我们经常可以提供解决方法，直到有修复程序可用。在你的文章中，请包括：

• 原始的COLLADA和转换后的glTF文件。我们认识到，不是每个人都可以分享他们的模型，但是如果可以的话，它会大大提高我们的帮助能力。
• 浏览器的控制台窗口以及加载模型时引发的所有异常，例如

资源

查看Sandcastle中的3D模型示例以及Model和ModelAnimationCollection的参考文档。