2b:null 2c:["$","title",null,{"children":"Section 4.1 - Coordinate Reference System | Felipe Ferrari | Observable"}] 31:T545,md` Before starting into the analysis using Vessel.js library it is essential to figure out the system of references adoption and its particularities. The library is based upon the Three.js and its contents are structured to allow the application in this library without friction, however, the Three.js uses a Y reference system pointing to the top that is distinct from the pattern adopted in the naval architecture literature. The Figure bellow depicts the difference between those two types of reference.

${await FileAttachment("reference_system.jpg").image()}

Image: Reference system comparison

In the end, this means there must be held a ninety-degree rotation through the X axis to fit one reference system into the other. To achieve this objective it is used the THREE.Object3D.DefaultUp.set( 0, 0, 1 ) predefined in Three.js library: ~~~~js THREE.Object3D.DefaultUp.set( 0, 0, 1 ); var zUpCont = new THREE.Group(); scene.add( zUpCont ); ~~~~ To figure out the results from this adoption we applied it in a scene, where a white ball is illuminate by a red light from the top, following transformation described above: `32:T585,{ const renderer = new THREE.WebGLRenderer({ antialias: true }); // scene.background = new THREE.Color(0xA9CCE3); const height = 300; const width = 500; const aspect = width / height; zUpCont.add(new THREE.AxesHelper(5)); const camera = new THREE.PerspectiveCamera(26, aspect, 1, 10000); camera.position.set(10, 60, 15); camera.up.set(0, 0, 1); scene.add(camera); 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); // scene.add(ship3D); const ambientLight = new THREE.AmbientLight(0xffffff, 0.1); scene.add(ambientLight); const geometry = new THREE.SphereGeometry(2, 32, 32); const material = new THREE.MeshStandardMaterial({ color: 0xffffff }); const sphere = new THREE.Mesh(geometry, material); sphere.castShadow = true; //default is false sphere.receiveShadow = false; //default zUpCont.add(sphere); var animate = function() { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); yield renderer.domElement; }33:[{"id":"5c986cf9837df9ee6bebcf971dddefefc43390ca8ee2610448f64b9f94162bb332c6b2529acc998ead0e1ca06ecf0d6a3e1858d05abc6317291074b95c2b5eca","href":"https://static.observableusercontent.com/files/5c986cf9837df9ee6bebcf971dddefefc43390ca8ee2610448f64b9f94162bb332c6b2529acc998ead0e1ca06ecf0d6a3e1858d05abc6317291074b95c2b5eca","name":"reference_system.jpg","type":"image/jpeg","lastModified":1616339524266.276,"size":69648}] 2f:{"id":"d6e39865ec0947c5","slug":"section-4-1-coordinate-reference-system","title":"Section 4.1 - Coordinate Reference System","thumbnail":"826115b0f3cfc9271a106ede3069643e52a9ff89b2d24f64229049f7682d55c5","access_level":"public","create_time":"$D2021-03-21T14:17:22.761Z","update_time":"$D2021-06-12T21:21:37.852Z","view_time":null,"first_public_time":"$D2021-03-24T07:06:28.690Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"d87babdb83b49aab","login":"ferrari212","name":"Felipe Ferrari","avatar_url":"https://avatars-next.observableusercontent.com/9f46888d11f1719173b012c1de36ec52e2071ef6ff70202a1748014cd8f31bbd","tier":"starter_2024"},"version":263,"publish_version":263,"role":null,"authored":false,"authors":[{"type":"individual","id":"a379b02a7775e50b","login":"ferrari212","name":"Felipe Ferrari","avatar_url":"https://avatars-next.observableusercontent.com/9f46888d11f1719173b012c1de36ec52e2071ef6ff70202a1748014cd8f31bbd","tier":null}],"members":[{"type":"individual","id":"a379b02a7775e50b","login":"ferrari212","name":"Felipe Ferrari","avatar_url":"https://avatars-next.observableusercontent.com/9f46888d11f1719173b012c1de36ec52e2071ef6ff70202a1748014cd8f31bbd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"ce744f5722745fd3","slug":"from-hull-to-simulation","title":"From Concept to Simulation","owner":{"id":"d87babdb83b49aab","login":"ferrari212","name":"Felipe Ferrari"}},"type":"notebook","body":{"title":"Section 4.1 - Coordinate Reference System","cells":[{"id":0,"value":"md`# Section 4.1 - Coordinate Reference System`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"zUpCont = new THREE.Group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"{\n THREE.Object3D.DefaultUp.set(0, 0, 1);\n scene.add(zUpCont);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"md`\nNow assume a practical pointing light in the position (0, 0, 10). As expected this light must be casted in the top direction in Vessel.js reference system, since the zUpCont condition was applied. The result can be depicted bellow:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"{\n const pointLight = new THREE.PointLight(0xff0000, 1, 10000);\n pointLight.position.set(0, 0, 10);\n pointLight.castShadow = true;\n zUpCont.add(pointLight);\n\n const helperSize = 1;\n const pointLightHelper = new THREE.PointLightHelper(pointLight, helperSize);\n scene.add(pointLightHelper);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`\nEventually third party components adapted to Three.js reference system must be integrated to the library, making necessary the transformation of coordinates bellow: ${tex.block`[x, y, z]_{Three.js} = [x, z , -y]_{Vessel.js}`} For this purpose it is considered a best practice to use the function Vessel.Vectors.rotateTaitBryan()

.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"vector = new THREE.Vector3(0, 20, 100)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"rotateCoordinates = function(vector) {\n  var rotateTaitBryan = Vessel.Vectors.rotateTaitBryan;\n  var rotVector = new THREE.Vector3(-Math.PI / 2, 0, 0);\n\n  var newVector = rotateTaitBryan(vector, rotVector);\n\n  return newVector;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"rotateCoordinates(vector)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"Vessel.Vectors.rotateTaitBryan","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`\n [<< Previous](https://observablehq.com/@ferrari212/chapter-4-simulations-and-analysis-principles-for-vessel-j?collection=@ferrari212/from-hull-to-simulation) || Top || [Next >>](https://observablehq.com/@ferrari212/section-4-2-advance-resistance-analysis-pt-1-propeller) 
 \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`###  References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`\n**[1] Three.js ** – [https://threejs.org/](https://threejs.org/)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`###  Observation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"md`The rotateTaitBryan was introduced in further versions of vessel.js and is not present in the current v0.1.1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"Object.assign(Vessel.Vectors, {\n  rotateTaitBryan: function(v, r) {\n    let c, s;\n\n    //Rotate around x axis\n    c = Math.cos(r.x);\n    s = Math.sin(r.x);\n    v = {\n      x: v.x,\n      y: v.y * c - v.z * s,\n      z: v.y * s + v.z * c\n    };\n\n    //Then around y axis\n    c = Math.cos(r.y);\n    s = Math.sin(r.y);\n    v = {\n      x: v.z * s + v.x * c,\n      y: v.y,\n      z: v.z * c - v.x * s\n    };\n\n    //Then around z axis\n    c = Math.cos(r.z);\n    s = Math.sin(r.z);\n    v = {\n      x: v.x * c - v.y * s,\n      y: v.x * s + v.y * c,\n      z: v.z\n    };\n\n    return v;\n  }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"md`###  Snippets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"scene = new THREE.Scene()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`###  Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"Vessel = require('ntnu-vessel@0.1.1/vessel.js').catch(() => window[\"Vessel\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"THREE = {\n  const THREE = (window.THREE = await require(\"three@0.99.0/build/three.min.js\"));\n  await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(\n    () => {}\n  );\n  await require(\"three@0.99.0/examples/js/loaders/STLLoader.js\").catch(\n    () => {}\n  );\n  return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}}
30:"$2f:body"