<!DOCTYPE html> <html> <head> <!-- Import the component --> <script src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js" type="module"></script> <script> document.addEventListener('DOMContentLoaded', () => { const modelViewers = document.querySelectorAll('model-viewer'); modelViewers.forEach(modelViewer => { modelViewer.addEventListener('load', (event) => { const [material] = modelViewer.model.materials; let color = [43, 44, 46, 255]; color = color.map(x => x / 255); material.pbrMetallicRoughness.setMetallicFactor(0.1); // 完全金属 material.pbrMetallicRoughness.setRoughnessFactor(0.7); // 低粗糙度 material.pbrMetallicRoughness.setBaseColorFactor(color); // CornflowerBlue in RGB }); }); }); </script> <style> body { margin: 0; font-family: Arial, sans-serif; } .centered-container { display: flex; justify-content: center; align-items: center; border-radius: 8px; border-color: #e5e7eb; border-style: solid; border-width: 1px; } </style> </head> <body> <div class="centered-container"> <div class="column is-mobile is-centered"> <model-viewer style="height: 586px; width: 700px;" rotation-per-second="10deg" id="modelViewer" src="./white_mesh.glb/" disable-tap environment-image="neutral" auto-rotate camera-target="0m 0m 0m" orientation="0deg 0deg 170deg" shadow-intensity=".9" ar auto-rotate camera-controls> </model-viewer> </div> </div> </body> </html>