spec = ({
"designState": {
"calculationParameters": {
"Draft_design": 2
}
},
"structure": {
"hull": {
"attributes": {
"LOA": 20,
"BOA": 8,
"Depth": 4
},
"halfBreadths": {
"waterlines": [0, 1],
"stations": [0, 1],
"table": [[0, 0], [1, 1]]
}
},
"decks": {
"Deck_1": {
"zFloor": 3,
"thickness": 0.01,
"xAft": 0,
"xFwd": 20,
"yCentre": 0,
"breadth": 8,
"density": 7850
}
},
"bulkheads": {
"Bulkhead_1": {
"xAft": 10,
"thickness": 0.01,
"density": 7850
}
}
},
"baseObjects": [],
"derivedObjects": []
});
ship = new Vessel.Ship(spec);
ship3D = new Ship3D(ship);
{
const renderer = new THREE.WebGLRenderer({antialias: true});
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xA9CCE3);
const height = 600;
const aspect = width / height;
const camera = new THREE.PerspectiveCamera(50);
camera.up.set(0, 0, 1);
scene.add(camera);
const LOA = ship.structure.hull.attributes.LOA;
camera.position.set(0.7 * LOA, 0.7 * LOA, 0.7 * LOA);
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(LOA / 2, 0, 0);
controls.update();
invalidation.then(() => renderer.dispose());
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
scene.add(ship3D);
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.
