Apppublic
anvilinteractiv/PolyGeniixAI5.0

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
modelviewer-template.html81 linesDownload Raw Back to assets
1<!DOCTYPE html>2<html>3 4<head>5    <!-- Import the component -->6    <script src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js" type="module"></script>7 8    <script>9        document.addEventListener('DOMContentLoaded', () => {10            const modelViewers = document.querySelectorAll('model-viewer');11            const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);12 13            modelViewers.forEach(modelViewer => {14                //modelViewer.setAttribute(15                //    "environment-image",16                //    "/static/env_maps/gradient.jpg"17                //);18                // if (!isSafari) {19                //     modelViewer.setAttribute(20                //         "environment-image",21                //         "/static/env_maps/gradient.jpg"22                //     );23                // } else {24                //     modelViewer.addEventListener('load', (event) => {25                //         const [material] = modelViewer.model.materials;26                //         let color = [43, 44, 46, 255];27                //         color = color.map(x => x / 255);28                //         material.pbrMetallicRoughness.setMetallicFactor(0.1); // 完全金属29                //         material.pbrMetallicRoughness.setRoughnessFactor(0.7); // 低粗糙度30                //         material.pbrMetallicRoughness.setBaseColorFactor(color);  // CornflowerBlue in RGB31                //     });32                // }33                 modelViewer.addEventListener('load', (event) => {34                     const [material] = modelViewer.model.materials;35                     let color = [43, 44, 46, 255];36                     color = color.map(x => x / 255);37                     material.pbrMetallicRoughness.setMetallicFactor(0.1); // 完全金属38                     material.pbrMetallicRoughness.setRoughnessFactor(0.7); // 低粗糙度39                     material.pbrMetallicRoughness.setBaseColorFactor(color);  // CornflowerBlue in RGB40                 });41            });42        });43    </script>44 45    <style>46        body {47            margin: 0;48            font-family: Arial, sans-serif;49        }50 51        .centered-container {52            display: flex;53            justify-content: center;54            align-items: center;55            border-radius: 8px;56            border-color: #e5e7eb;57            border-style: solid;58            border-width: 1px;59        }60    </style>61</head>62 63<body>64<div class="centered-container">65    <div class="column is-mobile is-centered">66        <model-viewer id="modelviewer" style="height: #height#px; width: #width#px;"67                      rotation-per-second="10deg"68                      src="#src#" disable-tap69                      environment-image="neutral"70                      camera-target="0m 0m 0m"71                      camera-orbit="0deg 90deg 8m"72                      orientation="0deg 0deg 0deg"73                      shadow-intensity=".9"74                      ar auto-rotate75                      camera-controls>76        </model-viewer>77    </div>78</div>79</body>80 81</html>