136 lines
4.7 KiB
HTML
136 lines
4.7 KiB
HTML
<!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> |