error using flyToBoundingSphere, but can use lookAt correctly, please help spot the problem

CesiumJS
1

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

I am using a cesium Widget and want to use the flyToBoundingSphere, but the view goes to a strange location instead

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
var viewer = new Cesium.CesiumWidget('cesiumContainer', {
    skyAtmosphere: false,
    shouldAnimate : true,
    terrainProvider: Cesium.createWorldTerrain()
});

var position = Cesium.Cartesian3.fromRadians(-2.0862979473351286, 0.6586620013036164, 1400.0);
var hpRoll = new Cesium.HeadingPitchRoll();
var hpRange = new Cesium.HeadingPitchRange();
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('east', 'north');
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform);
var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
        url : '../../../../Apps/SampleData/models/CesiumMan/Cesium_Man.glb',
        modelMatrix: modelMatrix,
        scale: 100.0,
    }));

model.readyPromise.then(function(m){
// this does not work correctly
   viewer.camera.flyToBoundingSphere(model.boundingSphere);
   
});

// I can successfully do the following, but I won't necessarily have position
1. viewer.scene.camera.flyTo({
        destination: position
    });

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

my actual need is to fly to the location where I can set up heading, pitch, range or heading, pitch, roll, like the following code which works
var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
    //viewer.scene.camera.lookAt(center, new Cesium.HeadingPitchRange(0, 0, model.boundingSphere.radius*2.5));

4. The Cesium version you're using, your operating system and browser.
Cesium version: 1.43
OS - windows 10, chrome 66, updated latest

2

Sandcastle link: https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/#c=fVRtT9swEP4rUb80nTInfSGUUtAKG92HoSGKxJdIk5tcGgvHjmyn0E38953zUlLoFlWqfb577u7xc95S5WwZPINyLhwBz841aFbmpP57ZMkGjNuPq921FIYyAarvOX8i4eCnn3YLk0tdZKBg5qSUa/Cao0yWPFkIllMDzswxqmyPDCiFQHdKblkCatYmjRWg76NUPHmoXdxBJF4H55GIxBYrLaRmhkmBtbZ1UmVwRcWYpErm9zTBtXY/j0gwDUdnp2eT0/H4ZDiahp4TkPBkGoajIBiOg3E4DCeeM5wEAQlsBoufFfeS80MmvgNiis0dM3FmT92OMxUb+I+3Pd67p+wFkhtFc3hQWGIqVf7Wxt6kCZcx5bWfvNnHLAF5p0Yqtw9UG7yBvpDKZP0WPpcJ8FtqFHs5Cpu9a6ML7ra8eg0DXgvwjXNWaMkS8rhcTZGvI10cVIC5azkRHWPJpFAsR+gtaEKTxG1gb61rdWFLblK3EZP9SsVRK31C/P1vURTaX9G84PCVGupXebRfQ91S0ax+4ZJs+LrvvaF1SJl1Nx0XjWyjcodWBo35dVArrgogqMlkh1LNmQZiMhBuWorYsuXmg7py32+bjpEYRUnKdw/ySpbCUr6qhsOt0dYHxsG5zVdn9X1LIpJmqllsmarqnZC85IYVfHe1u5NMmAat25JzLAGp8byD0d6PjFs12iTv3lrTBpfyaWHcIxgfZR7gfP2jBoW+pf40Iif7fMeyVaR1tZCANkxQS/VsP/rtFZ1XD0PP68212XG4rO1fWF7gWFgZuSgdA6gafFK0vy7jJzAk1tpGzv02aJ6wrcOSi6j37o2Lek7MqdZ4kpacr9hviHqXcx/9D8K4rJj4uQXF6c66ZMPLH7WREDL3cfsxykjJ11R1EP8C

3

I have been able to figure out this solution, let me know if I missed something:
essentially don't use the model.boundingSphere directly, create a new one

model.readyPromise.then(function(m){
    var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
    var boundingSphere = new Cesium.BoundingSphere(center, model.boundingSphere.radius);
    var offset = new Cesium.HeadingPitchRange(0, 0, model.boundingSphere.radius* 2.5);
    viewer.camera.flyToBoundingSphere(boundingSphere, {offset: offset});
      
});

{ it seems to work }

4

Glad you solved it, that solution looks good to me!