| | <!DOCTYPE html>
|
| | <html>
|
| |
|
| | <head>
|
| |
|
| | <script src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/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> |
