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>