Google model-viewer - how to set max zoom?

Question

I'm very happy about what I'm able to do using Google model-viewer. It's relatively configurable, but there's more I'd like to be able to do with the camera-- for instance, setting a max zoom/min distance from the target. I've found code that seems to suggest how to modify this, but I don't know how to override the script delivered via the CDN. Is my only option to download using npm?

Excuse my naivete!

Answer 1

I'm the maintainer of the <model-viewer> project. You aren't crazy; we haven't added the ability to control this yet.

But don't worry! We are planning to add this feature to a release very soon (currently planned for v0.7.0). Please track https://github.com/GoogleWebComponents/model-viewer/issues/458 for progress!

[edit] Also to answer your question about NPM: you can download the module from NPM and assemble a customized version of the pieces that make up <model-viewer>. Also, you could fork the project and patch it that way. I don't necessarily recommend these things, but they are options if you are desperate. If you go this route, I highly recommend asking questions on our Github project page. We are friendly and responsive to everyone.

Answer 2

You can see this issue Zoom in/out #1172

Now it's possible to use camera control settings:

• max-camera-orbit
• min-camera-orbit
• max-field-of-view
• min-field-of-view

model-viewer(
    src="https://cwervo.com/assets/3D-models/logo.glb" ios- 
    src="https://cwervo.com/assets/3D-models/logo-3m-scaled.usdz"
    auto-rotate 
    camera-controls 
    min-camera-orbit='auto auto 100%'
    max-camera-orbit='auto auto 100%'
    min-field-of-view='110deg'
    max-field-of-view='110deg'
)

Source: https://codepen.io/schmidtsonian/pen/VwvEwVw