no entity load using basic sample 3D Models.html

1. A concise explanation of the problem you're experiencing.

trying 3D Models.html, all is dysplayed except models and viewer.trackedEntity = entity; has no effect like I didn't code any entity

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

<!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 World!</title>
  <script src="stats.min.js"></script>
  <script src="../../../Cesium/Cesium.js"></script>
  <script src="../Sandcastle-header.js"></script>
  <script src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
  <script type="text/javascript">
      if(typeof require === 'function') {
          require.config({
              baseUrl : '../../../../Source',
              waitSeconds : 20
          });
      }
  </script>
  <style>
  @import url(../templates/bucket.css);

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

  body {
      padding: 0;
      margin: 0;
      overflow: hidden;
  }
  </style>
  </head>
  <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
  <div id="cesiumContainer" class="fullSize"></div>
  <div id="loadingOverlay">
      <h1>Loading...</h1>
  </div>
  <div id="toolbar"></div>
  <script id="cesium_sandcastle_script">

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkM2NlYjcwMy1hOTY4LTRiMTgtOWFhMy1hMjZmODA3ZDA3ZTUiLCJpZCI6NTQxMCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzI3NzIyM30.A8aH7PfgRMThMye_Y77_hfVnxhnGRKGFd_14oZC23pk';

function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer',{
shadows : true,
shouldAnimate : true,
terrainProvider : new Cesium.CesiumTerrainProvider({
        url: Cesium.IonResource.fromAssetId(1)
    })
});

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('../../../../Apps/SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);
    }
}];

Sandcastle.addToolbarMenu(options);

//Sandcastle_End
    Sandcastle.finishedLoading();
}
if (typeof Cesium !== 'undefined') {
    startup(Cesium);
} else if (typeof require === 'function') {
    require(['Cesium'], startup);
}

  </script>
  </body>
  </html>

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

4. The Cesium version you're using, your operating system and browser.

1. A concise explanation of the problem you're experiencing.

trying 3D Models.html, all is dysplayed except models and viewer.trackedEntity = entity; has no effect like I didn't code any entity

after many trying, I replaced the:

<script src="../../../Cesium/Cesium.js"></script>
by
<script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js&quot;&gt;&lt;/script&gt;

now traking entity is working but still no model dysplayed and message js: [object Object] appear on debug console

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

<!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 World!</title>
  <script src="stats.min.js"></script>
  <script src="../../../Cesium/Cesium.js"></script>
  <script src="../Sandcastle-header.js"></script>
  <script src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
  <script type="text/javascript">
      if(typeof require === 'function') {
          require.config({
              baseUrl : '../../../../Source',
              waitSeconds : 20
          });
      }
  </script>
  <style>
  @import url(../templates/bucket.css);

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

  body {
      padding: 0;
      margin: 0;
      overflow: hidden;
  }
  </style>
  </head>
  <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
  <div id="cesiumContainer" class="fullSize"></div>
  <div id="loadingOverlay">
      <h1>Loading...</h1>
  </div>
  <div id="toolbar"></div>
  <script id="cesium_sandcastle_script">

Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkM2NlYjcwMy1hOTY4LTRiMTgtOWFhMy1hMjZmODA3ZDA3ZTUiLCJpZCI6NTQxMCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzI3NzIyM30.A8aH7PfgRMThMye_Y77_hfVnxhnGRKGFd_14oZC23pk';

function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer',{
shadows : true,
shouldAnimate : true,
terrainProvider : new Cesium.CesiumTerrainProvider({
        url: Cesium.IonResource.fromAssetId(1)
    })
});

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('../../../../Apps/SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);
    }
}];

Sandcastle.addToolbarMenu(options);

//Sandcastle_End
    Sandcastle.finishedLoading();
}
if (typeof Cesium !== 'undefined') {
    startup(Cesium);
} else if (typeof require === 'function') {
    require(['Cesium'], startup);
}

  </script>
  </body>
  </html>

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

trying to add cesium in Qt 5.10 project

4. The Cesium version you're using, your operating system and browser.

1.51, Qt with QML webView

I think it looks like your paths are not setup correctly.

Make sure you read through the first setup section here:

ANd check out the “HelloWorld.html” which is the simplest Cesium app that should show you how to use the built version of Cesium and include it in your pages.

I think it looks like your paths are not setup correctly.

Make sure you read through the first setup section here:

