<!DOCTYPE html>
<html>
<head>
<!-- Import the component -->
<script src="https://cdn.jsdelivr.net/npm/@google/model-viewer@3.1.1/dist/model-viewer.min.js"
type="module"></script>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.centered-container {
display: flex;
justify-content: center;
align-items: center;
}
.modelviewer-panel-button {
height: 30px;
margin: 4px 4px;
padding: 0px 14px;
background: white;
border-radius: 10px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.modelviewer-panel-button.checked {
background: #6567C9;
color: white;
}
.modelviewer-panel-button:hover {
background-color: #e2e6ea;
}
.modelviewer-panel-button-container {
display: flex;
justify-content: space-around;
}
.centered-container {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<div class="centered-container">
<div class="centered-container">
<div class="column is-mobile is-centered">
<model-viewer id="modelviewer" style="height: #height#px; width: #width#px;"
rotation-per-second="10deg"
src="#src#" disable-tap
environment-image="neutral"
camera-target="0m 0m 0m"
camera-orbit="0deg 90deg 12m"
orientation="0deg 0deg 0deg"
shadow-intensity=".9"
ar auto-rotate
camera-controls>
</model-viewer>
</div>
<div class="modelviewer-panel-button-container">
<div id="appearance-button" class="modelviewer-panel-button small checked" onclick="showTexture()">
Appearance
</div>
<div id="geometry-button" class="modelviewer-panel-button small" onclick="hideTexture()">Geometry</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const modelViewers = document.querySelectorAll('model-viewer');
modelViewers.forEach(modelViewer => {
modelViewer.addEventListener('load', (event) => {
const [material] = modelViewer.model.materials;
material.pbrMetallicRoughness.setMetallicFactor(0.1);
material.pbrMetallicRoughness.setRoughnessFactor(0.5);
});
});
});
var window_state = {};
function hideTexture() {
let appearanceButton = document.getElementById('appearance-button');
let geometryButton = document.getElementById('geometry-button');
appearanceButton.classList.remove('checked');
geometryButton.classList.add('checked');
let modelViewer = document.getElementById('modelviewer');
if (modelViewer.model.materials[0].pbrMetallicRoughness.baseColorTexture.texture === null) return;
window_state.textures = [];
for (let i = 0; i < modelViewer.model.materials.length; i++) {
window_state.textures.push(modelViewer.model.materials[i].pbrMetallicRoughness.baseColorTexture.texture);
}
window_state.exposure = modelViewer.exposure;
modelViewer.environmentImage = '/static/env_maps/gradient.jpg';
for (let i = 0; i < modelViewer.model.materials.length; i++) {
modelViewer.model.materials[i].pbrMetallicRoughness.baseColorTexture.setTexture(null);
}
modelViewer.exposure = 4;
}
function showTexture() {
let appearanceButton = document.getElementById('appearance-button');
let geometryButton = document.getElementById('geometry-button');
appearanceButton.classList.add('checked');
geometryButton.classList.remove('checked');
let modelViewer = document.getElementById('modelviewer');
if (modelViewer.model.materials[0].pbrMetallicRoughness.baseColorTexture.texture !== null) return;
modelViewer.environmentImage = '/static/env_maps/white.jpg';
for (let i = 0; i < modelViewer.model.materials.length; i++) {
modelViewer.model.materials[i].pbrMetallicRoughness.baseColorTexture.setTexture(window_state.textures[i]);
}
modelViewer.exposure = window_state.exposure;
}
</script>
</body>
</html>