Migrate react leaflet to react three fiber.
Closed this issue · 6 comments
Before proceeding, is there an existing issue or discussion for this?
- I have done a search for similar issues and discussions.
Description
React Three Fiber offers a powerful alternative for rendering maps.
By transitioning from React Leaflet to React Three Fiber, we gain the ability to build immersive environments with multi-level scaling. This means that we can seamlessly navigate and visualize objects at various levels of detail, providing a more natural and comprehensive understanding of geographical spaces.
Implementation Considerations
Done
- Show robots.
- Show places as cube.
- Show places' names as text.
- Show RobotInformation when clicking a robot.
- Show Trajectory.
In progress
-
Which object would represent the robot? For now, it is this object
- Aaron >> robots, we can stick to what we have in the past, have a default drawn circle if no logo or 3d asset is provided through dashboard resources
-
Draw an elevator (like a square)
-
Show robots' names
-
Show dispensers
- Which object would represent the dispensers? For now, it is a cube
- A circular shape is shown according to the comment below.
-
Show ingestor
- Which object would represent the ingestor? For now, it is a cube
- A circular shape is shown according to the comment below.
-
Fix the position of places when the level changes. Currently, the place names and cubes (represents places) look good on the first level but when switching to level 2 they are one floor down.
-
Scale of waypoints and objects.
-
Calculate the scale correctly.
- Currently, the scale for both objects and places is a hardcoded Vector3 and, although they look good at all levels, it is not good practice.
-
Correctly calculate the z-value of the trajectory.
- Currently, it has a hardcoded value (4)
Fix (Details in videos)
- Zoom.
- Automatic zoom when changing levels.
- The elevation is set to a standard value
chrome-capture-2023-7-8.webm
chrome-capture-2023-7-8.1.webm
Alternatives
No response
Additional information
No response
Per VC,
- Dispensers and ingestors in the legacy map is showed with icons like https://github.com/open-rmf/rmf_demos/blob/main/rmf_demos_dashboard_resources/office/main.json, we can start off with just circular waypoints if the waypoint is a dispenser or ingester, and have the same color as doors
- robots, we can stick to what we have in the past, have a default drawn circle if no logo or 3d asset is provided through dashboard resources
Some notes, I can recreate the panning issue, using the mouse right-click.
Per VC, it's almost feature complete, just a few things left
- showing the floorplans from
BuildingMap - Turning the level controller into a react component
- Add layer control as a react component (or the same one as above)
For testing, running with gazebo the doors might some times not behave accordingly, try using gazebo_classic
Regarding
Currently, the scale for both objects and places is a hardcoded Vector3 and, although they look good at all levels, it is not good practice
A stretch goal, to introduce a scale field beside icons in the dashboard resources, with meters/pixel, to accurately show robot icons to scale in maps.
Leaving some behavioral change requirements here
- Elevator level indicator occluded
It could not be reproduced. In all resolutions it looks fine. Marked as solved for now
- Labels for elevator and door names
- Labels for doors open, moving or closed
Through chat, we decided not to add names for the doors status. The colors will represent the current status of the doors. Mark as done. - Zoom in and out buttons for maps
- Dropdown for selecting level or meshes/labels to display, otherwise it will look like
- Changing tabs should retain
- Same level
- Same view (layers)
- Same zoom level (zoom and camera position)
- Map race condition, happens sometimes when first loading dashboard, or when changing levels, #788
Closing as we will be addressing the icon scale with support for image imports, using dashboard resources