3D Building selection

CesiumJS
1

Hello Guys,

Can you please guid me how I implement the 3D Building selection on next js.

Becouse I am using this code but this is not working
“use client”;

import React, { useEffect, useRef, useState } from “react”;
import {
Viewer,
Camera,
CameraFlyTo,
Cesium3DTileset,
} from “resium”;
import {
Cartesian3,
ScreenSpaceEventHandler,
ScreenSpaceEventType,
Color,
Cesium3DTileFeature,
} from “cesium”;

export default function CesiumFeaturePick() {
const viewerRef = useRef(null);
const [selectedFeature, setSelectedFeature] = useState(null);
const [tilesetReady, setTilesetReady] = useState(false);

useEffect(() => {
if (!tilesetReady || !viewerRef.current) return;

const handler = new ScreenSpaceEventHandler(viewerRef.current.scene.canvas);

handler.setInputAction((movement) => {
  const picked = viewerRef.current.scene.pick(movement.position);

  if (picked && picked.primitive && picked.primitive.getFeature) {
    const feature: Cesium3DTileFeature = picked.primitive.getFeature(picked.instanceId);

    // Reset previously selected feature color
    if (selectedFeature && selectedFeature !== feature) {
      selectedFeature.color = Color.WHITE; // Reset old selection
    }

    if (feature) {
      feature.color = Color.YELLOW.withAlpha(0.6);
      setSelectedFeature(feature);
    }
  }
}, ScreenSpaceEventType.LEFT_CLICK);

return () => {
  handler.destroy();
};

}, [tilesetReady, selectedFeature]);

return (
<Viewer
full
ref={(e) => {
if (e && e.cesiumElement) viewerRef.current = e.cesiumElement;
}}
>
{/* Initial camera view */}
<Camera
view={{
destination: Cartesian3.fromDegrees(139.767052, 35.681167, 100),
}}
/>

  {/* Smooth camera fly to position */}
  <CameraFlyTo
    destination={Cartesian3.fromDegrees(139.767052, 35.681167, 100)}
    duration={3}
  />

  {/* Load Cesium OSM buildings */}
  <Cesium3DTileset
    url="https://assets.cesium.com/96188/tileset.json"
    onReady={(tileset) => {
      setTilesetReady(true);
      console.log("Tileset loaded", tileset);
    }}
  />
</Viewer>

);
}

2

Hi @Puneet_Prajapati,
Thanks for your post and welcome to the Cesium community.

I see you are using the Resium library in the sample code you shared. This is actually a separate project that uses CesiumJS as a dependency but is maintained by a different organization not affiliated with us. For support with Resium, you should seek support from the maintainers of that library.

For reference, we do have a sandcastle example showing an implementation of the use case you are trying to build in CesiumJS that can be accessed in our sandcastle tool Cesium Sandcastle. This may be helpful for understanding how picking from a 3D Tileset of building data works.

Please let us know if we can be of further help.

Best,
Luke