1

I've an obj file placed in a p5.js WEBGL canvas. I'd like to make the 3D model downloadable through a html download attribute link.

I tried:

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

which of course doesn't work because the html download attribute doesn't include this type of file. Any idea on how to make an .obj downloadable?

Thanks!

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
cecilia
  • 67
  • 9
  • You mean, to download the canvas with the functionality? There is no way in js to do it our of the box (Maybe there is a library..). You should generate, at least, an html file with the canvas logic code.. – Mosh Feu Dec 06 '20 at 15:49
  • No sorry, I meant the actual model, as if I would do with a simple picture or PDF for example. – cecilia Dec 06 '20 at 15:52
  • https://stackoverflow.com/a/50300880/863110 – Mosh Feu Dec 06 '20 at 16:02
  • Hey thanks for linking this. I had a look and it seems to me that the canvas element gets converted into a still image, but correct me if I'm wrong. In my case I'd need the download output to be a 3D model, and specifically an .obj file. Thanks! – cecilia Dec 06 '20 at 16:30
  • The `download` attribute works on every kind of file. It doesn't work on every kind of URL (e.g. cross origin ones are excluded), but the file type is immaterial. – Quentin Dec 06 '20 at 16:37
  • Oh I see thanks, Cross Origin URL might be the problem then. At the moment I'm working with a live server. I guess there's no other way to do so, right? Might need to use a hosting platform such as TurboSquid. – cecilia Dec 06 '20 at 16:48
  • @cecilia — If you have `href="SnowstormAloe.obj"`, and are using a server, and that doesn't redirect to a different origin then it won't be a cross origin problem. If you don't then you should edit your question to provide a realistic [mcve] – Quentin Dec 06 '20 at 16:58
  • Hey, you're totally right. I dismounted the code, aiming to give a minimal reproducible example and actually found out that it was a z-index issue. Now it's all good. Thanks :) – cecilia Dec 06 '20 at 18:23

1 Answers1

-1

If you generate the model in the client, you can create a download link by converting the file content into a Blob and then create a link using URL.createObjectURL.

Like this

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>

Working example: https://output.jsbin.com/nugunit.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135