Increase width and height on html viewer model

Question

Currently when I upload the code below into an HTML component on my site the content is constrained to a small box, however there is far more space in the html component to fit the content.

Can someone please let me know what and where to write the code that would be most appreciated!

<script type="module" 
        src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<model-viewer 
       alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" 
       src="shared-assets/models/NeilArmstrong.glb" 
       ar ar-modes="webxr scene-viewer quick-look" 
       environment-image="shared-assets/environments/moon_1k.hdr" 
       poster="shared-assets/models/NeilArmstrong.webp" 
       seamless-poster shadow-intensity="1" camera-controls>
</model-viewer>

Welcome to StackOverflow: if you post code, XML, markup or data samples, **please** highlight those lines in the text editor and click on the "code samples" button ( `{ }` ) on the editor toolbar to nicely format and syntax highlight it! — marc_s, Jan 12 '22 at 20:48
no however the html component allows for style inputs I just don't know the code I have tried to put the following pretty much everywhere in the code to try and effect it — Dhugal Robertson, Jan 12 '22 at 20:55

score 0 · Answer 1 · answered Jan 19 '22 at 10:53

0

If you want to increase a model-viewer box width and height then you can easily apply a css on model-viewer tag.

    model-viewer{
         width:400px;
         height:400px;
    }

answered Jan 19 '22 at 10:53

Iron Man

35
3

score 0 · Answer 2 · answered Sep 26 '22 at 11:48

I had this exact same problem also

the content is constrained to a small box, however there is far more space in the html component to fit the content.

The solution for me was to do the following:

Wrap the model-viewer in an empty div and apply CSS to the DIV and the model-viewer that achieved the styling I desired.

Notes

When I tried using the following values for width on the model-viewer it would not style correctly.

width: auto;
width: 100%;

HTML below

<div class="model-view-css-fix">
      <model-viewer 
       alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" 
       src="shared-assets/models/NeilArmstrong.glb" 
       ar ar-modes="webxr scene-viewer quick-look" 
       environment-image="shared-assets/environments/moon_1k.hdr" 
       poster="shared-assets/models/NeilArmstrong.webp" 
       seamless-poster shadow-intensity="1" camera-controls>
      </model-viewer>
</div>

CSS below

The width would fail to style correctly with 100% or auto therefore a 50% width to height ratio is maintained by vh.

.model-view-css-fix{
  object-fit: contain;
  height: 80vh;
  width:auto;  
}
model-viewer {
  width: 40vh;
  height: 80vh;
}

score 0 · Answer 3 · edited Oct 04 '22 at 16:43

0

Just wrap model-viewer in a div and set the height and width attributes with the inherit value. Make sure divs have height and width set to an initial value of your choice.

div{
    height: 50vh;
    width: 50vw;
}
model-viewer{
    height: inherit;
    width: inherit;
}

edited Oct 04 '22 at 16:43

CcmU

780
9
22

answered Sep 28 '22 at 13:25

Lucky yadav

1
1

Increase width and height on html viewer model

3 Answers3