objectTemplate = new Vessel.BaseObject();
objectTemplate.id = "First Object";
objectTemplate.boxDimensions = {
"length": 10,
"breadth": 4,
"height": 2
};
myObject = new Vessel.DerivedObject();
myObject.id = "Tank1";
myObject.baseObject = objectTemplate;
myObject.affiliations = {};
myObject.referenceState = {
"xCentre": 10,
"yCentre": 0,
"zBase": 0
};
emptySpec = ({
"designState": {
"calculationParameters": {
"Draft_design": 2
}
},
"structure": {
"hull": {
"attributes": {
"LOA": 20
},
"halfBreadths": {
"waterlines": [],
"stations": [],
"table": []
}
},
"decks": {},
"bulkheads": {}
},
"baseObjects": [],
"derivedObjects": []
});
ship = new Vessel.Ship(emptySpec);
ship.baseObjects[objectTemplate.id] = objectTemplate;
ship.derivedObjects[myObject.id] = myObject;
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(30);
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.
