如何将模型查看器加载器的颜色设置为红色

Question

使用模型查看器（https://modelviewer.dev/examples/loading/index.html#glbModel）我想将 model-viewer 的加载颜色设置为红色，但我在文档中没有找到任何相关内容。

这是codepen link: https://codepen.io/luxonauta/pen/vYKYppq?editors=1010

<!-- Loads <model-viewer> for modern browsers-->
<script type="module" src="https://unpkg.com/@google/model-viewer@latest/dist/model-viewer.js"></script>
<!-- Loads <model-viewer> for old browsers like IE11-->
<script type="nomodule" src="https://unpkg.com/@google/model-viewer@latest/dist/model-viewer-legacy.js"></script>

<main>
  <section class="has-dflex-center">
    <div class="lx-container-80">
      <div class="lx-row">
        <div class="lx-card bs-lg">
          <model-viewer src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.glb?1542147958948" ios-src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.usdz?v=1569545377878" poster="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b%2Fposter-astronaut.png?v=1599079951717" alt="A 3D model of an astronaut!" shadow-intensity="1" camera-controls="true" auto-rotate="true" ar="true"></model-viewer>
          <p class="text"><i class="fas fa-hand-point-right"></i> This pen is a basic demo of the &lt;model-viewer&gt; web component. It makes displaying 3D and AR content on the web easy!</p>
        </div>
      </div>
    </div>
  </section>
</main>

Codepen link 演示完全可用，只有红色未在此处实现：https://codepen.io/luxonauta/pen/vYKYppq?editors=1010

请帮助我提前谢谢！！

Answer 1

您可以使用 CSS 轻松更改背景颜色。现在您的演示有

model-viewer {
  width: 100%;
  height: 25rem;
  background-color: #70bcd1;
}

只需将背景颜色更改为红色即可：

model-viewer {
  width: 100%;
  height: 25rem;
  background-color: #f00;
}

Answer 2

你应该申请custom css variables。

model-viewer {
  --progress-bar-color: red;
}

如何将模型查看器加载器的颜色设置为红色

How to give model-viewer loader color as red

javascript

three.js

model-viewer