框架和绘制正弦3D函数

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

如何在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/

the在最后我使用示例的结局：
aframe
1个回答
0
投票

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




    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.