当前位置：首页 > article >正文

3dm 格式详解，javascript加载导出3dm文件示例

article 2024/11/26 9:59:28

3DM 格式详解

3DM 文件格式是由 Rhinoceros 3D（简称 Rhino）软件使用的原生文件格式。这种格式主要用于存储三维模型，支持多种几何类型和丰富的属性信息。以下是 3DM 文件格式的一些关键特性和结构：
在这里插入图片描述

文件结构

文件头：
- 文件标识符（File Signature）：用于识别文件是否为 3DM 文件。
- 文件版本号（File Version）：指示文件的版本，不同的版本可能有不同的数据结构。
- 文件生成时间（File Generation Time）：记录文件的创建时间。
- 文件生成者（File Generator）：记录生成文件的软件名称和版本。
对象表（Object Table）：
- 包含所有几何对象的列表，每个对象都有一个唯一的标识符。
- 对象类型（Object Type）：表示对象的类型，如点、曲线、曲面等。
- 对象数据（Object Data）：存储对象的具体几何数据。
- 属性信息（Attributes）：包括对象的颜色、材质、纹理等属性。
层表（Layer Table）：
- 存储所有图层的信息，每个图层都有一个唯一的名称和属性。
- 图层名称（Layer Name）：图层的唯一标识。
- 图层属性（Layer Attributes）：包括图层的颜色、线型、打印样式等。
视图表（View Table）：
- 存储不同视图的信息，如正视图、俯视图等。
- 视图名称（View Name）：视图的唯一标识。
- 视图属性（View Attributes）：包括视图的摄像机位置、视角等。
注释表（Annotation Table）：
- 存储文本注释、尺寸标注等信息。
- 注释类型（Annotation Type）：表示注释的类型，如文本、尺寸等。
- 注释数据（Annotation Data）：存储注释的具体内容和位置。
历史记录（History Record）：
- 记录文件的编辑历史，包括撤销和重做操作。
用户定义数据（User Defined Data）：
- 允许用户存储自定义的数据，如注释、元数据等。

JavaScript 加载和导出 3DM 文件

为了在 JavaScript 中加载和导出 3DM 文件，我们可以使用 OpenNURBS.js 库。OpenNURBS.js 是一个基于 OpenNURBS 的 JavaScript 库，可以用来读取和写入 3DM 文件。

安装依赖

首先，确保你已经安装了 Three.js 和 OpenNURBS.js。你可以通过 npm 安装 Three.js：

npm install three

对于 OpenNURBS.js，目前没有官方的 npm 包，但你可以从 GitHub 上获取并将其添加到你的项目中。

加载 3DM 文件

以下是一个使用 OpenNURBS.js 加载 3DM 文件的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Load 3DM File with OpenNURBS.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="path/to/opennurbs.js"></script>
  <script>
    async function load3DM(url) {
      const response = await fetch(url);
      const arrayBuffer = await response.arrayBuffer();
      const model = new opennurbs.Model();
      model.read(arrayBuffer);

      return model;
    }

    async function init() {
      const model = await load3DM('path/to/your/model.3dm');

      console.log('Model loaded:', model);

      // 在这里可以处理模型数据，例如将其转换为 Three.js 的几何数据
    }

    init();
  </script>
</body>
</html>

导出 3DM 文件

以下是一个使用 OpenNURBS.js 导出 3DM 文件的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Export 3DM File with OpenNURBS.js</title>
  <style>
    body { margin: 0; }
  </style>
</head>
<body>
  <button id="exportButton">导出 3DM 文件</button>
  <script src="path/to/opennurbs.js"></script>
  <script>
    document.getElementById('exportButton').addEventListener('click', async () => {
      // 创建一个新的模型
      const model = new opennurbs.Model();

      // 添加一个简单的几何对象，例如一个球体
      const sphere = new opennurbs.Sphere(new opennurbs.Point3d(0, 0, 0), 1);
      model.addObject(sphere);

      // 将模型写入 ArrayBuffer
      const arrayBuffer = model.write();

      // 创建一个 Blob 对象
      const blob = new Blob([arrayBuffer], { type: 'application/octet-stream' });

      // 创建一个下载链接
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'model.3dm';
      a.click();

      // 释放 URL 对象
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

说明

加载 3DM 文件：
- 使用 fetch API 加载 3DM 文件并将其转换为 ArrayBuffer。
- 使用 OpenNURBS.js 的 Model 类读取 ArrayBuffer 并解析模型数据。
- 解析后的模型数据可以在控制台中查看，也可以进一步处理和转换为 Three.js 的几何数据。
导出 3DM 文件：
- 创建一个新的 Model 对象。
- 添加一个简单的几何对象，例如一个球体。
- 使用 Model 类的 write 方法将模型写入 ArrayBuffer。
- 创建一个 Blob 对象并将 ArrayBuffer 转换为 Blob。
- 创建一个下载链接并触发下载操作。