Ship as object

This app asks for a JSON file and gives back the pretty form of the JSON element. It also plots a 3D image of the ship. Sample data is loaded at startup.

Developed by: Elias Hasle, Vicente Alejandro Iváñez Encinas and Henrique M. Gaspar. Visualization made using three.js.


Contents of the file:


3D orbit view of hull and parts

Whole ship

Ship specifications

Variable Value
Lenght Overall m
Breadth Overall m
Depth m
Design Draft m
Design speed knots
Lightweight kg


Variable Hand value Calculated on Hidromax Calculated value % diff
Draft Amidships (m)
Displacement (t)
Waterline Lenght (m)
Maximum Waterline Breath (m)
Wetted area (m2)
Waterplane Area (m2)
LCB (m)
LCF (m)
KB (m)
KG (m)
BM (m)
GM (m)
Trim (m)
Trim (º)
Draft at FP (m)
Draft AP (m)
Heel (m)

General arrangement


ID Lenght Breadth Height Deadweight
Block0 m m m kg
Block0 m m m kg
Block2 m m m kg


Variable Hand value Calculated value
Deadweight (kg)
Total area (m2)
Total Volume (m3)

The method above aims to validate the calculation method presented by vessel.js file. The main idea is to use a simple hull geometry (presented here by a triangular hull) and compare it with two other calculation methods: analical formulation and numerical method using maxsurf/hidromax software. The hand and Hidromax calculation is specifical for the triangular geometry described in blockCase.json and it may not work fine for other types of geometry. The explanation of the steps followed by the open code are presented bellow.

  1. Use the library and vessel.js to calculate hydrostatics
    • Get all compartments informations and calculate centers of gravity
    • THREE.FileLoader().load("data/ship_specifications/blockCase.json", useFileData);

      let block0 = ship.baseObjects[Object.keys(ship.baseObjects)[0]];

      let block0 = ship.baseObjects[Object.keys(ship.baseObjects)[1]];

      let block0 = ship.baseObjects[Object.keys(ship.baseObjects)[2]];

    • Calculate draft from deadweight
    • let a = ship.calculateStability();

      let draftc = a.T.toFixed(3);

    • Use the draft to calculate hydrostatics
    • let ha = ship.structure.hull.calculateAttributesAtDraft(draftc);

    • List all the calculated values under "Calculated value" column

  2. Reproduce all values by analytical calculations method
    • Get the same draft outputed from the vessel.js
    • let draftms = a.T;

    • Calculate hidrostatics and list values under "Hand value" column

  3. Insert data in the maxsurf program
    • Calculate hidrostatics and list values under " Calculated on Hidromax" column