Model-viewer: How do I change the canvas size and position?

Created on 13 Jun 2020 · 3Comments · Source: google/model-viewer

I tried the minimal html example to display a glb model.

And it works but it is always 300x150 px canvas size.

Can you give an example of how to change the size and position of the canvas.

I wanted to expand the canvas to fill the browser window but my css style doesn't appear to override it.

My current html ---
`

<!DOCTYPE html>
<html>
<head>
<title>3d model viewer test</title>

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .imgbox {
            display: grid;
            height: 100%;
        }
        .center-fit {
            max-width: 100%;
            max-height: 100vh;
            margin: auto;
        }
    </style>

</head>
<body>
<!-- Use it like any other HTML element -->
<div class="imgbox">
<model-viewer class="center-fit" src="3dmodels/DamagedHelmet.glb" alt="A 3D model" auto-rotate camera-controls></model-viewer>
</div>
</body>

</html>

question

Source

XcomReborn

Most helpful comment

Hi, you can also use this code in your mode-viewer tag or set a ID / CLASS to your 3dmodel :

    <model-viewer
      style="width: 100%; height: 800px; top: 0px;  position: sticky; background-color: black;"
      src="4.glb"
    ></model-viewer>

or:

    <model-viewer
      id="idname"
      src="4.glb"
    ></model-viewer>

mesmaili151 on 15 Jun 2020

👍2

All 3 comments

I solved it by using:

    <style>
        *{
        margin:0;
        padding:0;
        }
        html{
        height: 100%;
        width: 100%;
        }
        body {
          height: 100%;
          width: 100%;
        }
        model-viewer{
        height:100%;
        width:100%;
        }


    </style>

is this the suggested technique for it? Might be worth adding that to the tutorial or at least explaining why the canvas defaults to 300x150 px and how to override it.

XcomReborn on 13 Jun 2020

Hi, you can also use this code in your mode-viewer tag or set a ID / CLASS to your 3dmodel :

    <model-viewer
      style="width: 100%; height: 800px; top: 0px;  position: sticky; background-color: black;"
      src="4.glb"
    ></model-viewer>

or:

    <model-viewer
      id="idname"
      src="4.glb"
    ></model-viewer>

mesmaili151 on 15 Jun 2020

👍2

@XcomReborn Yes, that's right and there are many other approaches as well. CSS is pretty flexible and the web-component approach to model-viewer is designed to make this work just like any other DOM element.