Develop custom 3D Scene maps and layers
This guide will show you how to develop a custom 3D Scene map or layer in Formant. The 3D Scene is extensible to a variety of custom maps, layers, visualizations, and interactions.
This guide assumes knowledge of React, React Three Fiber, TypeScript, and ThreeJS.
Step 1: Fork the 3D Scene repository
Go to our GitHub page and fork the repository.
Step 2: Create a custom layer file
- Navigate to
3d-viewer-module/src/layers
and review the existing layer files. You can start by saving a copy ofEmptyLayer.tsx
. - Extend
IUniverseLayerProps
with your desired properties. - Add your properties to
DataVisualizationLayer
.
Examples
See the following recipes for examples of how to create an interactive waypoint custom layer, or a data-driven visualization.
Step 3: Add your custom layer to the JSON schema
- Navigate to
3d-viewer-module/public
and openconfig.schema.json
. - Add input values, data types, and tool tips for your layer's properties. This will populate the module configuration window in Formant.
Our JSON schema has the custom property $formant.visible.when
which selectively shows property fields in the configuration window.
You can find more information about JSON Schema, and its specification, on the official JSON Schema website.
Step 4: Add your custom layer to buildScene.tsx
buildScene.tsx
- Navigate to
3d-viewer-module/src
and openbuildScene.tsx
. - Add your custom layer and properties to the appropriate array.
- If your layer is a map, add it to the
mapLayers
array. - If your layer is a data visualization, add it to the
visualizations
array.
- If your layer is a map, add it to the
Step 5: Add your custom module to Formant
See Add a custom module for instructions.
If you notice an issue with this page or need help, please reach out to us! Use the 'Did this page help you?' buttons below, or get in contact with our Customer Success team via the Intercom messenger in the bottom-right corner of this page, or at [email protected].
Updated 4 months ago