javascript - .obj 文件的 html 下载属性
问题描述
我在 p5.js WEBGL 画布中放置了一个 obj 文件。我想通过 html 下载属性链接使 3D 模型可下载。
我试过了:
<a href="SnowstormAloe.obj" download="Snowstorm Aloe .obj">Download OBJ</a>
这当然不起作用,因为 html 下载属性不包括这种类型的文件。关于如何使 .obj 可下载的任何想法?
谢谢!
解决方案
如果您在客户端生成模型,您可以通过将文件内容转换为 a 来创建下载链接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 。
推荐阅读
- c++ - Qt 半透明 QOpenGLWidget 与背景奇怪地混合
- reactjs - 找不到模块:无法解析 node_modules\@emotion\styled\base\dist 中的“@emotion/react”
- html - 如何使我的文本更接近我的标题?
- excel - 使用通配符声明 const 变量
- java - 删除了 TestNG @BeforeMethod onlyForGroups 选项
- c# - 字典不包含 Dictionary.Keys.First() 的键
- capl - 记录 DTC 以供以后分析
- android - 如何避免并行运行android Job?
- mysql - Heroku:无法通过套接字“/var/run/mysqld/mysqld.sock”连接到本地 MySQL 服务器
- html - 错误 TS2564:属性 'selectedMovie' 没有初始化程序,并且未在构造函数中明确分配