Difficulty aligning billboard with gltf model

CesiumJS
1

There’s probably an easy solution to this, but I’m having issues aligning the position of a billboard, Sphere, gltf model, and the camera. I suspect the issue is related to the rotation translation but I’m not familiar enough with the APIs or coordinate systems to find a solution.

The billboard and sphere are shown in one location, while the gltf model and the camera are in a second, despite all using the same coordinates. The former support separate modelMatrix and position attributes, while the latter have only the modelMatrix which presumably I am not constructing correctly. The coordinates of the billboard and spheres are based on the calculation functions from the NASA iSat Demo.

A stripped-down SandCastle test case is below. Any ideas on how to resolve this inconsistency so the sphere, camera, and model all converge on the same location?

thanks,

  • David

require([‘Cesium’], function(Cesium) {
“use strict”;

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var ellipsoid = scene.primitives.centralBody.ellipsoid;

function createSphere(inPos) {
    var pos = new Cesium.Cartesian3(inPos[0], inPos[1], inPos[2] );
    var modelMatrix = Cesium.Matrix4.fromRotationTranslation(
        Cesium.Transforms.computeTemeToPseudoFixedMatrix(viewer.clock.currentTime),
        Cesium.Cartesian3.ZERO
    );
    var myColor = Cesium.Color.fromCssColorString('#00ff00');
    myColor.alpha = 0.25;
    var sphere = new Cesium.EllipsoidPrimitive({
        center: pos,
        radii : new Cesium.Cartesian3(500000,500000,500000),
        material : new Cesium.Material({
            fabric : {
                type : 'Color',
                uniforms : {
                    color : myColor
                }
            }
        }),
        modelMatrix : modelMatrix
    });
    //scene.getPrimitives().add(sphere); // old API
    scene.primitives.add(sphere); // latest Cesium release
}

function createModel(url, inPos) {
    var modelMatrix = Cesium.Matrix4.fromRotationTranslation(
        Cesium.Transforms.computeTemeToPseudoFixedMatrix(
            viewer.clock.currentTime
        ),
        new Cesium.Cartesian3(inPos[0],inPos[1],inPos[2])
       );
   
    scene.primitives.removeAll(); // Remove previous model
    var model = scene.primitives.add(Cesium.Model.fromGltf({
        url : url,
        modelMatrix : modelMatrix,
        scale : 10000.0 // make sure its visible in space
    }));
   
    model.readyToRender.addEventListener(function(model) {
        console.log("Load complete");

        // Play and loop all animations at half-spead
        model.activeAnimations.addAll({
            speedup : 0.5,
            loop : Cesium.ModelAnimationLoop.REPEAT
        });

        // Zoom to model

        var worldBoundingSphere = model.computeWorldBoundingSphere();
        var center = worldBoundingSphere.center;
        var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
        var camera = scene.camera;
        camera.transform = transform;
        camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
        var controller = scene.screenSpaceCameraController;
        controller.ellipsoid = Cesium.Ellipsoid.UNIT_SPHERE;
        controller.enableTilt = false;
        var r = 1.25 * Math.max(worldBoundingSphere.radius, camera.frustum.near);
        controller.minimumZoomDistance = r * 0.25;
        camera.lookAt(new Cesium.Cartesian3(r, r, r), Cesium.Cartesian3.ZERO, Cesium.Cartesian3.UNIT_Z);

    });
}

///////////////////////////////////////////////////////////////////////////

var options = [{
    text : 'Aircraft',
    url : '../models/CesiumAir/Cesium_Air.json',
    height : 5000.0
}, {
    text : 'Ground vehicle',
    url : '../models/CesiumGround/Cesium_Ground.json'
}, {
    text : 'Skinned character',
    url : '../models/CesiumMan/Cesium_Man.json'
}];
var pos = [36404759.12967588,
           817743.7091004018,
           1290520.6872429529];

createModel(options[0].url, pos);
createSphere(pos);

// Now let's create a sphere and/or billboard

// Now let's try adjusting the camera

Sandcastle.finishedLoading();

});