Auto-resizing or initial zooming/scaling of models doesn't work (for me)

[wejn]

Hi!

First off, thanks for the viewer. It's such a breeze to use! Even for a newbie like myself.

I have run into a small issue when using it on my website, though: In my opinion the auto_resize doesn't work well (for my models anyway) as it leaves a lot of space around the model.

And when I tried using zoom or per-model scale to compensate, then the result was also not what I would expect.

Here's a test page to illustrate (at the bottom of it):

https://wejn.org/2000/01/test-page/

(plus here is a snapshot with the <div>s emphasised by a border... in case the page misbehaves for you)

What I would expect with the default setup is that the model would more or less fill out the entire canvas. And it doesn't.

But that wouldn't be a big deal if I could find a zoom or per-model scale parameter that would allow me to position/zoom the model properly. Which turned out to be a bit of a challenge so far.

So I'm thinking -- am I holding it wrong? Or is there indeed a bug?

Btw, for the interest of readability (because in the page source the json is serialized, thus hard to read), here's the code I'm using to initialize the individual viewers in my Jekyll site:

---

A bit of space for the viewstl:

Default:
{% complexstl 16:9 %}
{
  "models": [ {
      "filename": "{{ "/assets/2020-12-13-curtain-holder/model-older.stl" | relative_url }}",
      "rotationx": -0.8, "rotationy": 0.0, "rotationz": 0.0, "color": "#bbbbbb"
    }
  ] 
} 
{% endcomplexstl %}

`auto_resize: false, zoom: 1.1`:
{% complexstl 16:9 %}
{
  "auto_resize": false,
  "zoom": 1.1,
  "models": [ {
      "filename": "{{ "/assets/2020-12-13-curtain-holder/model-older.stl" | relative_url }}",
      "rotationx": -0.8, "rotationy": 0.0, "rotationz": 0.0, "color": "#bbbbbb"
    } 
  ] 
} 
{% endcomplexstl %}

`auto_resize: false, zoom: 0.1`:
{% complexstl 16:9 %}
{
  "auto_resize": false,
  "zoom": 0.1,
  "models": [ {
      "filename": "{{ "/assets/2020-12-13-curtain-holder/model-older.stl" | relative_url }}",
      "rotationx": -0.8, "rotationy": 0.0, "rotationz": 0.0, "color": "#bbbbbb"
    } 
  ] 
} 
{% endcomplexstl %}

`auto_resize: false, model's scale: 1`:
{% complexstl 16:9 %}
{
  "auto_resize": false,
  "models": [ {
      "filename": "{{ "/assets/2020-12-13-curtain-holder/model-older.stl" | relative_url }}",
      "rotationx": -0.8, "rotationy": 0.0, "rotationz": 0.0, "color": "#bbbbbb", 
      "scale": 1.0 
    } 
  ]
}
{% endcomplexstl %}

`auto_resize: false, model's scale: 1.3`:
{% complexstl 16:9 %}
{
  "auto_resize": false,
  "models": [ {
      "filename": "{{ "/assets/2020-12-13-curtain-holder/model-older.stl" | relative_url }}",
      "rotationx": -0.8, "rotationy": 0.0, "rotationz": 0.0, "color": "#bbbbbb", 
      "scale": 1.3 
    } 
  ] 
} 
{% endcomplexstl %}

Think of everything in between the {% complexstl 16:9 %} and {% endcomplexstl %} as the optional init parameters that get passed to the StlViewer constructor (using a simple scaffold).

Btw, the model is: https://wejn.org/assets/2020-12-13-curtain-holder/model-older.stl but there's plenty of other examples in the last few posts on my site (if interested or in need of a few more models).

[omrips]

Thanks wejn ,

I know the auto_zoom is far from perfect.

Also, the zoom functionality is opposite from logic - the higher zoom value you set, the farther the model.
Try to set the zoom value to 100 and see.
(here is my little test here: https://www.viewstl.com/plugin/try8.html)

(I guess I should not call it zoom ...)

As to the scale - as long as you don't set the zoom value, it will try to set auto_zoom anyway (even if auto_zoom is false), so the scale won't do nothing here (unless you have another model in scene already).

Please let me know if that solve the issue.

[wejn]

Hi, yes, this works somewhat. Thank you. It's not the best solution for responsive designs (the sizing is different based on device width) but it provides better results.

Btw, I think that the problem is non-trivial given the possibility of arbitrary rotation of the model(s) and non-constant aspect ratio.

From what I was able to find, there aren't readily re-usable examples using three.js that would solve this general case in a satisfactory fashion.

[wejn]

For the record, I think I have solved the auto_resize problem for my simplified stlviewer: https://wejn.org/2020/12/cracking-the-threejs-object-fitting-nut/

But I don't know how to backport it to viewstl. So I'm leaving it here, in case you want to take it as inspiration.

[omrips]

Well done wejn - I'll try to apply your idea on the stlviewer, and will do some tests.
the addition of z/2 of the model may do the trick ...

[omrips]

Applied your code to the new version (1.12) - thank you very much!!