Function init

main.js:98–132

()

// --- INIT THREE.JS ---
function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1500);
    camera.position.z = targetCameraZ; // Starting with a wider default view

    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);

    const container = document.getElementById('container');
    if (container) {
    container.appendChild(renderer.domElement);
    } else {
    console.error("HTML element with id 'container' not found!");
    return;
    }

    particles = createParticleSystem();
    scene.add(particles);
    window.addEventListener('resize', onWindowResize);
    initGUI();

    // --- Get references for drawing ---
    videoElement = document.querySelector('.input_video');
    canvasElement = document.querySelector('.output_canvas');
    if (canvasElement) {
        canvasCtx = canvasElement.getContext('2d');
    } else {
        console.error("Output canvas element not found!");
    }
    // ---

    setupBloom();
    setupHandTracking(); // Setup hand tracking last
}

// --- WINDOW RESIZE ---
function onWindowResize() {