Good day everyone. For the last 2-3 weeks I’m trying to wrap my head around some concepts of creation and triangulation of points. Will try to describe what i want to achieve, and which problems I’ve faced.
Trying to reproduce the following functionality. This Ellipse has 4 bars, which are acting as control points. While dragging the top right control point I’m able to go from initial ellipse to the states as on screenshots 2 and 3. Tried to make a video, but while recording, changes in the client don’t show up on a record.
The ellipse is constructed with the cubic bezier algorithm, being divided onto 4 quarters.
To be able
I’ve tried two approaches :
Wrote a cubic bezier function. That was generating array of points, from 4 control points. Then was constructing triangles from the center. (It was a flawed approach, as I’ve figured out a bit later. If I’m dragging control of one of the quarters, the others remain the same)
Three uses a certain triangulation algorithm under the hood. As it seems for me. When I’m trying to update control point, as on the top most screenshots - it breaks.
It’s all my guesses, because I’m trying to learn, but know almost nothing. To make the functionality i need, i have to use a certain triangulation algorithm with a particular approach - where i would have to look for the intersection.
During the last week of searching, i still haven’t figured it out. Can somebody help, in which direction to look at? Or maybe my initial approach, of building with curves, was wrong.
Thanks a lot.
If i got you right the first 3 screens are not my implementation. It’s what i need to achieve. My implementation is the one, that looks ugly. Here is the code of my version
build_shape() {
// this.buildTriangles() returns [[10, 0], [9, 1.5], [8, 2], ...]
let vertexPositions = this.buildTriangles();
const vertices = new Float32Array(vertexPositions.length * 2);
for (let i = 0; i < vertexPositions.length; i++) {
vertices[i * 2 + 0] = vertexPositions[i][0];
vertices[i * 2 + 1] = vertexPositions[i][1];
}
const geometry = new THREE.BufferGeometry();
geometry.setAttribute(
'position',
new THREE.BufferAttribute(vertices, 2),
);
var material = new THREE.MeshBasicMaterial({ color: 0xffff00, wireframe: false });
this.mesh = new THREE.Mesh(geometry, material);
scene.add(this.mesh)
renderer.render(scene, camera);
}
Ah right, in that case I’m sure you could use the curve class from this example which has methods such as getSpacedPoints from these points you could then use the previously referenced documentation to create a shape and shapeGeometry maybe, I’m not sure how this handles overlapping curve intersections, would need testing but definitely an approach worth trying before entirely building something from scratch
I’ve looked in example provided by you, thanks. Need to think on it a bit more, but from the first glance, I don’t know how does it solve my problem. I’m having code, with more or less working bezier curve. It changes vertices of triangles of the mesh according to control points. That one works pretty fine.
My problem is, when I’m starting to drag, let’s say first quarter, ( unit circle ), the neighbor ( 2nd quarter) isn’t been affected by it. Because each quarter has its own control points.
I guess my problem, isn’t related to cubic bezier directly, rather than how triangles inside the mesh are interacting with each
It seems to me that drawing the curve when it overlaps creates areas to be viewed independently. These must then also be triangulated independently. In your last picture you can see that some triangles go through the area that is obviously not to be filled.
Arbitrarily bordered areas can be filled with a general triangulation algorithm. But then you have to recalculate each time, which is time-consuming.
