Resium. Adding 3dTiles(b3dm) as tileset

Cesium ion
1

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?

2

Hi Just-the-Alex,

The best way to get help with CesiumJS is to post a reproducible sample (typically using sandcastle). That way everyone can run and debug your code.

It looks like you can also use ion assets in Resium with the [Cesium3DTileset component] (Cesium3DTileset | Resium) and the IonResource.fromAssetId method.

<Cesium3DTileset url={ IonResource.fromAssetId(...) }/>

Looking at the code without being able to run it I saw several things which could be an issue:

  1. It looks like you are using an older verison of Cesium API. The readyPromise pattern is no longer used available in the API as of 1.107. If you are using a newer version this will not work.
  2. You never initialize the viewer ref in your component. Your useEffect runs the first time the component renders while viewerRef.current is still null. It never runs again since the dependency of token never changes.
  3. You are creating a new TerrainProvider each render. Typically you would only create this once and then reuse it.