HTMLify
index.html
Views: 32 | Author: karbonsites
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 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gesture Controlled Particle System</title> <link rel="stylesheet" href="./style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.165.0/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.165.0/examples/js/controls/OrbitControls.js"></script> <!-- Placeholder for Hand Tracking Library (e.g., MediaPipe or TensorFlow.js Hand Tracking) --> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/holistic@0.5.16/holistic.min.js"></script> </head> <body> <div id="overlay"> <div id="ui-container"> <header> <h1>Gesture Particle Control</h1> <p>Use hand gestures to manipulate the 3D particle system.</p> </header> <div id="controls"> <div class="control-group"> <h3>Template: <span id="current-template">Hearts</span></h3> <div class="button-group"> <button data-template="hearts">Hearts</button> <button data-template="flowers">Flowers</button> <button data-template="saturn">Saturn Ring</button> <button data-template="fireworks">Fireworks Burst</button> </div> </div> <div class="control-group"> <h3>Expansion Factor: <span id="current-expansion">1.0</span></h3> <input type="range" id="expansion-slider" min="0.1" max="5.0" step="0.1" value="1.0"> </div> </div> <div id="status">Initializing Camera...</div> </div> </div> <video id="webcam" style="display: none;"></video> <canvas id="three-canvas"></canvas> <script src="./script.js"></script> </body> </html> |