加载中…Cesium学习笔记11--模型加载
(2018-06-03 15:26:28)
标签：
cesium模型加载gltfobj2gltf三维模型 |
分类： Cesium |
在前面的博客中我们学习了cesium加载影像和地形。接下来我们将学习cesium加载三维模型。三维可视化的核心就是加载研究对象的三维模型，本篇博客我们就介绍cesium加载gltf格式的三维模型流程。主要分为两个过程：
var esri
= new Cesium.ArcGisMapServerImageryProvider({
url:
'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
enablePickFeatures:
false
});
var viewer =
new Cesium.Viewer('cesiumContainer', {
imageryProvider: esri,
contextOptions: {
webgl: {
alpha:
true
}
},
creditContainer:
"creditContainer",
selectionIndicator:
false,
animation:
false, //是否显示动画控件
baseLayerPicker: false,
//是否显示图层选择控件
geocoder: false,
//是否显示地名查找控件
timeline: false,
//是否显示时间线控件
sceneModePicker: true,
//是否显示投影方式控件
navigationHelpButton: false,
//是否显示帮助信息控件
infoBox:
false, //是否显示点击要素之后显示的信息
fullscreenButton: true
});
//取消双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
createModel('./sampledata/model/barrel.gltf', 0.0);
function
createModel(url, height) {
viewer.entities.removeAll();
var position =
Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706,
height);
var heading =
Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var hpr = new
Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation =
Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
var entity =
viewer.entities.add({
name: url,
position: position,
orientation: orientation,
model: {
uri:
url,
minimumPixelSize: 128,
maximumScale: 20000
}
});
viewer.trackedEntity =
entity;
}
1gltf转换工具
2cesium加载
1gltf转换工具
现今常用的三维建模工具（3d
max、maya、creator、sketch
up等等）都不支持gltf格式文件的直接导出，因此需要通过中间格式的转换。github上也提供了开源的转换工具：objTo3d-tiles。通过obj中间格式转换的。
经测试，该工具可以正常使用。在网上下载一个obj格式的模型：barrel.obj
使用命令：
2cesium加载
将转后文件拷贝到工程中，使用cesium的entity加载model接口：
整个代码：
工程git源码：github源码
我的学习公众号也开通，感兴趣的小伙伴们可以加关注：giserYZ2SS，代码交流小伙伴在公众号发消息，我会一一回复的。
喜欢
0
赠金笔