Good Morning Cesium,
Recently we changed our frontend tooling from webpack to vite. Ever since doing so, we seem to have broken Zoom when we try to set the reference frame to Earth Centered Inertial. The line of code causing the problem is here:
map.scene.postUpdate.addEventListener(cameraTrackEci);
Here’s the function being called:
const cameraTrackEci = (scene, time) => {
if (scene.mode !== Cesium.SceneMode.SCENE3D) {
return;
}
const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
if (Cesium.defined(icrfToFixed)) {
const { camera } = scene;
const offset = Cesium.Cartesian3.clone(camera.position);
const transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
camera.lookAtTransform(transform, offset);
}
};
It seems like the camera isn’t aware of it’s height/altitude. I can seemingly zoom right through the globe and when panning left/right/up/down the map moves so fast, it’s hard to control. I found another way to set ECI but had the same zoom issue.
After some tinkering, I managed to get small example that exhibits the problem working on codesandbox. You will have to provide the Cesium.Ion token to get the globe to show up.
I hope that’s ok? If some kind person might take a look and offer advise it would be much appreciated.
sg
Here is the entire React App:
import { Viewer } from "cesium";
import React, {useEffect, useRef, useState} from "react";
import * as Cesium from 'cesium';
import "./App.css";
const cameraTrackEci = (scene, time) => {
if (scene.mode !== Cesium.SceneMode.SCENE3D) {
return;
}
const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
if (Cesium.defined(icrfToFixed)) {
const { camera } = scene;
const offset = Cesium.Cartesian3.clone(camera.position);
const transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
camera.lookAtTransform(transform, offset);
}
};
function App() {
const divRef = useRef(null);
useEffect(() => {
const map = new Viewer(divRef.current);
map.scene.postUpdate.addEventListener(cameraTrackEci);
return () => map.destroy();
}, []);
return (
<div className="App">
<div className="cesium" ref={divRef} />
</div>
);
}
export default App;