|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>3D Model Viewer</title> |
|
<style> |
|
body { |
|
margin: 0; |
|
padding: 0; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
height: 100vh; |
|
} |
|
.model-container { |
|
width: 45%; |
|
height: 90vh; |
|
margin: 10px; |
|
border: 3px solid #333 |
|
} |
|
model-viewer { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div class="model-container"> |
|
<model-viewer |
|
alt="3D image" |
|
src="kodim08_50_ori.gltf" |
|
ar |
|
ar-modes="webxr scene-viewer quick-look" |
|
seamless-poster |
|
shadow-intensity="1" |
|
camera-controls |
|
camera-orbit="0deg 180deg 90deg" |
|
> |
|
</model-viewer> |
|
</div> |
|
|
|
<div class="model-container"> |
|
<model-viewer |
|
alt="3D image" |
|
src="kodim08_50_sh.gltf" |
|
ar |
|
ar-modes="webxr scene-viewer quick-look" |
|
seamless-poster |
|
shadow-intensity="1" |
|
camera-controls |
|
camera-orbit="0deg 180deg 90deg" |
|
> |
|
</model-viewer> |
|
</div> |
|
|
|
<div> |
|
<input type="checkbox" id="option1" name="modelOption" checked> |
|
<label for="option1">Option 1</label><br> |
|
<input type="checkbox" id="option2" name="modelOption"> |
|
<label for="option2">Option 2</label><br> |
|
</div> |
|
|
|
|
|
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> |
|
<script src="script.js"></script> |
|
</body> |
|
</html> |
|
|
