ScreenSpaceEvent not working

CesiumJS
1

Hello,

I am setting up Cesium within Next.js app (using Resium as a wrapper).
I tried setting up ScreenSpaceEvent - wether it’s directly creating event handler on viewer canvas or scene canvas as shown in some Cesium sandcastles and setting input on that. Or setting input directly on the screenSpaceEventHandler on the viewer reference. Neither of them worked.

I tried also with the Resium approach of using the react components that should handle the events for me. Sadly, I am not able to get any console log / function call from these events. Am I missing something?

"use client";

import React, { useEffect, useRef, useState } from "react";
import {
  CameraFlyTo,
  CesiumComponentRef,
  ImageryLayer,
  Viewer,
  ScreenSpaceEvent,
  ScreenSpaceEventHandler,
} from "resium";
import {
  Cesium3DTileset,
  Ion,
  Viewer as CesiumViewer,
  UrlTemplateImageryProvider,
  CesiumTerrainProvider,
  createWorldTerrainAsync,
  createOsmBuildingsAsync,
  ScreenSpaceEventType,
  KeyboardEventModifier,
} from "cesium";
import { highlights, initialView } from "./mapconfig";

Ion.defaultAccessToken = process.env.NEXT_PUBLIC_CESIUM_ACCESS_TOKEN as string;
const MAPBOX_ACCESS_TOKEN = process.env
  .NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN as string;

const mapbox = new UrlTemplateImageryProvider({
  url: `https://api.mapbox.com/styles/v1/mimo-mi/clwdr4pi600en01r0312n57op/tiles/512/{z}/{x}/{y}@2x?access_token=${MAPBOX_ACCESS_TOKEN}`,
});

const SolarMap = () => {
  const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
  const [terrainProvider, setTerrainProvider] =
    useState<CesiumTerrainProvider>();
  const [tilesetProvider, setTilesetProvider] = useState<Cesium3DTileset>();

  useEffect(() => {
    const fetchTerrain = async () => {
      const terrain = await createWorldTerrainAsync({
        requestVertexNormals: true,
      });
      setTerrainProvider(terrain);
    };
    const fetchOsmBuildings = async () => {
      const tileset = await createOsmBuildingsAsync();
      setTilesetProvider(tileset);
    };

    fetchTerrain();
    fetchOsmBuildings();
  }, []);

  useEffect(() => {
    const primitives = cesium?.current?.cesiumElement?.scene?.primitives;
    if (!primitives || !tilesetProvider) {
      return;
    }

    if (cesium.current?.cesiumElement?.scene.primitives.length! > 0) {
      return;
    }

    primitives.add(tilesetProvider);
  }, [cesium, tilesetProvider]);

  useEffect(() => {
    var cesiumElement = cesium?.current?.cesiumElement;
    if (!cesiumElement || !terrainProvider) {
      return;
    }

    if (cesiumElement.terrainProvider instanceof CesiumTerrainProvider) {
      return;
    }

    cesiumElement!.terrainProvider = terrainProvider;
  }, [cesium, terrainProvider]);

  const handleMouseMove = () => console.log("hi;");

  return (
    <div className="h-full w-full relative">
      <Viewer
        ref={cesium}
        full
        timeline={false}
        animation={false}
        navigationHelpButton={false}
        fullscreenButton={false}
        shadows={false}
        baseLayerPicker={false}
        homeButton={false}
        vrButton={false}
        geocoder={false}
        sceneModePicker={false}
        selectionIndicator={false}
        navigationInstructionsInitiallyVisible={false}
      >
        <ScreenSpaceEventHandler>
          <ScreenSpaceEvent
            action={handleMouseMove}
            type={ScreenSpaceEventType.MOUSE_MOVE}
          />
          <ScreenSpaceEvent
            action={() => console.log("Right Click")}
            type={ScreenSpaceEventType.RIGHT_CLICK}
          />
          <ScreenSpaceEvent
            action={() => console.log("Left Double Click")}
            type={ScreenSpaceEventType.LEFT_DOUBLE_CLICK}
          />
          <ScreenSpaceEvent
            action={() => console.log("Shift + Right Click")}
            type={ScreenSpaceEventType.RIGHT_CLICK}
            modifier={KeyboardEventModifier.SHIFT}
          />
        </ScreenSpaceEventHandler>
        <CameraFlyTo
          duration={0}
          destination={initialView.position}
          orientation={{
            heading: initialView.heading,
            pitch: initialView.pitch,
            roll: initialView.roll,
          }}
        />
        <ImageryLayer imageryProvider={mapbox} />
      </Viewer>
    </div>
  );
};

export default SolarMap;