Spline offset in three.js

Question

I have to make 3d text from font glyphs. Yes, I know that I can use TextGeometry, but I need to draw this manually because I need to do offset on font splines.

At this moment I have splines with their points and I can draw letters.

From points I know: previousPoint, currentPoint and nextPoint and I need to compute bisector between previous and next points and I have no idea to do that.

Or if is another way to move spline points outer of initial position to do offset.

My idea:

Check here my idea..

Thank you!

EDIT:

With yours answers I obtained correct values for each splines from font, but only at 'o' and '0' I have a problem. This method draw a weird tangent in bottom of the letter and I don't know to resolve this problem.. here is the result

Anybody know how to resolve this?

EDIT 2:

Finally I finished my project. And this is the final product ( .stl exporter )

final offset

Thank you for yours answers!

The blue x next to your α is just the midpoint of prev and next, so `x = (prev_x + next_x) / 2` and `y = (prev_y + next_y) / 2`. With that, you should be able to find anything else on that blue line. If, however, you need the line through "current", perpendicular to the line `prev--next`, you want to look up how to project a point onto a line in 2D (lots of tutorials for that on the web). — Mike 'Pomax' Kamermans, Sep 11 '18 at 21:41
Have a look at this [SO answer](https://stackoverflow.com/a/50964592/4045502). — prisoner849, Sep 12 '18 at 07:28
@prisoner849 : Thank you, thank you, thank you so much!! It works perfectly! — Oprisor Valeriu Vladut, Sep 12 '18 at 08:02
@OprisorValeriuVladut You're welcome. :) Pay attention to the link to the forum thread, mentioned in that answer. — prisoner849, Sep 12 '18 at 08:14
@prisoner849 Now I have a weird tangent in bottom of the spline, I edited the post and I put an image with the result.. Can you help me with that? — Oprisor Valeriu Vladut, Sep 12 '18 at 09:39
@OprisorValeriuVladut Any chance to see a live code example? — prisoner849, Sep 12 '18 at 18:44
@prisoner849 Thank you very much for your interest. Finally I succeeded to finish my project and all the things works ok. I will post in edit one screenshoot with final product. Thank you very much! :) — Oprisor Valeriu Vladut, Sep 13 '18 at 13:06

MBo · Answer 1 · 2018-09-12T07:19:29.997

What splines describe your glyphs?

I know that TTF fonts use quadratic Bezier curves. For Bezier direction vector in starting and ending points has direction onto control point. So difference

S = ControlPoint[1] - ControlPoint[0]

represents direction in the starting point, difference

E = ControlPoint[1] - ControlPoint[2]

represents direction in the ending point.

Normalize these vectors for two neighbour curves and add them - now you have bisector vector.

 Bisector = E(i).Normalized + S(i+1).Normalized

score 0 · Answer 2 · answered Sep 12 '18 at 07:09

There are the result from: x = (prev_x + next_x) / 2 and y = (prev_y + next_y) / 2 wrong result

desired result

Here is my code where let points is all the points from the path:

    getPathPoints(path) {
    let points = path.getPoints();
    console.log(points)
    for (let i = 0; i < points.length; i++) {
        let A = points.extended(i - 1); // previousPoint => where extends is a custom array prototype
        let B = points.extended(i); // currentPoint
        let C = points.extended(i + 1); // nextPoint

        let x = (A.x + C.x) / 2;
        let y = (A.y + C.y) / 2;
        let bisector = new THREE.Vector2(x,y);
        console.log(bisector);
    }
}

Spline offset in three.js

2 Answers2