Sailing in data ocean.
A vessel.js tutorialChapter 1 - From Plane Lines to 3D HullChapter 2 - From GA to BlocksSection 2.2 - CompartmentsSection 2.3 - TanksSection 2.4 - Equipments and STL elementsSection 2.5 - Importing External ElementsSection 2.6 - Creating a GLTF realistic modelChapter 3 - Principles of System Engineering Applied to GunnerusSection 3.2 - GUI controller interface - Check Box ListChapter 4 - Simulations and Analysis Principles for Vessel.jsSection 4.1 - Coordinate Reference SystemSection 4.2 Advance Resistance Analysis - Pt.1: Propeller ModelSection 4.2 Advance Resistance Analysis - Pt.2: Resistance ModelSection 4.3 - A Brief Explanation of Maneuvering Mathematical Model
Section 3.1 - GUI controller interface - Dropdown menu
gui = new dat.GUI()
gui.domElement.id = 'gui'
styles = html`
<style>
#gui {
position: absolute;
top: 848px;
right: 0px
}
</style>
`
ship = new Vessel.Ship(Gunnerus);
ship3D = new Ship3D(ship, {
shipState: ship.designState.clone(),
stlPath:
"https://shiplab.github.io/vesseljs/examples/3D_models/STL/Gunnerus/",
upperColor: 0x33aa33,
lowerColor: 0xaa3333,
hullOpacity: 0.5,
deckOpacity: 0.5,
objectOpacity: 0.5
})
ship3D.name = "Ship3D"
mutable ModelGLTF = {}
scene.remove(scene.getObjectByName("ModelGLTF"))
scale = gui.addFolder("Visualization parameters")
modelStyle = {
const modelStructure = {
model: "ModelGLTF"
}
return modelStructure
}
scale
.add(modelStyle, "model", {
Model: "ModelGLTF",
Blocks: "Ship3D",
})
.onChange(newValue => {switchElement(newValue)})
.name("View")
scale.open()
function switchElement(stringModel) {
scene.children.forEach(element => {
var otherName = {
ModelGLTF: "Ship3D",
Ship3D: "ModelGLTF"
};
if (element.name == otherName[stringModel]) {
scene.remove(element);
}
});
// Switch function
switch (stringModel) {
case "ModelGLTF":
scene.add(ModelGLTF);
break;
case "Ship3D":
scene.add(ship3D);
break;
default:
break;
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
