The avatar for @ferrari212
Felipe Ferrari
Sailing in data ocean.
Published
From Concept to Simulation
Edited
Jan 29, 2022
1
From Concept to Simulation
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.1 - GUI controller interface - Dropdown menu
Section 3.2 - GUI controller interface - Check Box List
Chapter 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
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Gunnerus.structure.decks.Deck_A.affiliations.group
Insert cell
Insert cell
scale_check_box = gui.addFolder("Check Box List")
Insert cell
Insert cell
modelStyle = {
const modelStructure = {
model: "Ship3D",
displayOutline: true
};

return modelStructure;
}
Insert cell
Insert cell
function toggleElement(element, name) {
if (element.children.lenght == 0) {
return;
}

element.children.forEach(child => {
if (child.group == name) {
// Verify if it is visible trought the masks layers
if (child.layers.mask) {
child.layers.disable(0);
} else {
child.layers.enable(0);
}
}
toggleElement(child, name);
});
}
Insert cell
Insert cell
{
scale_check_box
.add(modelStyle, "displayOutline")
.onChange(newValue => {
toggleElement(scene, "Machinery");
})
.name("Machinery");

scale_check_box
.add(modelStyle, "displayOutline")
.onChange(newValue => {
toggleElement(scene, "Tank");
})
.name("Tank");

scale_check_box
.add(modelStyle, "displayOutline")
.onChange(newValue => {
toggleElement(scene, "Compartment");
})
.name("Compartment");

scale_check_box
.add(modelStyle, "displayOutline")
.onChange(newValue => {
toggleElement(scene, "Deck");
})
.name("Deck");

scale_check_box
.add(modelStyle, "displayOutline")
.onChange(newValue => {
toggleElement(scene, "Bulkheads");
})
.name("Bulkheads");

scale_check_box.open();
}
Insert cell
Insert cell
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);
scale_check_box.domElement.hidden = true;
break;

case "Ship3D":
scene.add(ship3D);
scale_check_box.domElement.hidden = false;
break;

default:
break;
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more