Boat Hull Visualization Library

This component provides a component created with the goal of being used later on, in a FEA Boat Hull simulation app.

• @arthurmm18/boat_visualizer uses ThreeJs for visualization

How to use

If you are developing a production application, i recommend you to use the npm package of boat_visualizer

Cloning and running the project

  git clone https://github.com/Arthur-Matias/boat_hull_visualizer.git
  cd boat_hull_visualizer
  npm i
  # Then just
  npm run dev

Data Structure expected

The main component is a Quote Table with the hull data:

  interface QuoteTable {
    stations: Record<string, Station>;
    metadata: QuoteTableMetadata;
  }

Here we can see that there are two main attributes on it, the stations and the metadata.

the stations attribute are the transversal sections of the boat:

  interface Station {
    [waterlineKey: string]: WaterlineData;
  }

Note that the 'waterlineKey' represents the distance of the Station, it should be a string, but the code expects it to be a float number like:

{
  "0.5": {},
  "2.3": {}
}

Each Station have it's own Waterlines, the WaterlineData is composed by 3 values:

interface WaterlineData {
  halfBreadth?: number;
  halfBreadthStarboard?: number;
  halfBreadthPort?: number;
}

note that all of them are optional, the reason for that, is that the halfBreadthPort and the halfBreadthStarboard are only necessary in the case of the Hull not being symetric, for any symetric Hulls you only need the halfBreadth.

For the metadata we have:

interface QuoteTableMetadata {
  units: 'mm' | 'ft' | 'm'; // The measurement unit used on the Quote Table
  hasKeel?: boolean; // Indicate if it should generate a keel
  hasChine?: boolean; // indicate if the boat have a chine
  symmetry: 'symmetric' | 'asymmetric'; // This tells what kind of data to expect on the WaterlineData
}