How do I change the size of the model viewport? #1874
Replies: 5 comments 8 replies
-
|
@mister-elliott since For example: <style>
model-viewer {
width: 800px;
height: 600px;
}
</style>
<model-viewer ...></model-viewer>Will make the viewport 800x600 and scale the model appropriately. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much for your help, I was looking for this and now I'm able to set the viewport size. |
Beta Was this translation helpful? Give feedback.
-
|
nice, thanks. when I tried to style background-color: #ffff00; in <style>model-viewer {...}, it did not take; I seem to have to set that color in the <model-viewer ....> tag. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, unfortunately |
Beta Was this translation helpful? Give feedback.
-
|
Does anyone know how to make the |
Beta Was this translation helpful? Give feedback.
-
|
I've tried setting On the https://modelviewer.dev/examples/tester.html I found the Screen.Recording.2021-06-18.at.12.23.55.mov |
Beta Was this translation helpful? Give feedback.
-
I too am experiencing issues with "height: auto". When I use "width: auto" it works just fine, displaying dynamically and as expected in different sized frames, but if I set "height: auto" then the Model-Viewer is 0px height. If I lock it at a px height, it no longer sizes dynamically. And again, if I set "height: 100%" then it fails outright with the % symbol. Would appreciate any help with this. |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks for reaching out @elalish. Sample of what I'm loading through Wordpress below. ` <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> ` The problem is that although "width" works as expected, height will only work with a hard coded pixel value. Neither % or auto work and return a view port 0px high. The problem I'm trying to solve is having model-viewer act both as a thumbnail (small), and also an article header (much larger). Example thumbnail, note how width is auto and centered, but height is hard-coded as auto height isn't working. And a click through to the post, where again, the hardcoded height is preventing the full use of the view-port space. I openly admit I'm a novice but keen to learn/understand. I'm used to working with embed solutions from either SketchFab or P3D.in, such as this example;
|
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
Hi am not sure how i go about doing this ? i dont want to have to always use use the default <style in the Index.js. @elalish not sure what you meant (just like a < div >; remember to use display: block) |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I have taken the simplest approach to using model-viewer, but am unsure
how set up the html so the model will render larger
in chrome, astronaut renders in a window 300x150, using this:
<model-viewer src="./assets/Astronaut.glb" alt="A 3D model of an astronaut" background-color="#ffff00" shadow-intensity="4" camera-controls interaction-prompt="auto" auto-rotate ar magic-leap> </model-viewer>renderdimensions.zip
It would be really nice if you had a sample that was stripped down to the barest basics, and then documented how to render with minimal code at some arbitrary window size.
Code I am using from github is a week old.
png in the zip shows the model-view seems to set the view window to 300x150.
Beta Was this translation helpful? Give feedback.
All reactions