3D模型(3D Models)

(1)快速入门(Quick start)

(2)动画(Animations)

(3)各取所需(Picking)

(4)转化COLLADA为glTF(Converting COLLADA to glTF)

(5)故障排除(Troubleshooting)

I Troubleshooting on Mac

II Troubleshooting on Windows

(6)资源(Resources)

3D模型(3D Models)

本章将介绍如何通过cesium原始API对3D Models进行转化、加载和使用。如果是刚开始学习Cesium，可以先跳到空间数据可视化章节

Cesium支持使用glTF的关键帧动画、皮肤和人体节点挑选，glTF是一种由科纳斯组织（WebGL与COLLADA的联合）新兴起来的工业级web 3D模型格式

(1)快速入门(Quick start)

Cesium可以使用一些现有的二进制glTF模型：

①螺旋桨转动的飞机；

②轮子转动的地面车辆；

③循环走步的人；

④热气球；

⑤一辆牛奶卡车（包括Draco-compressed牛奶卡车）。

这些模型都有各自的存放目录Apps/SampleData/models。大多数有原始的COLLADA文件（.dae），glTF文件（.gltf）或者二进制的glTF文件（.glb）。Cesium apps中原始的COLLADA文件不需要使用。

开始code代码加载这些模型，首先在沙堡（Sandcastle）中打开Hello World样例。在var viewer = ... 下面增加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 : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb',  modelMatrix : modelMatrix,  scale : 200.0
}));

点击F8，使用右上角的地理编码工具放大到Exton,PA。

先看到的是直视下的地面车辆。可以使用右点鼠标拖动放大靠近车辆，也可以使用鼠标中间键拖动斜视角观察车辆。

Cesium.Model.fromGltf异步加载glTF模型及模型外部文件，然后渲染完成加载，其内部已经解决了readyPromise。这里仅仅需要.gltf文件的url。

fromGltf中的scale选项可以放大模型。许多真实尺寸的模型可能比较小，在测试中可以使用scale选项来放大模型，有时会放的非常大，例如200000.0，如下所示：

通过modelMatrix的选项fromGltf可以定位和旋转模型。样例中创建了一个地方坐标系统的模型，使用Cesium.Transforms.eastNorthUpToFixedFrame创建了一个地方由东到北的坐标系，坐标原点为经度-75.62898254394531度，纬度40.02804946899414度。这里使用的modelMatrix属性可以随意移动改变模型。

通过在var viewer = ...后任何位置增加以下代码，使用Cesium观察员可以看到坐标系：

viewer.extend(Cesium.viewerCesiumInspectorMixin);

点击F8，观察UI出现在左上角。展开Primitives，点击Pick a Primitive,然后点击选中地面车辆，再点击show reference frame。

x轴（east东）是红色，y轴（north北）是绿色，z轴（up上）是蓝色。

使用相同的代码通过改变url，可以加载飞机和人。参考Cesium.Model.fromGltf查看详细内容。

(2)动画(Animations)

每个模型都有内置的动画，这些动画都是由artist设计。设计者们通过定义几个关键的姿势来创造一个动画，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提供了其它选项来控制动画的开始、停止、速度、方向等。例如下面的动画有相对于Cesium时钟一半的速度，而且是反方向。

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

add返回一个ModelAnimation对象（addAll返回对象数组），对象中包含动画的开始、停止及更新每一帧的事件。这样就允许启动一个相对于另一个的动画，可以查看开始、停止和更新事件。

动画和Cesium时钟是同步的，因此可以在回放部件按下时看到它们。也可以使用时间轴和回放部件来加快，降低和反转动画速度。

可以通过初始化Viewer来自动播放动画：

var viewer = new Cesium.Viewer('cesiumContainer', {  shouldAnimate : true
});

(3)各取所需(Picking)

像所有Cesium基本元素一样，Scene.pick将返回选中模型作为它一部分的模型。另外，glTF node和glTF mesh的glTF id（JSON属性名）也会返回，这样可以准确的选出不同模型的组成部分。如下示例可以在终端中打印出鼠标光标下的node和mesh名。

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

