Cesium.js not load 3D model ?...

filipdns · wrote on 28 Nov 2018, 08:10

Hello,
I'm trying to load 3D model in Cesium with Qt but using the simple tuto of cesium, all Cesium.js is working fine but 3D model is not taking in account and I have no error message, then I don't know what I did wrong...

Viewer.html

/<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Create 3D models using glTF.">
    <meta name="cesium-sandcastle-labels" content="Tutorials,Showcases">
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../CesiumUnminified/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.51/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script type="text/javascript">
        if(typeof require === 'function') {
            require.config({
                baseUrl : '../../../../Source',
                waitSeconds : 120
            });
        }
    </script>
</head>
<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
<style>
    @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">


function startup(Cesium) {
    'use strict';
//Sandcastle_Begin
var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox : false,
    selectionIndicator : false,
    shadows : true,
    shouldAnimate : 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/GroundVehicle/GroundVehicle.glb', 0);
    }
}, {
    text : 'Hot Air Balloon',
    onselect : function() {
        createModel('../../SampleData/models/CesiumBalloon/CesiumBalloon.glb', 1000.0);
    }
}, {
    text : 'Milk Truck',
    onselect : function() {
        createModel('../../../../Apps/SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb', 0);
    }
}, {
    text : 'Skinned Character',
    onselect : function() {
        createModel('../../../../Apps/SampleData/models/CesiumMan/Cesium_Man.glb', 0);
    }
}, {
    text : 'Draco Compressed Model',
    onselect : function() {
        createModel('../../../../Apps/SampleData/models/DracoCompressed/CesiumMilkTruck.gltf', 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>

main.cpp

#include <QApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include <QSurfaceFormat>
#include <qtwebengineglobal.h>
//#include "httpwindow.h"

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);
    QSurfaceFormat format;
    format.setDepthBufferSize(24);
    QSurfaceFormat::setDefaultFormat(format);
    //HttpWindow httpget;
    QtWebEngine::initialize();
    QQmlApplicationEngine engine;
    //engine.rootContext()->setContextProperty("flightRadar", &httpget);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    return app.exec();
}

main.qml

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Dialogs 1.1
import QtDataVisualization 1.2
import QtQuick 2.2 as QQ2
import Qt3D.Core 2.0
import Qt3D.Render 2.9
import Qt3D.Input 2.0
import Qt3D.Extras 2.9
import QtQuick.Window 2.2
import QtQuick.Scene3D 2.0
import QtGraphicalEffects 1.0
import QtQuick.Particles 2.0
import "parser.js" as JS
import QtPositioning 5.5
import QtLocation 5.6
import QtWebView 1.1

ApplicationWindow {
    visible: true
    visibility:"Maximized"
    property int value:0
    property int minute:0
    property int seconde:0


   Rectangle {
        id: content
        width:parent.width/2
        height:parent.height
        anchors.right:parent.right
        color: "black"

        WebView {
            id: webView
            anchors.fill: parent
            url: "qrc:/3Dglobe/Build/Apps/Sandcastle/gallery/Viewer.html"
        }
    }
}

Thank you very much for you help!