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



  • 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!


Log in to reply