Hello everyone. I have a folder wich JSON and b3dm which I have added to ION. And now I am trying to add it to my map. I use Resium because I am writting on Next.js
"use client";
import React, { useEffect, useRef } from "react";
import { Viewer, Entity } from "resium";
import { Cartesian3, Color, createWorldTerrainAsync, Ion, Cesium3DTileset, Viewer as CesiumViewer } from "cesium";
const MapComponent = () => {
const viewerRef = useRef<CesiumViewer | null>(null); // Указываем тип для viewerRef
const token = process.env.NEXT_PUBLIC_CESIUM_TOKEN; // Ваш токен
const terrainProvider = createWorldTerrainAsync();
useEffect(() => {
Ion.defaultAccessToken = token as string;
const addTileset = async () => {
if (viewerRef.current) {
const tileset = await Cesium3DTileset.fromIonAssetId(2743748);
viewerRef.current.scene.primitives.add(tileset); // Добавляем tileset в сцену
// Ждем, пока tileset будет готов, чтобы переместить камеру
tileset.readyPromise.then(() => {
const boundingSphere = tileset.boundingSphere;
if (boundingSphere) {
viewerRef.current.camera.flyTo({
destination: boundingSphere.center,
radius: boundingSphere.radius * 1.5,
duration: 2,
});
}
}).catch((error) => {
console.error('Ошибка загрузки tileset:', error);
});
}
};
addTileset();
}, [token]);
return (
<Viewer full ref={viewerRef} terrainProvider={terrainProvider}>
<Entity
name="Tokyo Tower"
position={Cartesian3.fromDegrees(139.8107, 35.6586, 100)}
point={{ pixelSize: 10, color: Color.RED }}
description="Tokyo Tower is a communications and observation tower in the Shiba-koen district of Minato, Tokyo, Japan."
/>
</Viewer>
);
};
export default MapComponent;
It’s looks smth like this. Becasuse I coudnot found how to add TileSet on Viwer from ION as a React component. So I am trying to do it by using original Cesium. And it does not work. Can someone help?