2c:null 2d:["$","title",null,{"children":"Section 2.6 - Creating a GLTF realistic model | Felipe Ferrari | Observable"}] 32:T4d0, { 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; }33:[] 30:{"id":"215095beab0a6558","slug":"section-2-6-inserting-gltf-and-creating-a-more-realistic-mod","title":"Section 2.6 - Creating a GLTF realistic model","thumbnail":"143e523f57a6a64d8b84880c9d8c99c7ee840ab2d0fb128cb907c944fc5ba76b","access_level":"public","create_time":"$D2020-07-25T11:42:08.685Z","update_time":"$D2022-03-06T08:54:24.984Z","view_time":null,"first_public_time":"$D2020-07-26T19:27:53.654Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d87babdb83b49aab","login":"ferrari212","name":"Felipe Ferrari","avatar_url":"https://avatars-next.observableusercontent.com/9f46888d11f1719173b012c1de36ec52e2071ef6ff70202a1748014cd8f31bbd","tier":"starter_2024"},"version":361,"publish_version":361,"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":4,"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 2.6 - Creating a GLTF realistic model","cells":[{"id":0,"value":"md`\n# Section 2.6 - Creating a GLTF realistic model\n\nA good practice for a realistic model is using the GLTF format. To introduce the model it will be used the snippets that allows the introduction of GLTF model **[1]** in the THEE.js library:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"loaderGLTF = new THREE.GLTFLoader()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`\nThe GLTF model is going to be imported from a external source as showed in defined in [boatPath](https://github.com/ferrari212/vesseljs/blob/master/examples/3D_models/GLTF/Gunnerus.glb):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"boatPath = \"https://ferrari212.github.io/vesseljs/examples/3D_models/GLTF/Gunnerus.glb\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"md`\nThe following code is responsible for inserting the defined path into the scene:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"{\n loaderGLTF.load(\n boatPath,\n (gltf) => {\n var shipGLTF = gltf.scene;\n shipGLTF.rotation.x = Math.PI / 2;\n shipGLTF.rotation.y = -Math.PI / 2;\n shipGLTF.position.set(-1, 0, 0);\n shipGLTF.name = \"ModelGLTF\";\n\n if (shipGLTF.material) {\n shipGLTF.material.side = THREE.DoubleSide;\n }\n\n scene.add(shipGLTF);\n },\n (xhr) => {\n mutable loaderPecentage = (xhr.loaded / 31780028) * 100;\n }\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"md`## *The 3D model is* ${loaderPecentage | 0} % *loaded*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"html`\n

[<< Previous](https://observablehq.com/@ferrari212/section-2-5-final-consideration?collection=@ferrari212/from-hull-to-simulation) || Top || [Next >>](https://observablehq.com/@ferrari212/section-3-1-gui-controller-interface)

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`### References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`\n**[1] GLTFLoader ** – A loader for glTF 2.0 resources. [https://threejs.org/docs/#examples/en/loaders/GLTFLoader](https://threejs.org/docs/#examples/en/loaders/GLTFLoader)\n\n**[2] Object Visualization ** – Icaro Fonseca [/@icarofonseca/object-visualization](https://observablehq.com/@icarofonseca/object-visualization)\n\n**[3] Loading Bar ** – Leonardo Yu [https://observablehq.com/@c23ly/loading-bar](https://observablehq.com/@c23ly/loading-bar)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`### Snippets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"mutable loaderPecentage = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"scene = new THREE.Scene();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"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 await require(\"three@0.99.0/examples/js/loaders/STLLoader.js\").catch(() => {});\n await require(\"three@0.99.0/examples/js/loaders/GLTFLoader.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"