加载GLB文件时模型顶部出现灰色条的解决求助

我尝试将3D模型导入HTML页面（借助AI工具协助），但每次刷新页面时，模型顶部都会出现一条灰色条。已附上参考截图、HTML及CSS代码。

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>

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

#model-container {
  width: 60vw;    
  height: 80vh;    
  padding: 0;
  margin: 0;
  transform: translateX(20px); 
}

#model-container model-viewer {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

针对灰色条问题，可尝试以下几种修复方式：

• 添加溢出隐藏样式：给model-viewer元素添加overflow: hidden，防止模型或内置元素溢出容器：

  #model-container model-viewer {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 新增样式 */
  }
  

• 禁用过渡reveal效果：将reveal="auto"改为reveal="none"，避免过渡过程中出现异常视觉元素：

  <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="none" <!-- 修改此处 -->
    loading="eager"
    style="--poster-color: transparent;"
  ></model-viewer>
  

• 强制重置默认样式：通过CSS强制覆盖model-viewer的默认边距与背景色，消除隐藏的样式影响：

  #model-container model-viewer {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
  

• 检查模型文件：若以上方法无效，可能是模型本身顶部存在空白或冗余元素，可尝试重新导出模型，确保模型边界紧凑。

内容的提问来源于stack exchange，提问作者Jim Stevens