Gray Bar that appears every time I load my GLB File

General
,
1

I am trying to import a 3d model to my HTML page (I have been using AI for assistance), and when I do, I am seeing this Gray bar at the top of my model every time I refresh. Does anyone have a clue on how to get rid of it?
I added a reference photo.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>3D Avatar</title>
  <script
    type="module"
    src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js">
  </script>
  <link rel="stylesheet" href="modeltest.css" />
</head>
<body>
  <div id="model-container">
    <model-viewer
      src="goodtesterhehe.glb"
      alt="3D Avatar"
      auto-rotate
      autoplay
      camera-orbit="0deg 75deg 2.5m"
      field-of-view="30deg"
      camera-target="0m .8m 0m"
      shadow-intensity="1"
      disable-zoom
      reveal="auto"
      loading="eager"
      style="--poster-color: transparent;"
    ></model-viewer>
  </div>
</body>
</html>
2

Your body has a grey background (#f5f5f5) and is 100view height. The model container is 80 view height; therefore some background grey will show through. I assume its visible below the model container too.

You could remove the background-color from the body css:

 body {
   // background-color: #f5f5f5; // remove this line
   font-family: 'Raleway', sans-serif;
   height: 100vh;
   width: 100vw;
   overflow: hidden;
   display: flex;
   justify-content: flex-end; 
   align-items: center;
}

Another option might be to make the model-container height 100%.

#model-container {
  width: 60vw;    
  height: 100%;    // try this
  padding: 0;
  margin: 0;
  transform: translateX(20px); 
}
1 Like