Gunnerus_Complete_Example.html

<html>
	<head>
		<title>Ship in Ocean</title>
		<script src="../build/vessel.js"></script>

		<script src="3D_engine/legacy/three_r118.js"></script>
		<script src="./3D_engine/legacy/STLLoader.js"></script>
		<script src="3D_engine/legacy/GLTFLoader.js"></script>

		<script src="3D_engine/Ship3D_v2.js"></script>

		<!-- Upgrading to WaterShader2.js will remove the dependency
	on Mirror.js as well as open up possibilities for visualizing approximate water flows around vessels. -->
		<!-- <script src="libs/Mirror.js"></script>-->
		<!-- <script src="libs/WaterShader.js"></script> -->
		<script src="3D_engine/legacy/Water.js"></script>

		<script src="3D_engine/OrbitControls_v2.js"></script>
		<script src="3D_engine/dat.gui.min.js"></script>
		<script src="3D_engine/legacy/skybox_from_examples_r118.js"></script>
		<script src="libs/browse_files_Elias_Hasle.js"></script>

		<script src="3D_engine/Patch_interpolation.js"></script>
		<script src="3D_engine/renderRayCaster.js"></script>
		<!--<script src="Moving_bodies_Elias_Hasle.js"></script>-->
		<script src="3D_engine/Playback.js"></script>
		<!-- <script src="snippets/Configurable_ocean.js"></script> -->
		<script src="3D_engine/Configurable_ocean_v2.js"></script>
		<!--<script src="keyboard_arrow_input_Elias_Hasle.js"></script>-->
	</head>

	<style>
		table {
			margin-top: 15px;
			margin-bottom: 10px;
		}

		table,
		td {
			color: #000;
			border: 1px solid #fff;
		}

		td {
			padding-right: 10px;
		}

		tr:nth-child(even) {
			background-color: #cccccc;
		}

		tr:nth-child(odd) {
			background-color: #fff;
		}

		#button {
			position: fixed;
			bottom: 16px;
			right: 16px;

			padding: 12px;
			border-radius: 50%;
			margin-bottom: 0px;

			background-color: #fff;
			opacity: 0.9;
			z-index: 999;

			box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
		}

		#tooltip {
			/* visibility: hidden; */
			position: absolute;
			font-family: Helvetica;
			display: block;
			background-color: black;
			color: #fff;
			text-align: center;
			padding: 5px 10px;
			border-radius: 6px;
			z-index: 101;
		}

		/* ******* Signature template ******* */

		#info {
			position: absolute;
			color: #011C40;
			top: 0px;
			width: 100%;
			padding: 10px;
			box-sizing: border-box;
			text-align: center;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			pointer-events: none;
			z-index: 1;
		}

		#info a {
			color: #A60D0D;
			pointer-events: auto;
		}

		/* ******* ******* ******* */

		.close {
			position: absolute;
			right: 10px;
			top: 5px;
			width: 16px;
			height: 22px;
			opacity: 0.6;
		}
		.close:hover {
			opacity: 1;
			cursor: pointer;
		}
		.close:before,
		.close:after {
			position: absolute;
			left: 10px;
			content: " ";
			height: 10px;
			width: 2px;
			background-color: #fff;
		}
		.close:before {
			transform: rotate(45deg);
		}
		.close:after {
			transform: rotate(-45deg);
		}

		/* LOADER */
		#loader-wrapper {
			width: 100%;
			height: 100%;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #00509e;
			color: #fff;
			font-family: Helvetica;
			z-index: 105;
		}

		.loader {
			display: inline-block;
			width: 50px;
			height: 50px;
			position: relative;
			margin-top: 17%;
			border-radius: 50%;
			vertical-align: middle;
		}
		.loader,
		.loader:before,
		.loader:after {
			animation: 1s infinite ease-in-out;
		}
		.loader:before,
		.loader:after {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.loader-white {
			background-color: #fff;
		}

		.loader-1 {
			animation-name: loader1;
		}
		@-webkit-keyframes loader1 {
			from {
				transform: scale(0);
				opacity: 1;
			}
			to {
				transform: scale(1);
				opacity: 0;
			}
		}
	</style>

	<body>
		<div id="info">
			<a href="http://vesseljs.org/" target="_blank" rel="noopener">Vessel.js</a> Manoeuvring <br/>
			Author: <a href="https://shiptodata.com/" target="_blank" rel="noopener">Felipe Ferrari</a> - Msc. Student Ship Design
			<br>
			CAD Models: <a href="https://www.ntnu.edu/ihb" target="_blank" rel="noopener">IHB NTNU</a>
			<br>
			Supervisor: <a href="https://www.ntnu.edu/employees/henrique.gaspar" target="_blank" rel="noopener">Henrique M. Gaspar</a>
		</div>
		<div id="tooltip"></div>

		<div id="loader-wrapper">
			<div class="loader loader-white loader-1"></div>
			<div><h1 style="font-style: italic">Loading...</h1></div>
		</div>

		<a id="button" target="_blank" href="https://github.com/shiplab/vesseljs/blob/master/examples/Gunnerus_Complete_Example.html" title="View source code on GitHub" style="">
			<img src="..\images\code-24px.svg" />
		</a>

		<script>
			"use strict"

			//Globals
			var renderer, camera, controls, gui, stats
			var scene, zUpCont, playback, bodies, ocean, ship3D, shipGLTF
			var hydrostatics
			var scale, modelStyle

			// Global variables for raycaster control
			var intersected
			var tooltipElement = document.getElementById("tooltip")

			// Marker which ensure the table is being displayed
			tooltipElement.displayingPropTable = false

			;(function main() {
				//Renderer setup
				//document.body.style = "overflow: hidden;";
				document.body.style.overflow = "hidden"
				var container = document.createElement("div")
				container.id = "SimulationWindow"
				//container.style = "position: absolute; top: 0; left: 0;"
				Object.assign(container.style, {
					position: "absolute",
					top: 0,
					left: 0,
					width: "100vw",
					height: "100vh"
				})
				document.body.appendChild(container)
				renderer = new THREE.WebGLRenderer({ antialias: true })
				//renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.setClearColor(0xa9cce3)
				container.appendChild(renderer.domElement)

				playback = new Playback({ parentGUI: gui })

				//Scene setup:
				scene = new THREE.Scene()
				let sun = new THREE.DirectionalLight(0xffffff, 2)
				sun.position.set(-512, 246, 128)
				scene.add(sun)

				//Ocean size
				let oSize = 2048

				//Use Z up from now on:
				THREE.Object3D.DefaultUp.set(0, 0, 1)
				zUpCont = new THREE.Group()
				// This rotation must be deleted in order to garantee the real coordinate
				// zUpCont.rotation.x = -0.5 * Math.PI;
				scene.add(zUpCont)

				var skybox = new Skybox(oSize)
				skybox.name = "Skybox"
				scene.add(skybox)

				//Camera setup
				camera = new THREE.PerspectiveCamera(26, window.innerWidth / window.innerHeight, 1, 1000000)

				let onResize = function () {
					let w = container.clientWidth
					let h = container.clientHeight
					renderer.setSize(w, h)
					camera.aspect = w / h
					camera.updateProjectionMatrix()
				}

				camera.up.set(0, 1, 0)
				camera.lookAt(20, 10, 0)

				window.addEventListener("resize", onResize, false)
				onResize()
				camera.position.set(oSize * 0.03, oSize * 0.03, oSize * 0.03)
				camera.lookAt(zUpCont.position)
				// zUpCont.add(camera)
				// scene.add(camera)

				controls = new THREE.OrbitControls(camera, renderer.domElement)
				//controls.minDistance = 0;
				// controls.maxDistance = 1.25 * oSize;
				controls.enablePan = false
				// controls.maxPolarAngle = 0.5 * Math.PI - 0.1;
				// controls.minPolarAngle = 0.1;

				// zUpCont.add(new THREE.AxesHelper(1000))
				zUpCont.add(new THREE.HemisphereLight(0xccccff, 0x666688, 1))

				ocean = new Ocean({
					parentGUI: gui,
					sunDir: sun.position.clone().normalize(),
					size: oSize,
					segments: 127
				})

				// playback.add(ocean)
				ocean.name = "Ocean"
				scene.add(ocean)
				scene.rotation.x = -Math.PI / 2

				// scene.rotation.x = Math.PI;
				// scene.add(new THREE.AxesHelper(500));

				Vessel.loadShip("ship_specs/gunnerus.json", function (ship) {
					ship3D = new Ship3D(ship, {
						// stlPath: "specs/STL files",
						stlPath: "3D_models/STL/Gunnerus",
						upperColor: 0x33aa33,
						lowerColor: 0xaa3333,
						hullOpacity: 1,
						deckOpacity: 1,
						objectOpacity: 1
					})
					ship3D.name = "Ship3D"
					ship3D.show = "on"
					// zUpCont.add(ship3D)

					// Take the hydrostatics informations
					var ship = ship3D.ship
					var draftDesign = ship.designState.calculationParameters.Draft_design
					var hull = ship.structure.hull

					hydrostatics = hull.calculateAttributesAtDraft(draftDesign)
					// ship3D.shipState
					// ship3D.ship.calculateStability()
					// Maybe take KMt or KMl to the vessel.js
					hydrostatics.KMt = hydrostatics.BMt + hydrostatics.KB
					hydrostatics.KMl = hydrostatics.BMl + hydrostatics.KB
				})

				// import binary glTF file
				var boatPath = "3D_models/GLTF/Gunnerus.glb"
				var loaderGLTF = new THREE.GLTFLoader()
				loaderGLTF.load(boatPath, async gltf => {
					shipGLTF = gltf.scene
					// mesh.material = new THREE.MeshLambertMaterial();
					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
					}
					await zUpCont.add(shipGLTF)

					var fadeTarget = document.getElementById("loader-wrapper");
					var fadeEffect = setInterval(function () {
						if (!fadeTarget.style.opacity) {
							fadeTarget.style.opacity = 1;
						}

						if (fadeTarget.style.opacity > 0) {
							fadeTarget.style.opacity -= 0.05;
						} else {
							clearInterval(fadeEffect)
							fadeTarget.remove();
						}
					}, 50);
				})

				// Recursive function to find element and delete
				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
							child.layers.mask ? child.layers.disable(0) : child.layers.enable(0)
						}
						toggleElement(child, name)
					})
				}

				modelStyle = {
					model: "ModelGLTF",
					scene: "On",
					displayOutline: true
				}

				// //GUI setup (comment out to remove gui)
				gui = new dat.GUI()
				scale = []

				scale.push(gui.addFolder("Visualization parameters"))
				scale.push(gui.addFolder("Check Box List"))
				scale[1].domElement.hidden = true
				scale.push(gui.addFolder("Hydrostatic Information"))
				scale[2].domElement.hidden = true

				scale[0]
					.add(modelStyle, "model", {
						Model: "ModelGLTF",
						Blocks: "Ship3D"
					})
					.onChange(newValue => {
						function verifyElement(element) {
							var otherName = {
								ModelGLTF: "Ship3D",
								Ship3D: "ModelGLTF"
							}
							if (element.name == otherName[newValue]) {
								zUpCont.remove(element)
							}
						}

						zUpCont.children.forEach(verifyElement)

						// Switch function
						switch (newValue) {
							case "ModelGLTF":
								zUpCont.add(shipGLTF)
								scale[1].domElement.hidden = scale[2].domElement.hidden = true
								break
							case "Ship3D":
								zUpCont.add(ship3D)
								scale[1].domElement.hidden = scale[2].domElement.hidden = false
								if (scale[2].__controllers.length == 0) {
									const HYDRO_RESULTS = ["KMt", "KMl", "LCF", "LCB", "Cb", "Cp"]
									HYDRO_RESULTS.forEach(e => {
										scale[2].add(hydrostatics, e)
									})
								}
								break
							default:
								break
						}
					})
					.name("View")
				scale[0]
					.add(modelStyle, "scene", {
						On: "On",
						Off: "Off"
					})
					.onChange(newValue => {
						switch (newValue) {
							case "On":
								scene.getObjectByName("Skybox").visible = true
								scene.getObjectByName("Ocean").visible = true
								break
							case "Off":
								scene.getObjectByName("Skybox").visible = false
								scene.getObjectByName("Ocean").visible = false
								break
							default:
								break
						}
					})
					.name("Scenario")
				// scene.getObjectByName("Ocean").visible = false
				scale[0].open()
				;["Machinery", "Tank", "Compartment", "Deck", "Bulkheads", "Hull"].forEach(e => {
					scale[1]
						.add(modelStyle, "displayOutline")
						.onChange(newValue => {
							e === "Hull" ? (zUpCont.children[1].hull3D.visible = !zUpCont.children[1].hull3D.visible) : toggleElement(zUpCont, e)
						})
						.name(e)
				})
				scale[1].open()
				scale[2].open()
				// playback.play()
				requestAnimationFrame(animate)
			})()

			var mouse = new THREE.Vector2()

			function onMouseMove(event) {
				// calculate mouse position in normalized device coordinates
				// (-1 to +1) for both components
				mouse.clientX = event.clientX
				mouse.clientY = event.clientY

				mouse.x = (event.clientX / window.innerWidth) * 2 - 1
				mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
			}

			window.addEventListener("mousemove", onMouseMove, false)

			// Enabling setting Layers
			// scene.layers.enable(1)

			// ToolTip function shows the object name when mouse is on @ferrari212
			function toolTip(tooltip, intersected) {
				if (intersected.status) {
					// Inserting tooltip
					tooltip.style.visibility = "visible"
					tooltip.style.left = mouse.clientX + 20
					tooltip.style.top = mouse.clientY + 10
					tooltip.textContent = intersected.name
					zUpCont.remove(zUpCont.getObjectByName(intersected.name))
				} else {
					// Taking off tool tip
					tooltip.style.visibility = "hidden"
				}
			}

			// Function shows the object information when object is clicked on @ferrari212
			function clickedInformation(Ship3D, tooltipElement, intersected) {
				// Ship3D is the JSON info. of the ship
				// tooltipElement is the html div that will contain the info
				// Intersected is the element with the mouse on
				document.body.style.cursor = "pointer"

				var ship = Ship3D.ship
				var name = intersected.name
				var element = ship.derivedObjects[name] || ship.structure.decks[name] || ship.structure.bulkheads[name]

				// Classes for changing the inner displayed table @ferrari
				class ListMarkup {
					constructor() {
						this.innerHTML = `<a onclick="tooltipElement.displayingPropTable = false;" class="close"></a><table>`
					}
					extendSingleInnerHTML(key, value, unit = "") {
						this.innerHTML += `<tr><td> ${key} </td><td> ${value} ${unit} </td></tr>`
					}
					arrayExtendInnerHTML(object, fromNumber = 0, toEnd = 0, unit = "") {
						var keys = Object.keys(object)
						for (let i = fromNumber; i < keys.length - toEnd; i++) {
							this.innerHTML += `<tr><td> ${keys[i]} </td><td> ${object[keys[i]]} ${unit} </td></tr>`
						}
					}
					closeInnerHTML() {
						this.innerHTML += `</table>`
					}
				}

				// Add the table with the informations
				function addTable(block, element) {
					// Invalidate function in case of element undefined
					if (element === undefined) return
					var listMarkup = new ListMarkup()
					tooltipElement.displayingPropTable = true
					if (element.id === undefined) {
						// For structural elements
						var keys = Object.keys(element)
						listMarkup.extendSingleInnerHTML("Group", element.affiliations.group)
						listMarkup.arrayExtendInnerHTML(element, 1)
					} else {
						// For non structural elements
						listMarkup.extendSingleInnerHTML("Id", element.id)
						listMarkup.arrayExtendInnerHTML(element.baseObject.boxDimensions, 0, 0, "m")
						listMarkup.arrayExtendInnerHTML(element.referenceState, 0, 0, "m")
					}

					listMarkup.closeInnerHTML()

					// Inserting tooltip
					block.style.visibility = "visible"
					block.style.left = mouse.clientX + 20
					block.style.top = mouse.clientY + 10
					block.innerHTML = listMarkup.innerHTML
					zUpCont.remove(zUpCont.getObjectByName(element.name))
				}

				document.getElementById("SimulationWindow").onclick = () => addTable(tooltipElement, element)
			}

			function animate(millitime) {
				camera.lookAt(0, 5, 0)
				ocean.water.material.uniforms.time.value += 1 / 60

				// ocean.water.render();

				renderer.render(scene, camera)
				requestAnimationFrame(animate)

				// Apply the function RayCaster
				intersected = renderRayCaster(mouse, camera, zUpCont, intersected)

				// Apply the click information function
				if (intersected.name === undefined) {
					document.body.style.cursor = "default"
					document.getElementById("SimulationWindow").onclick = false
				} else {
					clickedInformation(ship3D, tooltipElement, intersected)
				}

				// In case the element was not clicked the toolTip Function will be triggered
				if (!tooltipElement.displayingPropTable) {
					toolTip(tooltipElement, intersected)
				}
			}
		</script>
	</body>
</html>