3D visualization component for PCD, OSM, and URDF files
npm install @evdk12/rviz_viewer@evdk12/rviz_viewer package, run the following command in your terminal:
bash
npm install @evdk12/rviz_viewer
`
Description
The @evdk12/rviz_viewer package is a powerful React component designed for visualizing 3D data in RViz, a popular visualization tool used in robotics. This package allows developers to easily integrate RViz-like visualizations into their React applications, enabling the display of various data types such as Point Cloud Data (PCD), OpenStreetMap (OSM), and URDF (Unified Robot Description Format) models.
With RvizViewer, users can customize the visualization options to suit their needs, including toggling the visibility of different data layers. The component is designed to be user-friendly and efficient, making it an ideal choice for developers looking to enhance their robotics applications with rich visual representations of spatial data.
$3
- Easy Integration: Seamlessly integrate RViz visualizations into your React applications.
- Customizable Options: Control the visibility of PCD, OSM, and URDF layers.
Whether you're developing a robotics simulation, a mapping application, or any project that requires 3D data visualization, @evdk12/rviz_viewer provides the tools you need to create engaging and informative user experiences.
Usage
Below is a sample code demonstrating how to use the RvizViewer component in a React application.
$3
`tsx
// Import necessary modules
import { RvizViewer } from "@evdk12/rviz_viewer";
// Define the ViewerPage component
export default function ViewerPage() {
// Define viewer data including URLs for PCD, OSM, and URDF files
const viewerData = {
pcdUrl: "./osm/GlobalMap_utm.pcd", // Optional: URL for the Point Cloud Data
osmUrl: "./osm/lantet_maps.osm", // Optional: URL for the OSM map data
urdfUrl: "./osm/innova_urdf.urdf", // Optional: URL for the URDF robot model
robotPosition: {
// Optional: Initial position and rotation of the robot
x: 0, // Optional: Robot's X position
y: 0, // Optional: Robot's Y position
z: 0, // Optional: Robot's Z position
rotation: 0, // Optional: Robot's rotation around the Y-axis
},
};
const STYLE = {
GRID: 0x444444,
BACKGROUND: 0x111111,
POINT_CLOUD: 0x808080, // GreyScale
MAP: {
CENTERLINE: 0x00ffff, // Cyan
LEFT_BOUNDARY: 0xff0000, // Red
RIGHT_BOUNDARY: 0x0000ff, // Blue
},
ROBOT: 0xff00ff, // Magenta
};
// Render the viewer component
return (
style={STYLE} // Pass the style to the RvizViewer
options={{
showPCD: true, // Option to show Point Cloud
showOSM: true, // Option to show OSM map
showURDF: true, // Option to show URDF robot model
}}
/>
);
}
`
$3
1. Imports:
- The RvizViewer component is imported from the @evdk12/rviz_viewer package.
2. ViewerPage Component:
- This is a functional component that serves as the main entry point for rendering the RViz viewer.
3. Viewer Data:
- An object named viewerData is defined, containing URLs for the Point Cloud Data (PCD), OpenStreetMap (OSM), and URDF files. It also includes the initial position and rotation of the robot.
4. Rendering the Viewer:
- The RvizViewer component is rendered within a div. The data prop is passed the viewerData object, and the options prop is used to specify which layers to display (PCD, OSM, URDF).
$3
- Ensure that the URLs provided in viewerData` are accessible and point to valid files.