DeveloperError: normalized result is not a number (camera frustum change)

CesiumJS
1

I keep getting this error just by playing with a tileset’s visibility and the camera frustum.

After doing quite a bit of googling, this is not something I can figure out on my own.

  • The tileset looks a bit weird… this is normal.
  • I’ve set everything up so that I don’t see the globe.
  • Once loaded, simply change the perspective to orthographic (drop-down box) and the error shows up on the JS console.

Any help is appreciated.

I’ve pasted my Sandcastle code here:

the HTML:

<style>
  @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay">
  <h1>Loading...</h1>
</div>
<div id="toolbar">
  <table>
    <tbody>
      <tr>
        <td class="header">Controls</td>
      </tr>
      <tr>
        <td>Visibility</td>
        <td>          
          <select data-bind="options: visibilities, value: visibility"></select>
        </td>
      </tr>
      <tr>
        <td>Frustum</td>
        <td>          
          <select data-bind="options: frustums, value: frustum"></select>
        </td>
      </tr>
    </tbody>
  </table>
</div>

The JS:

// Grant CesiumJS access to your ion assets
const viewer = new Cesium.Viewer("cesiumContainer");
const camera = viewer.camera;
const scene = viewer.scene;

viewer.clock.shouldAnimate = true;
scene.screenSpaceCameraController.enableCollisionDetection = false;
scene.screenSpaceCameraController.enableTilt = true;
scene.globe.translucency.enabled = true;
scene.globe.translucency.frontFaceAlpha = 0;
scene.globe.translucency.backFaceAlpha = 1;

const trans = [0, 6378137, 0];
const rotat = [-1, 0, 0, 0, 0, 1, 0, 1, 0 ];

const tileset = viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(1495166),
    modelMatrix: Cesium.Matrix4.fromRotationTranslation(rotat, trans),
  })
);

(async () => {
  try {
    await tileset.readyPromise;
    await viewer.zoomTo(tileset);

    // Apply the default style if it exists
    const extras = tileset.asset.extras;
    tileset.style = new Cesium.Cesium3DTileStyle({"show":true,"color":"color('#ff0000', 1.00)"});
    
  } catch (error) {
    console.log(error);
  }
})();

const viewModel = {
  frustum: "Perspective",
  frustums: ["Perspective", "Orthographic"],
  visibility: "Visible",
  visibilities: ["Visible", "Hidden"],
};

Cesium.knockout.track(viewModel);

const toolbar = document.getElementById("toolbar");

Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout
  .getObservable(viewModel, "frustum")
  .subscribe(function (newValue) {
    if ( newValue === "Perspective" ) {
      camera.switchToPerspectiveFrustum();
      //.flyTo(tileset);
      camera.flyToBoundingSphere(tileset.boundingSphere);
    }
    else if ( newValue === "Orthographic" ) {
      camera.switchToOrthographicFrustum();
      //viewer.flyTo(tileset);
      camera.flyToBoundingSphere(tileset.boundingSphere);
    }
  });
Cesium.knockout
  .getObservable(viewModel, "visibility")
  .subscribe(function (newValue) {
    if ( newValue === "Visible" ) {
      tileset.style = new Cesium.Cesium3DTileStyle({"show":true,"color":"color('#ff0000', 1.00)"});
    }
    else if ( newValue === "Hidden" ) {
      camera.switchToOrthographicFrustum();
      tileset.style = new Cesium.Cesium3DTileStyle({"show":false,"color":"color('#ff0000', 1.00)"});
    }
  });