3D objects layer renders fewer elements than other layers--why?

[z1ndabad]

Context

I'm rendering a hollow globe and attempting to draw markers on it representing aircraft positions. I would like to represent the aircraft with 3D objects, with a persistent label, so I am using both the 3D Objects and Label layers.

Problem

The Label layer displays all elements in my dataset as expected. The 3D Objects layer displays far fewer, and I don't know why. Forgive the ugly screenshot:

There are ~420 blue labels, which matches my input data, and ~16 red octahedrons. I think I must be missing or misconfiguring a prop for the 3D objects.

Code

What's specifically confusing about this to me is that I'm passing the same positions array to both objectsData and labelsData, but seeing different numbers of objects and labels onscreen.

import { FeatureCollection, GeoJsonProperties } from "geojson";
import { useEffect, useMemo, useRef } from "react";
import Globe, { GlobeMethods, GlobeProps } from "react-globe.gl";
import {
  DoubleSide,
  Mesh,
  MeshLambertMaterial,
  OctahedronGeometry,
} from "three";
import * as topoJson from "topojson-client";
import { Topology, Objects } from "topojson-specification";
import * as landJson from "world-atlas/land-110m.json";
import { OpenSkyResponse } from "@/api/opensky";
import { useAircraftPositions } from "@/api/socket";

function HollowGlobe(props: GlobeProps) {
  // ... [land polygon setup]
  const { aircraftData } = useAircraftPositions();

  const positions = aircraftData?.states.map(
    ({ icao24, latitude, longitude, baro_altitude }) => {
      return {
        icao24: icao24 ?? "",
        latitude: latitude ?? 0,
        longitude: longitude ?? 0,
        altitude: baro_altitude ?? 0,
      };
    },
  );

  const aircraftMarker = useMemo(() => {
    const aircraftGeometry = new OctahedronGeometry(1);
    const aircraftMaterial = new MeshLambertMaterial({ color: "red" });
    return new Mesh(aircraftGeometry, aircraftMaterial);
  }, [aircraftData]);

  return (
    <Globe
      ref={globeRef}
      backgroundColor="black"
      showGlobe={false}
      showAtmosphere={false}
      polygonsData={landPolygons}
      polygonCapMaterial={polygonsMaterial}
      polygonSideColor={() => "rgba(0, 0, 0, 0)"}
      polygonAltitude={0}
      objectsData={positions}
      objectLabel="icao24"
      objectLat="latitude"
      objectLng="longitude"
      objectAltitude="altitude"
      objectThreeObject={aircraftMarker}
      labelsData={positions}
      labelText={"icao24"}
      labelColor={() => "blue"}
      labelLat={"latitude"}
      labelLng={"longitude"}
      {...props}
    />
  );
}

export { HollowGlobe };

Debugging steps I have tried

Switching to the HTMLElements layer -- fixes the issue

    <Globe
      // ...
      htmlElementsData={positions}
      htmlLat={"latitude"}
      htmlLng={"longitude"}
      htmlElement={(d) => {
      const el = document.createElement("div");
      el.innerHTML = markerSvg;
      el.style.color = "red";
      el.style.width = "10px";
      return el;
      }}
      // ...
      {...props}
    />

This causes the expected number of markers to render (the rendering approach itself is wrong since stale markers will persist, but this was just to debug):

Checking the underlying Three scene myself -- no new insights, Scene is getting the expected data

  useEffect(() => {
    if (globeRef.current) {
      const scene = globeRef.current.scene;
      console.log("SCENE");
      console.log(scene().toJSON());
    }
  }, [positions]);

I found that scene.object.children[index of type 'Group'].children contains two arrays of groups, one corresponding to the labels and one to the 3D objects (I verified the elements are present only when I provide props for one layer or the other). The arrays are the same length, so I assume the correct data is being passed to the scene.

[z1ndabad]

I screwed up with the objectAltitude prop--ignore! Thanks!