框架和绘图曲线

Question

如何在A型框架中创建正弦函数？

我只看到这样的东西（这只是随机连接点）：

<a-entity line="start: 0 1 0; end: 2 0 -5; color: green"
      line__2="start: 2 0 -5; end: 0 4 -3; color: green"
      line__3="start: 0 4 -3; end: 4 2 2; color: green"
      ...
      line__N="start: Xn-1 Yn-1 Zn-1; end: Xn Yn Zn; color: green"

></a-entity>

或类似的东西：

我如何在A框架中绘制一条线？

有可能像在SVG中一样，以某些规则（例如SVG？

？）创建曲线。

https：//sean.brunnock.com/svg/svgpathgenerator/

********************************************************************************************************************************************************************************** 使用代码我添加为答案，一切都很好，但是当我想将控制点添加为球体时，出现一个错误，无法将球形添加到场景中。该代码引发错误：

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", "blue"); sphere.setAttribute("id", `sphere${index}`); controlPointsEntity.appendChild(sphere); }); console.log("everything is ok");

我在那条线之后得到了这个错误：

"%ccore:a-node:error %cFailure loading node: %c " "color: red" "color: inherit" "color: red"

the在最后我使用示例的结局：

我如何在A框架中绘制一条线？

Answer 1

<!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>

框架和绘图曲线

问题描述投票：0回答：1

1个回答

最新问题

框架和绘图曲线

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1