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.
🖼️
Create a simple 3D Scene custom layer
Open Recipe
🦉
Create a data-driven 3D Scene custom layer
Open Recipe
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.
Updated 4 months ago