Running the 3d Model code sample in sandcastle

Hello,

Please help me,

I'm using the 3d Model code sample in sandcastle but it not run correctly. I runs but don't search for 3d models.

In this line there is error(line 40): var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

Error description:

Uncaught TypeError: Cesium.HeadingPitchRoll is not a constructor
    at createModel (3D%20Models2.html:40)
    at Object.onselect (3D%20Models2.html:64)
    at HTMLSelectElement.menu.onchange (Sandcastle-header.js:57)

I attached image from error message,

This code is code from 3d model in sandcastle:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>3d models</title>
  <script type="text/javascript" src="../Sandcastle-header.js"></script>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
    @import url(../templates/bucket.css);
    @import url(../Build/Cesium/Widgets/widgets.css);
  html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      
</style>
  
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
  <script>
var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox : false,
    selectionIndicator : false,
    shadows : true
});

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

var options = [{
    text : 'Aircraft',
    onselect : function() {
        createModel('../../SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);
    }
}, {
    text : 'Ground vehicle',
    onselect : function() {
        createModel('../../SampleData/models/CesiumGround/Cesium_Ground.glb', 0);
    }
}, {
    text : 'Hot Air Balloon',
    onselect : function() {
        createModel('../../SampleData/models/CesiumBalloon/CesiumBalloon.glb', 1000.0);
    }
}, {
    text : 'Milk truck',
    onselect : function() {
        createModel('../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb', 0);
    }
}, {
    text : 'Skinned character',
    onselect : function() {
        createModel('../../SampleData/models/CesiumMan/Cesium_Man.glb', 0);
    }
}];

Sandcastle.addToolbarMenu(options);

  </script>

</body>
</html>

Hello,

The example you posted runs fine on our website: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=3D%20Models.html&label=Showcases

What version of Cesium are you using? Have you tried clearing your cookies/cache? Sometimes that can have unusual side effects.

Best,

Hannah

Hello,

Do you tried to run my code that i sent for you?

I’m use a version 1.21.

I don’t know how to clear cookies/cache,

Best,

Sabah

The code isn’t working because you are using an old version of Cesium and the HeadingPitchRoll class isn’t defined. Please update to the latest version and the example should work.

-Hannah