Model-viewer: Will <model-viewer> support non-glTF model file formats?

[techiepop]

is it possible for adding .stl,.ply,.stl models also ?

[cdata]

Hey @techiepop thanks for the question!

We are interested in focusing on glTF as a standard delivery format for 3D content on the web.

However, it isn't always easy for folks to use glTF for one reason or another. Have you tried to use glTF in the past? If you have, what is the reason you cannot use it today?

[donmccurdy]

FWIW, I think any of the formats above can be converted to glTF using Blender or the three.js editor: http://threejs.org/editor/.

[Mortuus-Medicus]

Would it be possible to create an automatic stl to gld converter, without reinventing the wheel?

[cdata]

@Mortuus-Medicus we are definitely interested in exploring tools that will make using glTF / glB easier in the future. For example, we might be able to support a converter for various formats as part of #12 when we get to that work.

FWIW today you can drag/drop an STL onto http://threejs.org/editor/ and export the scene as glB.

[Mortuus-Medicus]

Yeah... I tried the drag/drop and export technique, but I need to somehow either automate that, so that all the user has to do is upload, and the website does the rest.

Or write a simple stl viewer with three.js, which shouldn't be that hard ^^
(I'm writing this for those that have similar problem and are seeking the solution)

[cdata]

@Mortuus-Medicus

I need to somehow either automate that, so that all the user has to do is upload

This is definitely something we are looking into making easier. We have talked about producing and maintaining CLI tools that you can use as part of a build workflow that could also be deployed as a service.

Another (_very, very hypothetical_) idea I have had is to build a special element that can be configured with a URL to another type of model (be it STL, FBX, whatever Three.js currently has loaders for) and produces a local URL that can be used to configure <model-viewer>. The usage would look something like this:

<gltf-converter src="./url/to/some/model.stl" for="#viewer"></gltf-converter>
<model-viewer id="viewer" ...></module-viewer>

When the <gltf-converter> element loads the model, it produces a new URL to the same model but converted to glTF, and then sets it as the source for the <model-viewer>.

This approach would make it easy to consume other types of models, but it has some consequences:

• Converting models to glTF at runtime is computationally expensive and would have to be done _every time_ someone visits the page
• Every model format we support would add size to the JavaScript needed to add <gltf-converter> to the page

Or write a simple stl viewer with three.js, which shouldn't be that hard ^^

TBH you might be able to fork this project and easily add STL loading behavior. Three.js has an STL loader you can use, for example: https://threejs.org/examples/webgl_loader_stl.html

You can probably copy what we do with the GLTF loader and get a working result without too many changes.

Good luck!

[cdata]

@Mortuus-Medicus and anyone else who chances upon this thread, I hacked together a proof of concept for the above-described converter element.

Check out this remixable Glitch to try it out: https://dandy-linen.glitch.me/

In the above example, the converter element is downloading an STL I found on Thingiverse, converting it to a glTF using a Three.js helper, and then setting the URL on <model-viewer>.

This is an example of how you can use <model-viewer> unmodified along with some out-of-the-box Three.js loaders/helpers to view other formats by converting them to glTF at runtime. It's relatively computationally expensive to do this, so I do not recommend it for production scenarios.

Also, I hope it goes without saying, but just in case: this is just a proof-of-concept. It is provided as-is, and there is no guarantee of support for the code as we evolve <model-viewer>.

[mrdoob]

Converting models to glTF at runtime

This seems to work:

viewer.addEventListener('drop', (event) => {
  event.preventDefault();
  const file = event.dataTransfer.files[0];
  const filename = file.name.toLowerCase();
  if (filename.match(/\.(stl)$/)) {
    var exporter = new THREE.GLTFExporter();
    var loader = new THREE.STLLoader();
    loader.load(URL.createObjectURL(file), (geometry) => {
      var material = new THREE.MeshStandardMaterial();
      var object = new THREE.Mesh(geometry,material);
      exporter.parse(object, (json) => {
        var string = JSON.stringify(json);
        var blob = new Blob([string], {type:'text/plain'});
        viewer.src = URL.createObjectURL(blob);
      } );
    } );
  }
});

Here's a glitch that allows drag and drop of GLTF, GLB, OBJ, PLY and STL.
https://tall-dessert.glitch.me/
https://glitch.com/embed/#!/embed/tall-dessert?path=index.html:1:0

[mrdoob]

Hehe, cross posted 😁

[pika-ci[bot]]

:truck: This issue has been moved!
Continue the discussion on our project message board:
https://www.pika.dev/npm/@google/model-viewer/discuss/5 • What is this?