Working with Spline Offset Functionality in Three.js

Question

Working with Spline Offset Functionality in Three.js

I am working on creating 3D text from font glyphs. While TextGeometry can be used for this purpose, I prefer to manually draw the text because I need to apply an offset on the font splines.

Currently, I have the splines with their respective points and I am able to draw the letters.

Given the points: previousPoint, currentPoint, and nextPoint, I am struggling to compute the bisector between the previous and next points. Any suggestions on how to achieve this?

Alternatively, is there a different approach to moving spline points away from their initial positions to create the desired offset?

Your insights are greatly appreciated!

EDIT:

While your responses helped me determine the correct values for most font splines, I am facing an issue specifically with the 'o' and '0'. The method used seems to be drawing a strange tangent at the bottom of these letters. Here is the unexpected result: image link

If anyone has any ideas on how to troubleshoot this, please share!

EDIT 2:

I am excited to announce that I have completed my project. The final product includes an .stl exporter feature. Check out the finalized offset here: final offset image

Thank you all for your valuable contributions!

javascript fonts three.js geometry geometry-surface

Answer 1

Answer №1

These are the calculations:

x = (prev_x + next_x) / 2 and y = (prev_y + next_y) / 2

incorrect outcome

desired result

This is the code snippet where let points represents all the points in 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);
    }
}

Answer 2

These are the calculations:

x = (prev_x + next_x) / 2 and y = (prev_y + next_y) / 2

incorrect outcome

desired result

This is the code snippet where let points represents all the points in 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);
    }
}

Answer 3

Answer №2

Can you explain the splines that define your glyphs?

I understand that TTF fonts utilize quadratic Bezier curves. In a Bezier curve, the direction vector at the starting and ending points point towards the control point. This means that the difference

S = ControlPoint[1] - ControlPoint[0]

represents the direction at the starting point, while the difference

E = ControlPoint[1] - ControlPoint[2]

represents the direction at the ending point.

To find the bisector vector between two neighboring curves, normalize these vectors and add them together:

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

Answer 4

Can you explain the splines that define your glyphs?

I understand that TTF fonts utilize quadratic Bezier curves. In a Bezier curve, the direction vector at the starting and ending points point towards the control point. This means that the difference

S = ControlPoint[1] - ControlPoint[0]

represents the direction at the starting point, while the difference

E = ControlPoint[1] - ControlPoint[2]

represents the direction at the ending point.

To find the bisector vector between two neighboring curves, normalize these vectors and add them together:

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

Working with Spline Offset Functionality in Three.js

Answer №1

Answer №2

Similar questions

Maintaining the aspect ratio of images in Bootstrap Carousel: A complete guide

Unable to adjust image opacity using jQuery

Deactivate CS:GO Dedicated Server using Node.js child_process

The case of ASP.NET MVC Form Triggering Duplicate Submissions

Unpredictable Results with JSON Data

activating javascript function in rails when the page reloads

Guide on changing the background image of an active thumbnail in an autosliding carousel

Using JS or jQuery to organize JSON data into a multidimensional array

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

How to target only the parent div that was clicked using jQuery, excluding any

Is there a way to dynamically adjust the height of a DIV block?

How can you modify a hyperlink URL before it is activated?

Problem encountered in NextJS/ReactJS when attempting to dynamically load a new component by clicking a button within the current component

Can anyone explain why the Splice function is removing the element at index 1 instead of index 0 as I specified?

Error: An unexpected identifier was encountered while declaring a class attribute

Tips for implementing advertisements through a content management system or JavaScript

Updating the state of a React component through a button click using React-JS

Seeking specific parameter in a JSON array using JavaScript: A guide

Sending data to a PHP page to maintain state in an Angular application

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning