|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
|
|
<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); |
|
}); |
|
}); |
|
}); |
|
</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> |
