VegetationGeneratorThreeJS/index.html at main · achrefelouafi/VegetationGeneratorThreeJS · 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
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vegetation Generator — three.js WebGPU</title>
    <style>
      html, body { margin: 0; height: 100%; overflow: hidden; background: #14181d; 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: #eceff1; 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 green 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(174, 255, 94, .9);
        box-shadow: inset 0 0 60px rgba(150, 230, 70, .30), inset 0 0 12px rgba(174, 255, 94, .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; } }

      /* Flower-brush mode: same frame, but in pale blossom tones. */
      body.flower #app { cursor: crosshair; }
      body.flower #drawFrame {
        opacity: 1; animation: framePulse 2.4s ease-in-out infinite;
        border-color: rgba(242, 255, 205, .85);
        box-shadow: inset 0 0 60px rgba(235, 250, 185, .25), inset 0 0 12px rgba(242, 255, 205, .4);
      }
      body.flower #modeBtn { color: #2a3110; background: linear-gradient(180deg, #f6ffd6, #dff0ab); }
      body.flower #modeBtn .dot { background: #4a5a18; box-shadow: 0 0 8px #4a5a18; }
      body.flower #modeBtn .key { background: rgba(40, 50, 12, .2); color: #2a3110; }

      /* 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: #0e1206;
        background: linear-gradient(180deg, #cdff6a, #a6e84a); border: none;
        box-shadow: 0 6px 20px rgba(0,0,0,.35), 0 0 0 4px rgba(174,255,94,.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: #16240a; box-shadow: 0 0 8px #16240a; }
      #modeBtn .key {
        margin-left: 2px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700;
        background: rgba(14,18,6,.22); color: #16240a;
      }
      /* Orbit mode: pill goes calm/blue so the current state reads at a glance. */
      body.orbit #modeBtn {
        color: #dbe7f5; background: rgba(24,30,40,.85); box-shadow: 0 6px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(120,150,190,.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: #cfd8dc; font-size: 13px; line-height: 1.5;
        background: rgba(10, 14, 18, .55); padding: 10px 14px; border-radius: 10px; pointer-events: none;
        backdrop-filter: blur(6px); max-width: 340px; z-index: 3;
      }
      #hud b { color: #b6f56a; }
      #hud .sub { opacity: .5; margin-top: 6px; font-size: 12px; }

      /* Transient toast, e.g. "ivy planted 🌱". */
      #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: #eaffd0;
        background: rgba(24, 40, 12, .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">🌿 Vegetation Generator <span>three.js WebGPU</span></div>
    <button id="modeBtn"><span class="dot"></span><span class="label">Draw 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>