Reports

At the end I use example from here: How can I draw a line in a-frame?
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Bézier Curve in A-Frame</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js">            </script>
</head>
<body>
    <a-scene id="scene">
        <a-camera position="0 2 5"></a-camera>
        <a-entity id="bezierCurve"></a-entity>
    </a-scene>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const scene = document.querySelector("#scene");
            const bezierCurveEntity = document.querySelector("#bezierCurve");

            // Dinamične kontrolne točke (može se dodavati ili uklanjati)
            let controlPoints = [
                new THREE.Vector3(-3, 0, 0),
                new THREE.Vector3(-2, 3, 1),
                new THREE.Vector3(3, -5, 2), // Dodana dodatna točka
                new THREE.Vector3(2, 3, 1),
                new THREE.Vector3(3, 0, 0)
            ];

            function updateCurve() {
                // Uklanjanje stare krivulje
                while (bezierCurveEntity.firstChild) {
                    bezierCurveEntity.removeChild(bezierCurveEntity.firstChild);
                }

                // Generiranje glatke krivulje pomoću Catmull-Rom interpolacije
                const curve = new THREE.CatmullRomCurve3(controlPoints);
                const curvePoints = curve.getPoints(50); // 50 točaka na krivulji

                const curveGeometry = new THREE.BufferGeometry().setFromPoints(curvePoints);
                const curveMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
                const curveObject = new THREE.Line(curveGeometry, curveMaterial);

                // Dodavanje nove krivulje u scenu
                scene.object3D.add(curveObject);

                // Dodavanje kuglica na kontrolne točke
                controlPoints.forEach((point, index) => {
                    const sphere = document.createElement("a-sphere");
                    sphere.setAttribute("position", `${point.x} ${point.y} ${point.z}`);
                    sphere.setAttribute("radius", "0.2");
                    sphere.setAttribute("color", "red");
                    bezierCurveEntity.appendChild(sphere);
                });

                console.log("Krivulja i kuglice ažurirane!");
            }

            // Prvi prikaz krivulje
            updateCurve();
        });
    </script>
</body>
</html>
79405466
