load gltf model in cesium.js

Question

I am trying to load .gltf model file in cesium. I followed the instruction on http://cesiumjs.org/2014/03/03/Cesium-3D-Models-Tutorial/ 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">
<head>
  <!-- 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>
  <style>
      @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%;
      }
  </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
    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
    }));
</script>
</body>
</html>

What do you mean by it is not working? Do you get any errors, is it rendered weirdly ? — LJᛃ

Matthew Amato Matthew Amato · Accepted Answer · 2014-12-15T03:19:53

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.

model.readyToRender.addEventListener(function(){
    var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
    var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
    var camera = scene.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);
});

load gltf model in cesium.js

1 Answers