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.

📘

Technologies Used

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

1. Navigate to 3d-viewer-module/src/layers and review the existing layer files. You can start by saving a copy of EmptyLayer.tsx.
2. Extend IUniverseLayerProps with your desired properties.
3. 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

1. Navigate to 3d-viewer-module/public and open config.schema.json.
2. 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

1. Navigate to 3d-viewer-module/src and open buildScene.tsx.
2. Add your custom layer and properties to the appropriate array.
   1. If your layer is a map, add it to the mapLayers array.
   2. If your layer is a data visualization, add it to the visualizations array.

Step 5: Add your custom module to Formant

See Add a custom module for instructions.