Using createOsmBuildings() in Resium library

General
1

Hi everyone,

I am planning to do a simple Cesium project using Resium library.
At the start of the project I got a problem with adding primitive using Resium.

In Cesium if you want to add ‘createOsmBuildings’, you simply do as following:

const viewer = new Cesium.Viewer("cesiumContainer", {
  terrainProvider: Cesium.createWorldTerrain(),
});

viewer.scene.primitives.add(Cesium.createOsmBuildings());

But in Resium I could not add the OSM buildings. I tried the following:

import { Entity, EntityDescription, PointGraphics, Primitive, Viewer } from "resium";
import { Cartesian3, createOsmBuildings, createWorldTerrain } from "cesium";
const osmBuilding = createOsmBuildings()
                   <Viewer full >
                        <Primitive ></Primitive>  // how to add the perimitive?
                        <Entity position={position} name="Tokyo">
                            <PointGraphics pixelSize={10} />
                            <EntityDescription>
                                <h1>Hello, world.</h1>
                                <p>JSX is available here!</p>
                            </EntityDescription>
                        </Entity>
                    </Viewer>

Can anyone please help me?

2

You can get it to work by grabbing a ref to the Viewer and then add them in a useEffect():

import { useRef, useEffect } from "react";
import { Viewer } from "resium";
import { createWorldTerrain, createOsmBuildings } from "cesium";

const terrainProvider = createWorldTerrain();

export default function Cesium() {
  
  const viewerRef = useRef<any>();

  useEffect(() => {

    if (viewerRef.current) {
      // Add Cesium OSM Buildings.
      const csEl = viewerRef.current.cesiumElement;
      csEl.scene.primitives.add(createOsmBuildings());
    }
  }, []);

  return (
    <Viewer ref={viewerRef} full terrainProvider={terrainProvider} />
  )
}

Or just add this under your Viewer node:

import { Viewer, Cesium3DTileset } from "resium";

...
return (
    <Viewer ref={viewerRef} full terrainProvider={terrainProvider} >
        <Cesium3DTileset url={IonResource.fromAssetId(96188)} />
   </Viewer>
);
...

(It seems that 96188 is the Asset ID for Cesium OSM Buildings)