Synopsis
Slamviewer is a React component wihch displays 3D modelization results from the SLAM process output.
It defines the <ReactComponentSlamjs>
object.
Inputs / Props
- assetFolder path to a Maestro asset.
The path can be absolute or relative to your application directory.
Dependencies
- THREE.js framework for 3D real time display
- DAT-GUI for quick UI to control camera, image navigation
Installation
To use the component, enter the following command:
npm install --save "http://theimaginary.me/mr-react-slamviewer-1.0.0.tgz"
mr-react-slamviewer will be installed in your node_modules/
directory.
The component entry is located in mr-react-slamviewer/build/lib/ReactComponentSlamjs
.
How to use
In your react application simply add the following:
; // ... ReactDOM
SlamViewer requires the following CSS classes in your application.
mush { position: relative; background-color: #455;} #slamtoolbar { width: 245px; height: auto; position: absolute; top: 0; right: 0; z-index: 10; float:right; display: 'inline'; overflow: 'hidden';} #btnFullscreen { position: absolute; top: 0; left: 0; z-index: 10;} .slamPlayer { width: 100%; height: 100%;} /* Fullscreen style */#mush:-webkit-full-screen { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0;} :-webkit-full-screen #btnFullscreen { visibility: hidden;}
Options
Background color
By default the background color is black. You can specify the color to use, with a background props:
<SlamView ... ="#424242"/>
Grid
By default a grid is drawn to cover the area of the trajectory, using the lowest point to position itself.
You can disable the grid with the following prop:
<SlamView ... =/>
Tests
The component provides functionnal and unit tests in the /test
and /test-e2e
folders.
Please note that functionnal tests (e2e) will launch a browser.
To run the tests, simply launch the following:
> npm start test> npm start test.e2e
License
© Copyright MotionRecall 2016 - all rights reserved