File size: 1,497 Bytes
3dd3efe |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!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">
<model-viewer>
</div>
</body>
</html> |