分形三维高级功能1/9-显示SolidWorks/CATIA/step/Creo等复杂格式

124 阅读2分钟

不同于obj/gltf/fbx等通用格式,为了保护自己的技术专利,主流的CAD软件公司在格式数据结构定义上通常采用闭源的方式,使得在网页上展示它们变得非常困难。

fractal 3D 可以支持在网页端流畅渲染几乎所有主流的 CAD 软件格式(参考格式支持清单),使用的方法就是在将其转换成分形三维自主研发的e3dx格式。

通过本章的内容,您将掌握上传、转换并在网页显示这些复杂格式文件的方法。

文件转换的基本流程

您既可以选择直接通过http接口调用我们部署在云端的Saas转换服务,也可以选择在您的公司和组织的私有云/服务器集群中部署我们的文件转换服务。

如果您希望进一步了解私有化部署的具体方案和报价,请联系我们

这里以SaaS模式为例,给您介绍一下文件转换的基本流程:

  • 先将文件包装成FormData的形式发送至我们提供的上传接口,我们会将该文件对应的fileid通过返回值的形式告知您。

const formData = new FormData();
formData.append("file", file);

// 上传文件到服务器
    const uploadFile = async (
      file /* File */,
      accessToken,
      onProgress /* (progress: number) => void */
    ) => {

      let res;
      try {
        // 调用 uploadFile 方法,将包装好的 formData 上传到服务器
        res = await axios.post(
          "https://portal.fractal3d.everxyz.com/api/files",
          file,
          {
            headers: {
              Authorization: `Bearer ${accessToken}`,
              "Content-Type": "application/octet-stream",
            },
            params: {
              file_name: file.name,
              file_size: file.size,
              file_retention_days: 1,
            },
            onUploadProgress(e) {
              // 上传进度回调,需要注意的是,这里的进度是文件上传的进度, 接口最后会做一次校验,所以进度 100% 并不代表接口结束
              const { loaded, total } = e;
              if (total) {
                onProgress((loaded / total) * 100);
              }
            },
          }
        );

      } catch (error) {
        console.error(error);
      }
      return { filename:file.name, file_id:res.data};
    };
  • 向服务端发起转换请求,获得transcation_id,这个id对应一个转换进程
 //启动转换
    const convert_exec = async (file_id, accessToken) => {
      const result = await axios.post(
        "https://portal.fractal3d.everxyz.com/api/converts",
        {},
        {
          headers: {
            Authorization: `Bearer ${accessToken}`,
            "Content-Type": "application/octet-stream",
          },
          params: {
            file_id: file_id,
            target_format: "e3dx",
          },
        }
      );

      let { transaction_id } = result.data;
      return { transaction_id };
    }
  • 在转换过程中,您可以通过上一步返回的transcation_id 向分形三维的后台轮询该文件的转换状态,可能的状态包括:

    • pending(挂起)
    • succeed(成功)
    • failed(失败)
 const pollingFileStatus = async (txId, accessToken) => {
     // 使用 uploadFile 返回的 uuid 查询该文件的转换状态
     const data = await axios.get("https://portal.fractal3d.everxyz.com/api/converts/result_file", {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
        params: {
          transaction_id: txId,
        },
      });

      status = data.data.status;
      url = data.data.url;
      return { status, url };
    };
  • 若转换文件成功,轮询的返回值中将包含e3dx文件的url。您既可以选择将其下载至本地的存储空间自行管理,也可以在下一次需要显示该文件时再次通过uuid向我们请求最新的url。

注意:每个e3dx文件的URL会在15分钟后失效,超过这个时间就必须通过transcation_id向分形三维后台请求新的url!

完整示例

请参考demos中的upload-and-show.html