[SOLVED] Curved line rendering

I’m working on a project that displays 4 entities with a line rendering between each entity. Instead of a line, is there anyway to connect each of the entities via a curved line? Ideally, I’d like to connect them via a Bezier curve. Is that possible?

1 Like

Ok, hello.

As I know, PC can draw only linear lines.

But three.js can. So, you probably can implement it.
Also, there is a nice answer

What about calculate points and draw regular lines between em?

Looking closely, the three.js demo is a series of straight lines so it really comes down to using a curve algorithm and plotting lines between the points.

This is fairly simple to do, especially if you use a library like bezier.js. I just downloaded it and dragged it into this project. And I got this:

3 Likes

Thanks Will. It works well. :grinning:

I am aware this is an ancient topic, but since I found a use in it, I thought perhaps someone else will. I wanted to update it a little. There is a possibility to re-use an existing Bezier object, instead of creating a new one:

var points = [
    { x: 1, y: 2 },
    { x: 3, y: 4},
    { x: 5, y: 6 }
];
var curve = new Bezier(points);

// say we have new coordinates for the curve:
points.forEach(function(point) {
    point.x = someNewValue;
    point.y = someNewValue;
});

// we can assign new coordinates to the existing curve and update it
curve.points.forEach(function(point, index) {
    point.x = points[index].x;
    point.y = points[index].y;
});
curve.update();
2 Likes