3MF 格式详解
3MF（3D Manufacturing Format）是一种开放标准的文件格式，专门用于三维制造和打印。3MF 格式旨在解决 STL 格式的局限性，提供更丰富和灵活的数据表示。3MF 文件是一种 ZIP 文件，其中包含了描述三维模型的 XML 文件和其他相关资源文件。
文件结构
3MF 文件的主要组成部分包括：
3D Model File（3D 模型文件）：
3D Model File：通常是3D/3dmodel.model，这是一个 XML 文件，描述了模型的几何信息和属性。Content Types：[Content_Types].xml 文件，定义了 ZIP 文件中各个文件的 MIME 类型。 Metadata Files（元数据文件）：
Thumbnails：缩略图文件，通常位于_rels/.rels 目录下，用于预览模型。Attachments：附加文件，可以包含纹理、材质等资源。 Relationships（关系文件）：
.rels 文件：定义了文件之间的关系，例如模型文件与纹理文件的关系。Extensions（扩展）：
Extensions：可以包含自定义的扩展信息，用于支持特定的功能或工具。文件内容
3D Model File： Model：根元素，包含模型的所有信息。Resources：定义了模型的各种资源，如几何体、材质、纹理等。Objects：定义了模型中的对象，每个对象可以引用一个几何体。Build：定义了模型的构建信息，包括对象的位置和变换。JavaScript 加载和导出 3MF 文件
为了在 JavaScript 中加载和导出 3MF 文件，可以使用一些现有的库，如 three.js 和 3mf-js。3mf-js 是一个用于处理 3MF 文件的 JavaScript 库。
安装依赖
首先，确保你已经安装了 three.js 和 3mf-js。你可以通过 npm 安装：
npm install three 3mf-js加载 3MF 文件
以下是一个使用 3mf-js 加载 3MF 文件的示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Load 3MF File with 3mf-js</title> <style> body { margin: 0; } canvas { display: block; } </style></head><body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="node_modules/3mf-js/dist/3mf.min.js"></script> <script> async function load3MF(url) { const response = await fetch(url); const arrayBuffer = await response.arrayBuffer(); const model = new ThreeMF.Model(); await model.load(arrayBuffer); return model; } async function init() { const model = await load3MF('path/to/your/model.3mf'); console.log('Model loaded:', model); // 在这里可以处理模型数据，例如将其转换为 Three.js 的几何数据 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 示例：将第一个对象转换为 Three.js 的几何数据 if (model.resources && model.resources.length > 0) { const resource = model.resources[0]; if (resource.mesh) { const geometry = new THREE.Geometry(); resource.mesh.vertices.forEach(vertex => { geometry.vertices.push(new THREE.Vector3(vertex.x, vertex.y, vertex.z)); }); resource.mesh.triangles.forEach(triangle => { geometry.faces.push(new THREE.Face3(triangle.v1, triangle.v2, triangle.v3)); }); geometry.computeVertexNormals(); geometry.computeFaceNormals(); const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); } } const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(10, 10, 10).normalize(); scene.add(light); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); } init(); </script></body></html>导出 3MF 文件
以下是一个使用 3mf-js 导出 3MF 文件的示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Export 3MF File with 3mf-js</title> <style> body { margin: 0; } </style></head><body> <button id="exportButton">导出 3MF 文件</button> <script src="node_modules/3mf-js/dist/3mf.min.js"></script> <script> document.getElementById('exportButton').addEventListener('click', async () => { // 创建一个新的模型 const model = new ThreeMF.Model(); // 创建一个几何体 const geometry = new ThreeMF.Geometry(); geometry.vertices = [ new ThreeMF.Vector3(0, 0, 0), new ThreeMF.Vector3(1, 0, 0), new ThreeMF.Vector3(0, 1, 0), new ThreeMF.Vector3(0, 0, 1) ]; geometry.triangles = [ new ThreeMF.Triangle(0, 1, 2), new ThreeMF.Triangle(0, 2, 3), new ThreeMF.Triangle(0, 3, 1), new ThreeMF.Triangle(1, 3, 2) ]; // 添加几何体到资源列表 const resource = model.addResource(geometry); // 创建一个对象并引用几何体 const object = model.addObject(resource.id); object.transform = new ThreeMF.Transform(1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0); // 将模型写入 ArrayBuffer const arrayBuffer = await model.save(); // 创建一个 Blob 对象 const blob = new Blob([arrayBuffer], { type: 'application/vnd.ms-package.3dmanufacturing-3dmodel+xml' }); // 创建一个下载链接 const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'model.3mf'; a.click(); // 释放 URL 对象 URL.revokeObjectURL(url); }); </script></body></html>说明
加载 3MF 文件：
使用fetch API 加载 3MF 文件并将其转换为 ArrayBuffer。使用 3mf-js 的 Model 类读取 ArrayBuffer 并解析模型数据。解析后的模型数据可以在控制台中查看，也可以进一步处理和转换为 Three.js 的几何数据。 导出 3MF 文件：
创建一个新的Model 对象。创建一个几何体并添加到模型的资源列表中。创建一个对象并引用几何体。使用 Model 类的 save 方法将模型写入 ArrayBuffer。创建一个 Blob 对象并将 ArrayBuffer 转换为 Blob。创建一个下载链接并触发下载操作。 注意事项
3mf-js：确保你从可靠的来源获取3mf-js 库。性能：解析和转换大型 3MF 文件可能会消耗较多资源，建议在生产环境中进行性能优化。错误处理：在实际应用中，需要添加适当的错误处理机制，以应对文件加载失败等情况。