Skip to content

Can't display multiple <Coordinates/> #112

Description

@Nikhil22

Inside a Canvas I am rendering a 3D model for every element in reservedHomeLocations, like this:

 <Canvas longitude={startingLngLat.lng} latitude={startingLngLat.lat} overlay>
        {reservedHomeLocations?.map((l, idx) => {
          const modelPath = getHomeAttributesObj(l.homeTypeId)?.modelPath;
          return (
            <Coordinates
              key={idx}
              latitude={l.coordinates[1]}
              longitude={l.coordinates[0]}
            >
              <Suspense fallback={<></>}>
                <object3D>
                  {modelPath && <HomeModel3D modelPath={modelPath} />}
                </object3D>
              </Suspense>
            </Coordinates>
          );
        })}
<Canvas/>

The problem is, despite reservedHomeLocations being multiple elements long, only one 3D model (the last one) shows up. The model paths are the same, the coordinates are all different.

No errors in the console.

Activity

  1. changed the title [-]Can't loop over multiple <Coordinates/>[/-] [+]Can't display multiple <Coordinates/>[/+] on Jun 27, 2024
  2. RodrigoHamuy commented on Jun 28, 2024

    @RodrigoHamuy
    Owner

    @Nikhil22 , you have a sandbox to test your issue? Multi coordinates are working fine here https://rodrigohamuy.github.io/react-three-map/?story=multi-coordinates--default

  3. Repository owner locked and limited conversation to collaborators on Jun 28, 2024
  4. converted this issue into a discussion #114 on Jun 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions