How to create a sinusoidal function in A-FRAME?
Only I saw there is something like this (this is just random connected points):
<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>
Or something like this:
How can I draw a line in a-frame?
Is it possible to have, like in SVG, to create curves somehow with some rules like in SVG?
/
*********************** EDIT ****************** With code I added as answer, everything is fine but when I want to add control points as spheres, there is an error where sphere cannot be added to scene at the end.
This code throws an error:
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");
sphere.setAttribute("id", `sphere${index}`);
controlPointsEntity.appendChild(sphere);
});
console.log("everything is ok");
And I get this error after that line:
"%ccore:a-node:error %cFailure loading node: %c " "color: red" "color: inherit" "color: red"
Actually the issue was with versions of Three.js-a i a-frame. I edited my answer.
How to create a sinusoidal function in A-FRAME?
Only I saw there is something like this (this is just random connected points):
<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>
Or something like this:
How can I draw a line in a-frame?
Is it possible to have, like in SVG, to create curves somehow with some rules like in SVG?
https://sean.brunnock.com/SVG/SVGPathGenerator/
*********************** EDIT ****************** With code I added as answer, everything is fine but when I want to add control points as spheres, there is an error where sphere cannot be added to scene at the end.
This code throws an error:
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");
sphere.setAttribute("id", `sphere${index}`);
controlPointsEntity.appendChild(sphere);
});
console.log("everything is ok");
And I get this error after that line:
"%ccore:a-node:error %cFailure loading node: %c " "color: red" "color: inherit" "color: red"
Actually the issue was with versions of Three.js-a i a-frame. I edited my answer.
At the end I use example from here: How can I draw a line in a-frame?
********* EDITED ********
Removed Three.js library because it is part of A-FRAME library and added new library
<!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.6.0/aframe.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>