A useful web app based on threejs to display 3d fence diagrams for geotechnical visualization.
View the live demo at xapc2.github.io/fences.
- Rotate view: Click and hold left mouse button.
- Pan view: Click and hold right mouse button.
- Zoom in/out: Scroll mouse wheel.
The collapsible control menu contains all the actions allowed by the app. Those actions are organized in folders that can be closed individually by clicking on its name bar.
- Background:
- Change the background color by selecting from the dropdown menu one of the 6 colors available. The default background color is seashell.
- Vertical Scale:
- Type in the box or use the slider to change the vertical scale of the 3D model. The maximum vertical scale is 10 and the minimum is 0. The default value is 1.
- Change colors:
- This button will open a dialog box with a dropdown menu to select one of the available color pallets or to change individual layer colors.
- Show/hide boreholes:
- It is possible to hide all the boreholes from the scene. Simply uncheck the box named visible in the Boreholes folder.
- Show/hide labels:
- Show or hide all the labels by clicking the checkbox named Labels in the Borehole folder.
- Label size:
- Type the value of the label font size or use the slider.
- Borehole radius:
- Type the value or use the slider to change the radius of the boreholes. The default value is 1m.
- Show/hide fences:
- To hide all the fences from the scene simply uncheck the box named visible in the Fences folder.
- Opacity:
- Change the opacity of the fences by typing the value or using the slider. The default value is 0.7.
- Grid:
- Toogle on/off the grid helper by clicking on the box named Show grid in the Helpers folder.
- Axes:
- Toogle on/off the axes helper by clicking on the box named Show axes in the Helpers folder.
- Adding boreholes
- To add a borehole, click on the button named Add borehole and fill the values in the form. The maximum number of layers for each borehole is 6.
- Removing boreholes
- To delete a borehole, select the element by double clicking on it (it will turn yellow) and then click the Remove borehole button.
- Editing boreholes
- To edit a borehole, select the element by double clicking on it (it will turn yellow) and then click the Edit borehole button. It is not possible to add or remove layers, only to change their thicknesses.
- Adding fences
- To add a fence, first double-click on a borehole to select it. Then click the button named Add fence. Finally, select the second borehole to create the fence.
- Removing fences
- To delete a fence, select the element by double clicking on it (it will turn yellow) and then click the Remove fence button.
It is possible to save the project locally as a .json file. To save the project, click on the button named Load file...
If you have previously saved a project and have the .json file on your computer, you can load the project by clicking the button named Load file....
The app can also load borehole data saved as a .csv (comma separated values) file. If the data is created/stored in a spreadsheet, it should be organized as this:
| name | x | y | z | h1 | h2 | h3 | h4 |
|---|---|---|---|---|---|---|---|
| BH-1 | -10.5 | 0.0 | 12.2 | 2.3 | 3.7 | 2.1 | 4.5 |
The resulting text file should look like this:
name,x,y,z,h1,h2,h3,h4
BH-1,-10.5,0,12.2,2.3,3.7,2.1,4.5