Duplicate Model Rendering for Different Models

[m6hdix]

I am experiencing a bug when rendering multiple 3D models using react-three-map and react-three-fiber. Despite having different URLs for the models, the same model is rendered across all canvases. This issue occurs when trying to load multiple models that are close to each other on the map.

Use the provided MapPolygons component.
Ensure there are at least three models with distinct URLs that are close to each other geographically.
Observe that the same model is rendered in all canvases, even though their URLs are different.
Expected Behavior:
Each canvas should render the 3D model specified by its unique URL.

Actual Behavior:
All canvases render the same model, ignoring the distinct URLs.

Relevant Code:

import { Layer, Source, useMap, Marker } from "react-map-gl";
import { useLoader } from "@react-three/fiber";
import { Canvas } from "react-three-map/maplibre";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { HemisphereLight } from "three";
import { BORDER_COLORS } from "../../Services/Constants/BorderColors";
import { POLYGON_COLORS } from "../../Services/Constants/PolygonColors";
import useRequest from "../../Services/Hooks/useRequest";
import { ClipLoader } from "react-spinners";

const FBXModel = memo(({ url, rotation, setLoading, uniqueKey }) => {
  const fbx = useLoader(FBXLoader, url, (loader) => {
    loader.manager.onStart = () => setLoading(true);
    loader.manager.onLoad = () => setLoading(false);
    loader.manager.onError = () => setLoading(false);
  });

  const fbxRef = useRef();
  return (
    <group ref={fbxRef} rotation={rotation} scale={0.0097} key={uniqueKey}>
      <hemisphereLight
        args={["#ffffff", "#60666C"]}
        intensity={12}
        key={`${uniqueKey}-light`}
      />
      <primitive object={fbx} key={`${uniqueKey}-primitive`} />
    </group>
  );
});

const MapPolygons = () => {
  const map = useMap();
  const bounds = map.current.getBounds();
  const [features, setFeatures] = useState([]);
  const [buildingModels, setBuildingModels] = useState([]);
  const [zoom, setZoom] = useState(map.current.getZoom());
  const [isLoading, setIsLoading] = useState(false);

  const { Request } = useRequest();

  useEffect(() => {
    const handleViewportChange = () => {
      setZoom(map.current.getZoom());
    };

    map.current.on("zoomend", handleViewportChange);

    return () => {
      map.current.off("zoomend", handleViewportChange);
    };
  }, [map]);

  useEffect(() => {
    window.Echo.channel("feature-status").listen(
      ".feature-status-changed",
      (e) => {
        const data = [];
        for (const feature of features) {
          if (parseInt(feature.id) === parseInt(e.data.id)) {
            feature.rgb = e.data.rgb;
          }
          data.push(feature);
        }

        setFeatures(data);
      }
    );
  }, [features]);

  useEffect(() => {
    if (bounds.getSouthWest().lng && zoom >= 14) {
      const loadBuildings = zoom >= 15 ? "&load_buildings=1" : "";
      Request(
        `features?points[]=${bounds.getSouthWest().lng},${
          bounds.getSouthWest().lat
        }&points[]=${bounds.getSouthEast().lng},${
          bounds.getSouthEast().lat
        }&points[]=${bounds.getNorthWest().lng},${
          bounds.getNorthWest().lat
        }&points[]=${bounds.getNorthEast().lng},${
          bounds.getNorthEast().lat
        }${loadBuildings}`
      ).then((response) => {
        const newFeatures = [];
        const newBuildingModels = [];
        for (const feature of response?.data?.data) {
          newFeatures.push({
            id: feature?.geometry?.feature_id,
            rgb: feature?.properties?.rgb,
            coordinates: feature?.geometry?.coordinates.map((coordinate) => [
              parseFloat(coordinate.x),
              parseFloat(coordinate.y),
            ]),
          });

          if (feature.building_models) {
            for (const model of feature.building_models) {
              newBuildingModels.push(model);
            }
          }
        }

        setFeatures((prevFeatures) => [...prevFeatures, ...newFeatures]);
        setBuildingModels((prevModels) => [
          ...prevModels,
          ...newBuildingModels,
        ]);
      });
    }
  }, [bounds.getSouthWest().lng, zoom]);

  return (
    <>
      {zoom >= 14 && (
        <Source
          id="polygons"
          type="geojson"
          data={{
            type: "FeatureCollection",
            features: features.map((polygon) => ({
              type: "Feature",
              properties: {
                id: polygon.id,
                fill: POLYGON_COLORS[polygon.rgb],
                border: BORDER_COLORS[polygon.rgb],
              },
              geometry: {
                type: "Polygon",
                coordinates: [polygon.coordinates],
              },
            })),
          }}
        >
          <Layer
            id="polygon-fill-layer"
            type="fill"
            paint={{
              "fill-color": ["get", "fill"],
            }}
          />
          <Layer
            id="polygon-outline-layer"
            type="line"
            paint={{
              "line-color": ["get", "border"],
              "line-width": 3,
            }}
          />
        </Source>
      )}
      {zoom >= 15 &&
        buildingModels.length > 0 &&
        buildingModels.map((model) => {
          return (
            <>
              {isLoading && <ClipLoader color="#36d7b7" />}
              <Canvas
                latitude={parseFloat(model.building.position.split(", ")[0])}
                longitude={parseFloat(model.building.position.split(", ")[1])}
                key={`${model.id}-canvas`}
              >
                <FBXModel
                  url={model.file.url}
                  rotation={[0, 0, 0]}
                  setLoading={setIsLoading}
                  uniqueKey={`${model.id}-model`}
                />
              </Canvas>
            </>
          );
        })}
    </>
  );
};