(4)转化COLLADA为glTF(Converting COLLADA to glTF)

使用web-based COLLADA-to-glTF converter将COLLADA模型转化为Cesium使用的glTF，这种方式把.dae文件和图像转化为带有嵌入图像的.glTF文件。

(5)故障排除(Troubleshooting)

如果在Cesium中加载3D模型有问题，首先需要查明问题所在。以下几点可能会出问题：

建模工具的COLLADA导出器，例如Maya、Modo、SketchUp等；
COLLADA-to-glTF转化器；
Cesium glTF渲染器。

I Troubleshooting on Mac

II Troubleshooting on Windows

Windows中，Visual Studio 2013（免费社区版也含有）有模型编辑器可以加载打开COLLADA模型文件。

(6)资源(Resources)

查看沙堡中的3D模型示例（3D models example）及模型（Model）和模型动画收集器（ModelAnimationCollection）的相关文档。

Cesium中文教程-3D模型(3D Models)相关推荐

Cesium中文教程－空间数据可视化Visualizing Spatial Data（二）
目录 (5)相机控制(Camera Controls) (6)管理实体(Managing Entities) 挑选Picking (7)点.广告牌.标签(Points,Billboards,and L ...
PCB电路板3D模型3D渲染思路
PCB电路板3D模型3D渲染思路首先看下效果图,如果不是你需要的效果,就可以不用看了工具第一步,截图得出AD里面的各个图层第二步,导出轮廓为矢量图第三步,处理线条第四步,导入各个层的矢量文 ...
Cesium中文教程－Cesium Workshop（一）
欢迎来到Cesium社区,非常高兴能加入我们.为了帮助您开发自己的web地图应用程序,本教程将从头到尾介绍如何开发一款简单但有广泛影响的Cesium应用程序.本教程将接触到许多CesiumJS API ...
opengl加载显示3D模型3d类型文件
opengl加载显示3d模型UC类型文件前置条件注意事项项目展示项目完整C++源代码前置条件 opengl三方库freeglut,显示3d格式的三维模型文件, 注意事项源代码 model_ ...
徐州数字孪生智能工厂3D模型,3d可视化工业建模,数字工厂智能车间建设
徐州数字孪生智能工厂3D模型,3d可视化工业建模,数字工厂智能车间建设.随着工厂车间的自动化和信息化建设,管理工厂车间的技术手段也要同步升级迭代,数字孪生工厂车间大屏可视化是利用数字孪生技术和三维可视 ...
php 3d模型,3D模型如何使用？总结3D模型实例用法
一.总述当代WebGL编程所使用的3D模型大多是从3DsMax模型或Blender模型转化而来,这种工作模式比较适合3D设计师和3D程序员分工配合的场景.但对于单兵作战的WebGL爱好者来讲这种模式 ...
android stl 3d模型,3D文件转化为STL文件 - 魔猴网
魔猴网免费在线3D文件转化工具常见问题 Q:什么是3D文件转化工具 A:3D文件转化工具是魔猴网针对3D打印文件推出的免费在线工具,可以将20多种常见的3D文件格式转化为可3D打印的文件格式,即stl ...
Cesium中文教程-影像图层(Imagery Layers)
目录快速开始(Quick start) 随时可用的影像(Ready-to-use imagery) 影像提供商(imagery providers) 跨域资源共享(Cross-origin reso ...
美术建模3D模型网站推荐
免费游戏引擎专用商店 Unity 商店:Unity Asset Store - The Best Assets for Game Making Unreal 商城:Marketplace - UE M ...

Cesium中文教程-3D模型(3D Models)

3D模型(3D Models)

(1)快速入门(Quick start)

(2)动画(Animations)

(3)各取所需(Picking)

(4)转化COLLADA为glTF(Converting COLLADA to glTF)

(5)故障排除(Troubleshooting)

I Troubleshooting on Mac

II Troubleshooting on Windows

(6)资源(Resources)

Cesium中文教程-3D模型(3D Models)相关推荐

最新文章

热门文章