GeometryPainterThreeJS/index.html at main · achrefelouafi/GeometryPainterThreeJS · 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
85
86
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Geometry Painter — three.js WebGPU</title>
    <style>
      html, body { margin: 0; height: 100%; overflow: hidden; background: #0a0b10; font-family: system-ui, sans-serif; }
      #app { position: fixed; inset: 0; }
      /* Custom "brush" cursor while drawing; grab cursor while orbiting. */
      body.draw #app { cursor: crosshair; }
      body.orbit #app { cursor: grab; }
      body.orbit #app:active { cursor: grabbing; }

      #title {
        position: fixed; left: 16px; top: 14px; color: #eef0f6; font-size: 15px; font-weight: 600;
        letter-spacing: .02em; pointer-events: none; opacity: .92; z-index: 3;
      }
      #title span { opacity: .55; font-weight: 400; font-size: 13px; }

      /* Draw-mode border glow: a pulsing violet frame so it's unmistakable you're painting. */
      #drawFrame {
        position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0;
        border: 2px solid rgba(190, 140, 255, .9);
        box-shadow: inset 0 0 60px rgba(150, 90, 240, .30), inset 0 0 12px rgba(190, 140, 255, .45);
        transition: opacity .25s ease;
      }
      body.draw #drawFrame { opacity: 1; animation: framePulse 2.4s ease-in-out infinite; }
      @keyframes framePulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

      /* Clickable mode pill (bottom-center) — the primary, obvious mode switch. */
      #modeBtn {
        position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 4;
        display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
        padding: 9px 16px 9px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #17081f;
        background: linear-gradient(180deg, #dfc2ff, #b287f0); border: none;
        box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 4px rgba(190,140,255,.14);
        transition: transform .12s ease, box-shadow .2s ease;
      }
      #modeBtn:hover { transform: translateX(-50%) translateY(-1px); }
      #modeBtn:active { transform: translateX(-50%) translateY(1px); }
      #modeBtn .dot { width: 9px; height: 9px; border-radius: 50%; background: #2a1240; box-shadow: 0 0 8px #2a1240; }
      #modeBtn .key {
        margin-left: 2px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700;
        background: rgba(23,8,31,.22); color: #2a1240;
      }
      /* Orbit mode: pill goes calm/blue so the current state reads at a glance. */
      body.orbit #modeBtn {
        color: #dbe7f5; background: rgba(24,28,40,.85); box-shadow: 0 6px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(130,150,200,.25);
      }
      body.orbit #modeBtn .dot { background: #6ea8ff; box-shadow: 0 0 8px #6ea8ff; }
      body.orbit #modeBtn .key { background: rgba(255,255,255,.1); color: #dbe7f5; }

      #hud {
        position: fixed; left: 16px; bottom: 16px; color: #cfd4e0; font-size: 13px; line-height: 1.5;
        background: rgba(10, 12, 20, .55); padding: 10px 14px; border-radius: 10px; pointer-events: none;
        backdrop-filter: blur(6px); max-width: 340px; z-index: 3;
      }
      #hud b { color: #cfa4ff; }
      #hud .sub { opacity: .5; margin-top: 6px; font-size: 12px; }

      /* Transient toast, e.g. "crystals seeded 💎". */
      #toast {
        position: fixed; left: 50%; top: 64px; transform: translateX(-50%) translateY(-8px); z-index: 5;
        padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #efe2ff;
        background: rgba(38, 18, 58, .9); box-shadow: 0 4px 16px rgba(0,0,0,.4);
        opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
      }
      #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

      .fatal {
        position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ff8a80;
        background: rgba(20, 8, 8, .85); padding: 16px 22px; border-radius: 10px; font-size: 14px; max-width: 480px; z-index: 6;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <div id="drawFrame"></div>
    <div id="title">💎 Geometry Painter <span>three.js WebGPU</span></div>
    <button id="modeBtn"><span class="dot"></span><span class="label">Paint mode</span><span class="key">D</span></button>
    <div id="hud"></div>
    <div id="toast"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>