Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>three.ws — agent avatars</title> | |
| <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script> | |
| <style> | |
| :root{--bg:#0b0d12;--panel:#141824;--text:#e6e9f2;--dim:#8a93a8;--accent:#7c6cff} | |
| *{box-sizing:border-box} | |
| html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif} | |
| main{display:flex;flex-direction:column;height:100%} | |
| model-viewer{flex:1;width:100%;background:radial-gradient(ellipse at 50% 30%,#1a2033 0%,#0b0d12 70%)} | |
| .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel);border-top:1px solid #222840;flex-wrap:wrap} | |
| .bar a{color:var(--accent);text-decoration:none;font-weight:600} | |
| .bar a:hover,.bar a:focus-visible{text-decoration:underline} | |
| .chips{display:flex;gap:8px;flex-wrap:wrap} | |
| button{background:#1c2233;color:var(--text);border:1px solid #2a3352;border-radius:999px;padding:6px 14px;cursor:pointer;font:inherit;transition:background .15s,border-color .15s} | |
| button:hover{background:#252d45} | |
| button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} | |
| button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff} | |
| .spacer{flex:1} | |
| .hint{color:var(--dim)} | |
| @media (max-width:480px){.hint{display:none}} | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <model-viewer id="mv" | |
| src="./michelle.glb" | |
| alt="Rigged 3D agent avatar from three.ws" | |
| camera-controls auto-rotate auto-rotate-delay="0" rotation-per-second="24deg" | |
| shadow-intensity="1" exposure="1.05" autoplay | |
| ar ar-modes="webxr scene-viewer quick-look" | |
| loading="eager" reveal="auto"> | |
| </model-viewer> | |
| <div class="bar"> | |
| <div class="chips" role="group" aria-label="Choose avatar"> | |
| <button data-src="./michelle.glb" aria-pressed="true">Michelle</button> | |
| <button data-src="./boss-vernington.glb" aria-pressed="false">Boss Vernington</button> | |
| <button data-src="./cz.glb" aria-pressed="false">Canonical rig (53 bones)</button> | |
| </div> | |
| <span class="spacer"></span> | |
| <span class="hint">drag to rotate · scroll to zoom</span> | |
| <a href="https://three.ws/forge" target="_blank" rel="noopener">make your own free →</a> | |
| </div> | |
| </main> | |
| <script> | |
| const mv = document.getElementById('mv'); | |
| document.querySelectorAll('button[data-src]').forEach((b) => { | |
| b.addEventListener('click', () => { | |
| document.querySelectorAll('button[data-src]').forEach((x) => x.setAttribute('aria-pressed', 'false')); | |
| b.setAttribute('aria-pressed', 'true'); | |
| mv.src = b.dataset.src; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |