model-viewer/index.html at main · turgaydev/model-viewer · GitHub

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>3D Model Viewer — Turgay</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
</head>
<body class="bg-slate-950 text-slate-100 min-h-screen">
  <header class="max-w-6xl mx-auto px-6 py-6">
    <h1 class="text-2xl font-semibold">3D Model Viewer</h1>
    <p class="text-slate-400">GLB/GLTF dosyalarını tarayıcıda görüntüleyin.</p>
  </header>

  <main class="max-w-6xl mx-auto px-6 grid gap-6">
    <div class="bg-slate-900/60 border border-slate-800 rounded-2xl p-4 flex flex-wrap gap-3 items-center">
      <label class="inline-flex items-center gap-2">
        <span class="text-sm text-slate-300">Model yükle:</span>
        <input id="fileInput" type="file" accept=".glb,.gltf" class="text-sm" />
      </label>

      <button id="resetBtn" class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-sm">
        Reset View
      </button>
      <button id="screenshotBtn" class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-sm">
        Screenshot
      </button>

      <label class="ml-auto inline-flex items-center gap-2">
        <input id="autoRotate" type="checkbox" class="accent-white" />
        <span class="text-sm text-slate-300">Auto-rotate</span>
      </label>
    </div>

    <div class="aspect-[16/9] bg-slate-900/60 border border-slate-800 rounded-2xl overflow-hidden">
      <model-viewer id="viewer"
        camera-controls
        touch-action="pan-y"
        shadow-intensity="1"
        exposure="1"
        environment-image="neutral"
        ar
        style="width:100%; height:100%; background:transparent;">
      </model-viewer>
    </div>
  </main>

  <script>
    const viewer = document.getElementById('viewer');
    const fileInput = document.getElementById('fileInput');
    const autoRotate = document.getElementById('autoRotate');
    const resetBtn = document.getElementById('resetBtn');
    const screenshotBtn = document.getElementById('screenshotBtn');

    fileInput.addEventListener('change', async (e) => {
      const file = e.target.files?.[0];
      if (!file) return;
      const url = URL.createObjectURL(file);
      viewer.src = url;
      viewer.dismissPoster();
    });

    autoRotate.addEventListener('change', () => {
      viewer.autoRotate = autoRotate.checked;
    });

    resetBtn.addEventListener('click', () => {
      viewer.resetTurntableRotation(0);
      viewer.cameraOrbit = '0deg 75deg 2.5m';
      viewer.fieldOfView = '45deg';
    });

    screenshotBtn.addEventListener('click', async () => {
      const blob = await viewer.toBlob({ mimeType: 'image/png' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = 'screenshot.png';
      a.click();
      URL.revokeObjectURL(a.href);
    });
  </script>
</body>
</html>