Spaces:
Running
Running
File size: 2,792 Bytes
738b6e4 91427ae 738b6e4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!doctype html>
<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>
|