Hello right now I have this code where i start the Cesium Viewer in the useEffect function but then when i try to move the camera outside of this function it won’t let me.
I’m using React with Cesium. I think the error has to be with the use of ViewerRef.
here is the code:
useEffect(() => {
// Asegurarse de que el contenedor DOM está listo
if (cesiumContainer.current) {
// Configura el token de acceso de Cesium Ion
Cesium.Ion.defaultAccessToken = 'token';
const viewer = new Cesium.Viewer(cesiumContainer.current, {
terrain: Cesium.Terrain.fromWorldTerrain(),
});
// Establecer la posición inicial de la cámara
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(1.883445, 42.10700, 665.0000000005),
orientation: {
heading: Cesium.Math.toRadians(0), // Hacia el norte, en radianes
pitch: Cesium.Math.toRadians(-35), // Mirando hacia abajo, en radianes
roll: 0 // Sin rotación lateral
}
});
const initCesium = async () => {
try {
for (let i = 0; i < assets.length; i++) {
const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(assets[i]);
viewer.scene.primitives.add(tileset);
tileset.show = i === 0; // Solo muestra el primer tileset inicialmente
tilesets.current.push(tileset); // Almacena la referencia del tileset en el array global
}
} catch (error) {
console.error(error);
}
}
initCesium();
viewerRef.current = viewer;
if(viewerRef.current == viewer){
console.error("funciona wtf");
}
}
}, []); // El array vacío asegura que esto solo se ejecute una vez al montar el componente
and here is the camera moving function:
const handleToggleVisibility = () => {
// Mover la cámara a la nueva ubicación
viewerRef.current.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(
1,
1,
1
),
orientation: {
heading: 1,
pitch: 1,
roll: 1
},
duration: 3 // Duración de la animación de vuelo en segundos
});
};
Thank you so much in advance.