Running the 3d Model code sample in sandcastle


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 (Sandcastle-header.js:57)

I attached image from error message,

This code is code from 3d model in sandcastle:

<!DOCTYPE html>
<html lang="en">
  <!-- 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>
    @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;
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox : false,
    selectionIndicator : false,
    shadows : true

function createModel(url, height) {

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





The example you posted runs fine on our website:

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




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,



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.