oprav kod, aby byl funkcni

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Geometrický Program</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
    <style>
        body { margin: 0; overflow: hidden; display: flex; font-family: Arial, sans-serif; }
        #controls { width: 200px; padding: 10px; background-color: #f0f0f0; }
        #scene { flex-grow: 1; }
        #controls-right { width: 200px; padding: 10px; background-color: #f0f0f0; }
        button { display: block; margin: 5px 0; width: 100%; padding: 5px; }
        input { width: 100%; margin-bottom: 10px; }
    </style>
</head>
<body>
    <div id="controls">
        <input type="number" id="pointCount" min="1" value="10">
        <button onclick="updatePointCount()">Nastavit body</button>
        <button onclick="selectCircle(0)">Kruznice 1</button>
        <button onclick="selectCircle(1)">Kruznice 2</button>
        <button onclick="selectCircle(2)">Kruznice 3</button>
        <button onclick="drawShape()">Zakreslit</button>
        <button onclick="toggleFill()">Přepnout výplň</button>
    </div>
    <div id="scene"></div>
    <div id="controls-right">
        <button onclick="moveCircle(0)">Posunout kruznici 1</button>
        <button onclick="moveCircle(1)">Posunout kruznici 2</button>
        <button onclick="moveCircle(2)">Posunout kruznici 3</button>
    </div>

    <script>
        let scene, camera, renderer, controls;
        let circles = [], points = [], selectedPoints = [0, 0, 0];
        let shapes = [], fillShapes = false;
        let pointCount = 10;

        function init() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, (window.innerWidth - 400) / window.innerHeight, 0.1, 1000);
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth - 400, window.innerHeight);
            document.getElementById('scene').appendChild(renderer.domElement);

            // Orbit controls pro otáčení scény
            controls = new THREE.OrbitControls(camera, renderer.domElement);

            // Inicializace kružnic
            for (let i = 0; i < 3; i++) {
                let geometry = new THREE.TorusGeometry(5, 0.1, 16, 100);
                let material = new THREE.MeshBasicMaterial({ color: 0xffffff });
                let torus = new THREE.Mesh(geometry, material);
                circles.push(torus);
                scene.add(torus);
            }

            circles[0].rotation.x = Math.PI / 2;
            circles[1].rotation.y = Math.PI / 2;

            camera.position.z = 15;

            updatePointCount();
            animate();
        }

        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }

        function updatePointCount() {
            pointCount = parseInt(document.getElementById('pointCount').value);
            for (let circle of circles) {
                scene.remove(circle);
            }
            circles = [];
            points = [];

            for (let i = 0; i < 3; i++) {
                let geometry = new THREE.TorusGeometry(5, 0.1, 16, 100);
                let material = new THREE.MeshBasicMaterial({ color: 0xffffff });
                let torus = new THREE.Mesh(geometry, material);
                circles.push(torus);
                scene.add(torus);

                let circlePoints = [];
                for (let j = 0; j < pointCount; j++) {
                    let angle = (j / pointCount) * Math.PI * 2;
                    let x = 5 * Math.cos(angle);
                    let y = 5 * Math.sin(angle);
                    let pointGeometry = new THREE.SphereGeometry(0.1);
                    let pointMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
                    let point = new THREE.Mesh(pointGeometry, pointMaterial);
                    if (i === 0) {
                        point.position.set(x, y, 0);
                    } else if (i === 1) {
                        point.position.set(x, 0, y);
                    } else {
                        point.position.set(0, x, y);
                    }
                    torus.add(point);
                    circlePoints.push(point);
                }
                points.push(circlePoints);
            }

            circles[0].rotation.x = Math.PI / 2;
            circles[1].rotation.y = Math.PI / 2;
        }

        function selectCircle(index) {
            selectedPoints[index] = (selectedPoints[index] + 1) % pointCount;
            updatePointHighlight();
        }

        function updatePointHighlight() {
            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < pointCount; j++) {
                    points[i][j].material.color.setHex(j === selectedPoints[i] ? 0x00ff00 : 0xff0000);
                }
            }
        }

        function drawShape() {
            // Odstranění předchozích tvarů
            for (let shape of shapes) {
                scene.remove(shape);
            }
            shapes = [];

            let selectedPositions = selectedPoints.map((pointIndex, circleIndex) => 
                points[circleIndex][pointIndex].getWorldPosition(new THREE.Vector3())
            );

            if (selectedPositions.every(pos => pos.distanceTo(selectedPositions[0]) > 0.1)) {
                if (selectedPositions.length === 3) {
                    // Kreslení trojúhelníku
                    let geometry = new THREE.BufferGeometry().setFromPoints(selectedPositions);
                    let material = fillShapes 
                        ? new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide, transparent: true, opacity: 0.5 })
                        : new THREE.LineBasicMaterial({ color: 0x00ff00 });
                    let shape = fillShapes 
                        ? new THREE.Mesh(geometry, material)
                        : new THREE.Line(geometry, material);
                    scene.add(shape);
                    shapes.push(shape);
                } else {
                    // Kreslení úsečky
                    let geometry = new THREE.BufferGeometry().setFromPoints(selectedPositions);
                    let material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
                    let line = new THREE.Line(geometry, material);
                    scene.add(line);
                    shapes.push(line);
                }
            }
        }

        function toggleFill() {
            fillShapes = !fillShapes;
            drawShape();
        }

        function moveCircle(index) {
            let circle = circles[index];
            circle.rotation.z += (2 * Math.PI) / pointCount;
            updatePointHighlight();
        }

        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {
            camera.aspect = (window.innerWidth - 400) / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth - 400, window.innerHeight);
        }

        init();
    </script>
</body>
</html>