0
288
ViewsCómo dar color rojo al cargador del visor de modelos
Usando el visor de modelos ( https://modelviewer.dev/examples/loading/index.html#glbModel ) quiero dar el color de carga de mi model-viewer como rojo, pero no encontré nada relacionado con eso en la documentación.
Aquí está el enlace de Codepen: 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 <model-viewer> web component. It makes displaying 3D and AR content on the web easy!</p> </div> </div> </div> </section> </main>La demostración del enlace Codepen funciona completamente, solo el color rojo no está implementado aquí: https://codepen.io/luxonauta/pen/vYKYppq?editors=1010
Por favor ayúdenme gracias de antemano!!
·
Juan Pablo Isaza
2 answers
Answer question0
Debe aplicar variables css personalizadas .
model-viewer { --progress-bar-color: red; }
·
Juan Pablo Isaza
Report
0
Puede cambiar fácilmente el color de fondo con CSS. En este momento su demostración tiene
model-viewer { width: 100%; height: 25rem; background-color: #70bcd1; }Simplemente cambie el color de fondo a rojo:
model-viewer { width: 100%; height: 25rem; background-color: #f00; } 
·
Juan Pablo Isaza
Report
Answer question