https://cesiumjs.org/tutorials/Cesium-Workshop/

ANd check out the "HelloWorld.html" which is the simplest Cesium app that should show you how to use the built version of Cesium and include it in your pages.

On Wednesday, November 28, 2018 at 6:17:02 PM UTC-5, fili...@gmail.com wrote:Le mardi 27 novembre 2018 14:10:37 UTC+1, fili...@gmail.com a écrit :

> 1. A concise explanation of the problem you're experiencing.

>

> trying 3D Models.html, all is dysplayed except models and viewer.trackedEntity = entity; has no effect like I didn't code any entity

>

> after many trying, I replaced the:

<script src="../../../Cesium/Cesium.js"></script>

by

<script src="https://cesiumjs.org/releases/1.51/Build/Cesium/Cesium.js&quot;&gt;&lt;/script&gt;

now traking entity is working but still no model dysplayed and message js: [object Object] appear on debug console

>

>

> 2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

>

> <!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 World!</title>

> <script src="stats.min.js"></script>

> <script src="../../../Cesium/Cesium.js"></script>

> <script src="../Sandcastle-header.js"></script>

> <script src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>

> <script type="text/javascript">

> if(typeof require === 'function') {

> require.config({

> baseUrl : '../../../../Source',

> waitSeconds : 20

> });

> }

> </script>

> <style>

> @import url(../templates/bucket.css);

>

> #cesiumContainer {

> position: absolute;

> top: 0;

> left: 0;

> height: 100%;

> width: 100%;

> margin: 0;

> overflow: hidden;

> padding: 0;

> font-family: sans-serif;

> }

>

> body {

> padding: 0;

> margin: 0;

> overflow: hidden;

> }

> </style>

> </head>

> <body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">

> <div id="cesiumContainer" class="fullSize"></div>

> <div id="loadingOverlay">

> <h1>Loading...</h1>

> </div>

> <div id="toolbar"></div>

> <script id="cesium_sandcastle_script">

>

> Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkM2NlYjcwMy1hOTY4LTRiMTgtOWFhMy1hMjZmODA3ZDA3ZTUiLCJpZCI6NTQxMCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzI3NzIyM30.A8aH7PfgRMThMye_Y77_hfVnxhnGRKGFd_14oZC23pk';

>

> function startup(Cesium) {

> 'use strict';

> //Sandcastle_Begin

> var viewer = new Cesium.Viewer('cesiumContainer',{

> shadows : true,

> shouldAnimate : true,

> terrainProvider : new Cesium.CesiumTerrainProvider({

> url: Cesium.IonResource.fromAssetId(1)

> })

> });

>

> 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('../../../../Apps/SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);

> }

> }];

>

> Sandcastle.addToolbarMenu(options);

>

> //Sandcastle_End

> Sandcastle.finishedLoading();

> }

> if (typeof Cesium !== 'undefined') {

> startup(Cesium);

> } else if (typeof require === 'function') {

> require(['Cesium'], startup);

> }

>

> </script>

> </body>

> </html>

>

>

>

>

>

>

>

> 3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

>

> trying to add cesium in Qt 5.10 project

>

>

>

>

> 4. The Cesium version you're using, your operating system and browser.

1.51, Qt with QML webView

Hi, Omar, It has been my fist thinking but the path is correct...

For information, openning the HTML file in IE that working fine, the problem is only when open it in Qt with WebView

When you open an HTML file directly it has a different filepath than when you’re hosting it from a local server.

Does the Qt WebView give you any way to view the developer console? That would show you what errors you have and help you debug this.

Hello Omar, I don't have any other message than [Object object] in dev console.log.

I read that cesium doesn't accept path from locale then I did the solution using node.js and electron following

https://cesium.com/blog/2016/04/04/an-introduction-to-cesium-desktop-apps-with-electron/

but the only change is the message object desapear but the model still not visible and tracking doesn't work too with path
uri:'./node_modules/cesium/Apps/SampleData/models/CesiumAir/Cesium_Air/SampleData/models/CesiumAir/Cesium_Air.glb'

I found the solution!!

To load local file in Qt with webview, the html file have to be load with file:///+ full path like: file:///G:/cesium/Apps/Sandcastle/gallery/Viewer.html and not with qrc:/.

After that, we can use local path to load local files

Glad you figured it out, thanks for posting your solution!