31:T8e9,{ renderer.domElement.style.borderRadius = '8px'; const illustration = await whale_vs_bus_svg.text(); const svg_data = (new DOMParser).parseFromString(illustration, "image/svg+xml"); const svg_illustration = d3.select(svg_data.documentElement); const svgElement = svg_illustration.node(); svgElement.setAttribute("width", "100%"); // Width set to 100% of the container svgElement.setAttribute("height", "auto"); svgElement.setAttribute("viewBox", "-100 -100 1200 1200"); // Adjusted to original SVG's aspect ratio return html`

Humpback
Whale

SCIENTIFIC NAME: Megaptera novaeangliae
TYPE: Mammal (Cetacean)
HABITAT: Oceans worldwide
DIET: Generalist feeder (primarily krill and small fish) LIFESPAN: 40 to 60 years
WEIGHT: 25 to 40 tons
SIZE: 14 to 17 meters

SIZE COMPARISON:

${svg_illustration.node()}

${renderer.domElement}

`; } 32:T5b2,The 3D model of the humpback whale was downloaded as a GLB file from Microsoft 3D Viewer. This binary file includes the texture data. An OBJ version was extracted from the GLB file, resulting in a much lighter version without texture. Both files are compatible with MeshLab. **Files avaiable** (see the ᥫ files pane): * whale.glb (GLB binary file) * whale.obj (OBJ file) Once the mesh file is imported into MeshLab, it is important to rotate the mesh and adjust the axes to ensure consistent orientation with other software like Blender. To flip and swap the axes, navigate to: Filters **>** Normals, Curvatures and Orientation
**>** Transform: Flip and/or swap axis Next, the desired orientation of the model can be adjusted from the viewport. Camera information can then be saved by following these two steps: Filters **>** Camera **>** Set Mesh Camera Windows **>** Save camera settings to file This action will save the camera settings to a file in XML format, providing a structured description similar to the XML example presented in this notebook.33:T57f,camera = { lockCamera; // Camera settings const aspect = width / height; const near = 0.1; const far = 1000; const camera = new THREE.PerspectiveCamera(cameraFocalLength, aspect, near, far); // Transformation matrix to align the Three.js coordinate system with the original system. // This matrix rotates the Y-axis to the Z-axis and inverts the X-axis to maintain consistent orientation. const coordinateSystemTransformationMatrix = new THREE.Matrix4(); coordinateSystemTransformationMatrix.set( 1, 0, 0, 0, 0, 0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1 ); // Set camera's position camera.position.set(cameraPosition[0], cameraPosition[2], -cameraPosition[1]); // Set camera's orientation // Create the original rotation matrix const rotationMatrix = new THREE.Matrix4(); rotationMatrix.set( cameraOrientation[0], cameraOrientation[4], cameraOrientation[8], 0, cameraOrientation[1], cameraOrientation[5], cameraOrientation[9], 0, cameraOrientation[2], cameraOrientation[6], cameraOrientation[10], 0, 0, 0, 0, 1 ); const combinedMatrix = new THREE.Matrix4().multiplyMatrices(coordinateSystemTransformationMatrix, rotationMatrix); // Set the quaternion for the camera const quaternion = new THREE.Quaternion().setFromRotationMatrix(combinedMatrix); camera.quaternion.copy(quaternion); return camera; } 34:T496,python_script_Blender = ` import bpy from mathutils import Matrix, Vector camera_name = 'Camera' if camera_name in bpy.data.objects: camera = bpy.data.objects[camera_name] # Set the camera position (translation vector) directly from MeshLab camera.location = Vector((${cameraPosition[0]}, ${cameraPosition[1]}, ${cameraPosition[2]})) # (X, Y, Z) # Define the rotation matrix using the provided rotation valuefs rotation_matrix = Matrix(( (${cameraOrientation[0]}, ${cameraOrientation[1]}, ${cameraOrientation[2]}), # axis0 (X) (${cameraOrientation[4]}, ${cameraOrientation[5]}, ${cameraOrientation[6]}), # axis1 (Y) (${cameraOrientation[8]}, ${cameraOrientation[9]}, ${cameraOrientation[10]}), # axis2 (Z) )) rotation_matrix.transpose() # Apply the rotation matrix to the camera camera.rotation_mode = 'XYZ' # Set rotation mode camera.rotation_euler = rotation_matrix.to_euler() # Set rotation using the matrix # Set the camera focal length camera.data.lens = ${cameraFocalLength} # Focal length in mm else: print(f"Camera object '{camera_name}' not found.") `35:T493,// Create renderer renderer = { const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, }); renderer.setSize(width, height); renderer.setPixelRatio(devicePixelRatio); if(!lockCamera) { // Initialize OrbitControls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.target.copy(new THREE.Vector3(targetPosition[0],targetPosition[1],targetPosition[2])); controls.update(); controls.enableRotate = true; controls.enableZoom = true; controls.enablePan = true; // Set limits for zooming controls.minDistance = 2; // Minimum zoom in controls.maxDistance = 20; // Maximum zoom out // Animation loop for rendering const animate = () => { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }; animate(); // Cleanup on invalidation invalidation.then(() => { controls.dispose(); }); } // Cleanup on invalidation invalidation.then(() => { renderer.dispose(); }); return renderer; } 36:[{"id":"1924c05270e1788c570d73ef8bfb9e32b5f07997aa50312efdebd21a86dddf1bf6f644ae16cba8de438a424391b402e14d028404c794cdf4677895696099feb7","href":"https://static.observableusercontent.com/files/1924c05270e1788c570d73ef8bfb9e32b5f07997aa50312efdebd21a86dddf1bf6f644ae16cba8de438a424391b402e14d028404c794cdf4677895696099feb7","name":"whale.glb","type":"model/gltf-binary","lastModified":1730711316850.599,"size":11286324},{"id":"0e0d41a7c77c3b4e5bbbcb209af077ef97c62d8140e45c8a234734f34b17de62b8171622ba2ed7f8f641aec3fe25d50355301839ebddd8bc3974cdb30c9f0e0f","href":"https://static.observableusercontent.com/files/0e0d41a7c77c3b4e5bbbcb209af077ef97c62d8140e45c8a234734f34b17de62b8171622ba2ed7f8f641aec3fe25d50355301839ebddd8bc3974cdb30c9f0e0f","name":"Blender_Screen_Capture.png","type":"image/png","lastModified":1730799320241.837,"size":952114},{"id":"e8f5d7dfe4f86feaf420c2626c8f62afe4e0987d493daed6bac4e20d196ff7e1ea99893e7ef9848600bf552c23e248dfb7d714960915bd3e5d39aab6464a13ce","href":"https://static.observableusercontent.com/files/e8f5d7dfe4f86feaf420c2626c8f62afe4e0987d493daed6bac4e20d196ff7e1ea99893e7ef9848600bf552c23e248dfb7d714960915bd3e5d39aab6464a13ce","name":"MeshLab_2021_Screen_Capture.PNG","type":"image/png","lastModified":1730802999008.419,"size":357725},{"id":"26d4f5f2f1a791d462befb3dfd9695d37a2c3489c4a05f7d6dce77c63aad4163854b030ac7ae116dee3345f3994c62f76ef0daad8458dd9c2edd08c13269fe54","href":"https://static.observableusercontent.com/files/26d4f5f2f1a791d462befb3dfd9695d37a2c3489c4a05f7d6dce77c63aad4163854b030ac7ae116dee3345f3994c62f76ef0daad8458dd9c2edd08c13269fe54","name":"whale.obj","type":"model/obj","lastModified":1730803116312.845,"size":1313574},{"id":"064ff569db0762e88ca146562d2163d0145b9676aff3dd38515798a65fee13c7950faa9160e87db9a1b0d4e91345c51beff730362724584f748a34628e66ab7d","href":"https://static.observableusercontent.com/files/064ff569db0762e88ca146562d2163d0145b9676aff3dd38515798a65fee13c7950faa9160e87db9a1b0d4e91345c51beff730362724584f748a34628e66ab7d","name":"whale.blend","type":"application/x-blender","lastModified":1730803615758.681,"size":13611577},{"id":"e47abadfcbc4d040c23ff22dcab50dda75f68462e3caa62078d2490b4aaf6d13f8cfec0135a751f0c7d15f5343689aaca3fe9e545f054ebb42678fd5f9fa04cc","href":"https://static.observableusercontent.com/files/e47abadfcbc4d040c23ff22dcab50dda75f68462e3caa62078d2490b4aaf6d13f8cfec0135a751f0c7d15f5343689aaca3fe9e545f054ebb42678fd5f9fa04cc","name":"humpback_whale_Meshlab_Three.js_Blender.png","type":"image/png","lastModified":1730809322390.558,"size":431214},{"id":"75c6444a631109d974f93e153cd41eded1a8e462c49252fbe4f8a7d63533a0b030fb75534f999d87cb87cc1aa99208314361116c2eeba7af4d49f39fc7925ab5","href":"https://static.observableusercontent.com/files/75c6444a631109d974f93e153cd41eded1a8e462c49252fbe4f8a7d63533a0b030fb75534f999d87cb87cc1aa99208314361116c2eeba7af4d49f39fc7925ab5","name":"humpback_whale_sound.mp3","type":"audio/mpeg","lastModified":1730836209701.655,"size":545280},{"id":"4e3cf94ce910e78717415dc8b34a3470ac2104ea1487dee084ee2521f1c221fb5f9a7dd2417a8e8c9cfd68e7edc396af5cda182c476ebc1f3e453edf649589b4","href":"https://static.observableusercontent.com/files/4e3cf94ce910e78717415dc8b34a3470ac2104ea1487dee084ee2521f1c221fb5f9a7dd2417a8e8c9cfd68e7edc396af5cda182c476ebc1f3e453edf649589b4","name":"whale_vs_12m_bus.svg","type":"image/svg+xml","lastModified":1730897372533.179,"size":11141}] 2f:{"title":"Camera position and orientation from MeshLab to Blender and three.js","cells":[{"id":0,"value":"# Camera position and orientation from *MeshLab* to *Blender* and *three.js*","pinned":false,"hidden":false,"mode":"md"},{"id":2854,"value":"**MeshLab** is a 3D mesh processing software developed by the *Visual Computing Laboratory* at the *National Research Council (Italy)*. It offers powerful tools for repairing meshes, stitching separate meshes, and performing photogrammetry, among other applications. For photogrammetry, its efficient “Raster alignment” tool enables 2D-to-3D registration, allowing a 3D model to be accurately aligned with a series of raster images. This process also leverages **camera information**: the six degrees of freedom of the camera and its focal length can be exported for use in other environments, expanding the tool's versatility.","pinned":false,"hidden":false,"mode":"md"},{"id":2875,"value":"This notebook explores the export of camera data from MeshLab for use in ***Blender*** and in ***three.js***. The GLTF model used for this purpose is a humpback whale retrieved from Microsoft's 3D Viewer.","pinned":false,"hidden":false,"mode":"md"},{"id":2896,"value":"---\n## Three.js and WebGL™ standard\nThis Observable notebook displays a 3D model using *Three.js*, a JavaScript library that facilitates the rendering of 3D graphics in web browsers via WebGL. The scene features a **GLTF model** of a humpback whale (see the ᥫ files pane), enhanced with **lighting** effects, while the **camera**'s position and orientation are derived from XML data obtained from MeshLab. \n\nAn illustration and text elements are overlaid onto the scene to enrich the visual.","pinned":false,"hidden":false,"mode":"md"},{"id":3058,"value":"audioElement = html`\n

Listen to the humpback whale\n
[Sound ©Thomas R. Kieckhefer]\n

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2136,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2003,"value":"viewof lockCamera = Inputs.toggle({label: htl.html`Lock the camera
(MeshLab saved camera settings)`, value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"viewof BKG_color = Inputs.color({label: \"Background color\", value: \"#344051\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3562,"value":"viewof Display_text = Inputs.toggle({label: \"Display description\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":954,"value":"viewof Display_origin = Inputs.toggle({label: \"Display the axes\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2879,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2894,"value":"## MeshLab","pinned":false,"hidden":false,"mode":"md"},{"id":2936,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":2932,"value":"meshlab_screen_capture = {\n const container = html`\n

Screen capture (MeshLab 2021.10): The camera data is displayed in the top left corner of the viewport. MeshLab provides an easy way to export this information in XML format.\n

👆🏻 Click to resize the illustration\n

Screen capture (Blender 4.2): Importing camera data from MeshLab using the Python script provided in this notebook.\n

👆🏻 Click to resize the illustration\n

MeshLab | Three.js | Blender: The same perspective is achieved across MeshLab, Three.js, and Blender by utilizing camera data from MeshLab.\n

👆🏻 Click to resize the illustration\n

`;\n\n container.onclick = () => {\n const currentWidth = container.style.width;\n container.style.width = currentWidth === \"600px\" ? \"100%\" : \"600px\";\n };\n\n return container; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"
\n\n---\n## Appendices","pinned":false,"hidden":false,"mode":"md"},{"id":720,"value":"GLTF_3D_Model = await (FileAttachment(\"whale.glb\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2942,"value":"whale_obj = await (FileAttachment(\"whale.obj\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":2954,"value":"whale_blender = await (FileAttachment(\"whale.blend\").url())","pinned":false,"hidden":false,"mode":"ojs"},{"id":3630,"value":"whale_vs_bus_svg = FileAttachment(\"whale_vs_12m_bus.svg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":2065,"value":"targetPosition = [-0.4, 0.7, -0.1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3109,"value":"### Audio","pinned":false,"hidden":false,"mode":"md"},{"id":3055,"value":"humpback_whale_sound = await (FileAttachment(\"humpback_whale_sound.mp3\")).url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3073,"value":"volume = (async () => {\n const audio = audioElement.querySelector(\"#sound\");\n\n await new Promise(resolve => audio.addEventListener(\"loadedmetadata\", resolve));\n\n return audio.volume = 0.2;\n})()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2229,"value":"### Camera from MeshLab","pinned":false,"hidden":false,"mode":"md"},{"id":2176,"value":"// Camera information from MeshLab\ncameraXML = `\n\n\n \n \n\n\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2142,"value":"// Retrieve the focal length from cameraXML\ncameraFocalLength = parseFloat(cameraXML.match(/FocalMm=\"([^\"]+)\"/)?.[1]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2058,"value":"// Retrieve the camera position from cameraXML\ncameraPosition = cameraXML.match(/TranslationVector=\"([^\"]+)\"/)[1].split(' ').slice(0, 3).map(value => parseFloat(value) * -1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":2116,"value":"// Retrieve the camera orientation from cameraXML\ncameraOrientation = cameraXML.match(/RotationMatrix=\"([^\"]+)\"/)[1].split(' ').slice(0, 12).map(parseFloat);","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2266,"value":"### Python script for Blender","pinned":false,"hidden":false,"mode":"md"},{"id":2268,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2227,"value":"### Three.js","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"THREE = {\n // import threejs\n const three = await require(\"three@0.139.2\");\n window.THREE = three;\n\n // import plugins\n await require(\"three@0.139.2/examples/js/controls/OrbitControls.js\").catch((e) => { console.warn(e) });\n await require(\"three@0.139.2/examples/js/loaders/GLTFLoader\").catch((e) => { console.warn(e) });\n\n console.log(three);\n return three;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"loadModel = {\n\n const loader = new THREE.GLTFLoader();\n const loadPromise = () => new Promise((resolve, reject) => {\n loader.load(\n GLTF_3D_Model,\n (model) => { \n resolve(model);\n },\n undefined,\n (error) => {\n reject(error);\n },\n );\n }); \n \n const result = await loadPromise().catch((e) => { console.warn(e) });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"// create scene\nscene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(BKG_color);\n\n // Point Light (Main Light)\n const pointLight = new THREE.PointLight(0x555566, 50, 100);\n pointLight.position.set(0, 50, 50);\n pointLight.castShadow = true;\n scene.add(pointLight);\n \n // Ambient Light\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); //\n scene.add(ambientLight);\n \n // Hemisphere Light\n const hemiLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);\n scene.add(hemiLight);\n\n // 3D model\n scene.add(loadModel.scene);\n\n const axisHelper = new THREE.AxesHelper(20);\n if(Display_origin) {\n scene.add(axisHelper);\n }\n\n return scene;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"{\n while (true) {\n renderer.render(scene, camera);\n yield null;\n } \n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}