.obj 文件的 html 下载属性答案

【问题标题】：html download attribute for .obj file.obj 文件的 html 下载属性
【发布时间】：2021-03-18 01:25:04
【问题描述】：

我在 p5.js WEBGL 画布中放置了一个 obj 文件。我想通过 html 下载属性链接使 3D 模型可下载。

我试过了：

<a href="SnowstormAloe.obj" download="Snowstorm Aloe .obj">Download OBJ</a>

这当然不起作用，因为 html 下载属性不包含这种类型的文件。关于如何使 .obj 可下载的任何想法？

谢谢！

【问题讨论】：

你的意思是，下载具有功能的画布？在 js 中没有办法做到这一点（也许有一个库..）。您至少应该生成一个带有画布逻辑代码的 html 文件。
不抱歉，我指的是实际模型，就好像我会使用简单的图片或 PDF 一样。
stackoverflow.com/a/50300880/863110
嘿，谢谢你链接这个。我看了看，在我看来画布元素被转换为静止图像，但如果我错了，请纠正我。在我的情况下，我需要下载输出是一个 3D 模型，特别是一个 .obj 文件。谢谢！
download 属性适用于各种文件。它不适用于所有类型的 URL（例如，排除跨源 URL），但文件类型无关紧要。

标签： javascript html download 3d-model

【解决方案1】：

如果在客户端生成模型，可以通过将文件内容转换为Blob创建下载链接，然后使用URL.createObjectURL创建链接。

这样

const objFileContent = `#  Viewpoint Datalabs International, Inc.  Copyright 1996


mtllib ./vp.mtl

g
v 2.712726 -2.398764 -2.492640
v 2.712726 -1.954302 -2.665440
v -5.975275 -1.954302 -2.665440
v -5.975275 -2.398764 -2.492640
v -6.113514 -1.885536 -2.803680
v 2.712726 -1.885536 -2.803680
v -5.975275 -1.372307 -2.803680
v -5.975275 -1.816770 -2.700000
v 2.712726 -1.816770 -2.700000
v 2.712726 -1.372307 -2.803680
v 4.766168 -2.256987 -2.354400
v 4.766168 -1.372307 -2.665439
v 4.766168 -1.769892 -2.561759
v 4.766168 -1.827445 -2.665439
v 4.766168 -1.884998 -2.527199
v 6.335766 -1.688939 -2.354399
v 6.335766 -1.732171 -2.458079
v 6.335766 -1.775403 -2.319839
v 6.335766 -2.054828 -2.147039
v 6.335766 -1.372307 -2.458079
v 8.078169 -1.372308 -2.043359
v 7.641026 -1.604039 -1.939679
v 7.711631 -1.639892 -2.043359
v 7.505756 -1.675745 -1.905119
v 7.068614 -1.907476 -1.732319
....`

document.querySelector('button').addEventListener('click', () => {
  var link = document.createElement('a');
  link.download = 'SnowstormAloe.obj';
  var blob = new Blob([objFileContent], {
    type: 'application/object'
  });
  link.href = URL.createObjectURL(blob);
  document.body.appendChild(link);
  link.click();
});

<button>Download .obj file</button>

工作示例：https://output.jsbin.com/nugunit。

【讨论】：

很高兴听到 :) 如果它对您有用，请接受答案，以便对其他人有所帮助。