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 ElementsChapter 3 - Principles of System Engineering Applied to GunnerusSection 3.1 - GUI controller interface - Dropdown menuSection 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 2.6 - Creating a GLTF realistic model
loaderGLTF = new THREE.GLTFLoader()
{
loaderGLTF.load(
boatPath,
(gltf) => {
var shipGLTF = gltf.scene;
shipGLTF.rotation.x = Math.PI / 2;
shipGLTF.rotation.y = -Math.PI / 2;
shipGLTF.position.set(-1, 0, 0);
shipGLTF.name = "ModelGLTF";
if (shipGLTF.material) {
shipGLTF.material.side = THREE.DoubleSide;
}
scene.add(shipGLTF);
},
(xhr) => {
mutable loaderPecentage = (xhr.loaded / 31780028) * 100;
}
);
}
{
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = 2.3;
scene.background = new THREE.Color(0xA9CCE3);
const height = 600;
const aspect = width / height;
const camera = new THREE.PerspectiveCamera(50, aspect);
camera.up.set(0, 0, 1);
scene.add(camera);
camera.position.set(30, 20, 20);
function onWindowResize() {
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
window.addEventListener('resize', onWindowResize);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target = new THREE.Vector3(0, 0, 0);
controls.update();
invalidation.then(() => renderer.dispose());
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
const mainLight = new THREE.DirectionalLight(0xffffff, 1);
mainLight.position.set(1, 1, 1);
scene.add(ambientLight, mainLight);
var animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
yield renderer.domElement;
}
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.
