meen meen - 1 year ago 266
Javascript Question

load gltf model in cesium.js

I am trying to load .gltf model file in cesium. I followed the instruction on to get this done. But it is not working. Am I missing anythis here? Any help is appreciated. Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello Me!!!</title>
<script src="../Build/Cesium/Cesium.js"></script>
@import url(../Build/Cesium/Widgets/widgets.css);

#cesiumContainer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
font-family: sans-serif;

html {
height: 100%;

body {
padding: 0;
margin: 0;
overflow: hidden;
height: 100%;
<div id="cesiumContainer"></div>
var viewer = new Cesium.Viewer('cesiumContainer', {
animation : false,
homeButton : false,
baseLayerPicker : false,
infoBox : false,
sceneModePicker : false,
timeline : false,
navigationInstructionsInitiallyVisible : false,
navigationHelpButton : false,
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 : 'sample.gltf',
modelMatrix : modelMatrix,
scale : 200.0

Answer Source

Most likely, you're model is loading fine, but even at a scale of 200, it's too small to see from space, you can add the following block of code to the end of the file to zoom to the model once it's loaded.

    var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix,, new Cesium.Cartesian3());
    var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
    var camera =;
    camera.transform = transform;
    var controller = scene.screenSpaceCameraController;
    var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
    controller.minimumZoomDistance = r * 0.5;
    camera.lookAt(new Cesium.Cartesian3(r, r, r), Cesium.Cartesian3.ZERO, Cesium.Cartesian3.UNIT_Z);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download