export default MapPolygons;

The models have different URLs and unique keys.
This issue is impacting the accurate visualization of 3D models on the map.
Environment:

[m6hdix]

help sir

[m6hdix]

I would appreciate it if you could respond, I'm even willing to donate

[RodrigoHamuy]

Can you put this on a sandbox to be able to replicate? Here is a starting one you can fork https://codesandbox.io/p/sandbox/react-three-map-gettings-started-dhw34w

[m6hdix]

Hello RodrigoHamuy,

Thank you for reviewing the issue I raised. I have created a sandbox environment to demonstrate the problem. Please note that this is just for testing purposes and not intended for production.

Here is the link to the sandbox: https://codesandbox.io/p/live/176d120c-fd63-4726-b612-7f48d5e13b30

Please make sure to install and enable the CORS error extension, and for the environments to load correctly, zoom in to 15x.

I appreciate your time and look forward to your feedback.

Best regards
example video:

2024-08-08.16-04-42.mp4

[RodrigoHamuy]

Do you have a minimum example without having to install custom extensions?

That sandbox is still a bit complicated for debugging.

But I can see you are creating a new <Canvas> per model. Instead, I would recommend to use <NearCoordinates> instead.

[RodrigoHamuy]

It's still 404, probably you have it set as a private sandbox?

[m6hdix]

link
Hi ,I opened this new link in an incognito browser, no problem, thanks for your help

[RodrigoHamuy]

@m6hdix no idea why is not working, but as recommended before, you can use NearCoordinates instead of creating multiple canvas. This way is cheaper also. link

[m6hdix]

@RodrigoHamuy he models might be 200 kilometers apart, so it’s not a good idea to use a single canvas for all of them. I also tried using NearCoordinates, but it didn’t help.

[RodrigoHamuy]

@m6hdix then you can use Coordinates. I updated the same codesandbox and things are working there. link. Normally you wouldn't want to have more than one <Canvas> in most cases.

<Canvas latitude={51} longitude={0.2}>
  <Light />
  <Fbx path="./assets/3D-rgb-10230.fbx" />
  <Coordinates latitude={51.01} longitude={0.01}>
    <Light />
    <Fbx path="./assets/3D-rgb-10231.fbx" />
  </Coordinates>
  <Coordinates latitude={50.99} longitude={-0.01}>
    <Light />
    <Fbx path="./assets/3D-rgb-10235.fbx" />
  </Coordinates>
</Canvas>

[m6hdix]

https://codesandbox.io/p/live/978b3b5d-4c86-4daf-a380-f5d09bb0621a
hi bro ,new link