What is the process for curving a cylinder in three.js?

Is there a way to arc or bend a distorted cylinder geometry in three.js?

I'm interested in specifying the following parameters:

  • Bend Start - starting point of the bend on the cylinder's height
  • Bend End - ending point of the bend on the cylinder's height
  • Angle - intensity of the bend

I plan to control these parameters using sliders. The cylinder shape is generated by extruding a bezier curve drawn by the user (an extension of the geometry class in three.js).

I would also like the ability to apply multiple bend effects sequentially. For example, one bend could affect the first part of the cylinder, while another bend could then straighten it back out.

Since math isn't my strong suit, I'm seeking tips or formulas for achieving this effect in three.js. One idea I had was to use a line along the central axis and bend it with a bezier curve, then use the position of the line to manipulate the vertices of the cylinder. Does this approach seem feasible?

Answer №1

In order to achieve the desired outcome, it is essential to divide your mesh into slices and convert each slice in a similar manner as demonstrated in the following example:

  • Smoothly connecting circle centers

Here is an overview of how this process can be accomplished:

  1. Establish a straight coordinate system

    Begin by creating a position P0 and three basis vectors X0, Y0, Z0 representing the coordinates of the mesh in a straight form. Let's assume that the axis you intend to bend along is Z0.

    https://i.sstatic.net/9suBC.png

  2. Convert each vertex into local coordinates

    This involves transforming any point P using the formula:

    P.x' = dot( P-P0 , X0 )
    P.y' = dot( P-P0 , Y0 )
    P.z' = dot( P-P0 , Z0 )
    
  3. Create a coordinate system for bending

    Based on the value of P.z' (which serves as a parameter indicating arclength), calculate the angle of the bended arc and rotate the vectors X0, Y0, Z0 to obtain new vectors X1, Y1, Z1. If the bending is around the X axis, X1 = X0 remains unchanged, while the other two vectors need to be rotated.

    https://i.sstatic.net/kI4wh.png

  4. Convert vertices into the bended form

    To achieve this transformation, apply the following calculations:

    P'' = P1 + P.x'*X1 + P.y'*Y1
    

    Now, P'' represents the final vertex of your shape. Once all points have been converted, you can proceed with rendering the mesh. Notably, there is no necessity to calculate the Z1 basis vector - its information has already been encoded within the P1 position.

[Notes]

Be cautious about excessively large bends, as they can potentially distort your mesh topology. Over-bending may lead to self-intersections between the various slices.

All corresponding basis vectors should ideally have the same size, preferably unit length.

The rotation from Y0 -> Y1 is essentially a simple 2D problem. In cases where Y0=(0,1,0), the task simplifies even further given that the circle pointer would be at Y1=(cos(a),sin(a),0). No complex 2D rotation formulas are needed in such instances.

[Edit1] C++/GL Example

Curious to explore further, I took a generated tube featuring a sinus screw and implemented a bend. Here is the resulting visualization:

https://i.sstatic.net/NcKPl.gif

I rendered both the straight and bended meshes to allow for easy visual comparison. The red point signifies the bend center, connected through a line to P0. For alignment purposes, I selected P0,X0,Y0,Z0 to align with the unit matrix. Consequently, the example was transformed in a way that corresponds to the images provided here (in an un-animated state). Below is the C++/GL code used:

The mesh and bending file, zavit.h:

//---------------------------------------------------------------------------
//--- tube with sinus screw -------------------------------------------------
//----------------------
const int ca=20;
const int cb=50;
const float r0=0.3;
const float r1=0.35;
const float l1=2.0;
const float nz=5.0;
vec3 pnt0[ca][cb];  
vec3 nor0[ca][cb];
vec2 txr0[ca][cb];
//---------------------------------------------------------------------------
vec3 pnt1[ca][cb]; 
vec3 nor1[ca][cb];
vec2 txr1[ca][cb];
//---------------------------------------------------------------------------

/*Remaining content omitted for brevity*/

//---------------------------------------------------------------------------

For optimal compatibility and accuracy, ensure accurate correspondence with the specified axes, angles, and coordinate transformations. Through meticulous attention to detail, you can effectively execute the process of slicing and converting meshes with precision and efficiency.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

As a newcomer to angularjs, I am encountering difficulties retrieving and displaying a specific value from a json file in order to showcase it on my view page using angularjs ng-repeat for image source. My goal is to repeat the json file based on a particu ...

What is the preferred way to handle return values in a JQuery Ajax function - true or

Just a quick question about my AJAX function - should I include return statements in the code? Here's an example for reference: $.ajax({ type: 'POST', url: 'Application.cfc?method=runProcess', data: {'userID' ...

Exploring the concept of inheritance in JavaScript and Angular programming

Currently, I am working on a project called "hello world" and it involves two HTML pages named "configuration.html" and "add configuration.html". Each page has its own controller defined as follows: angular.module('MissionControlApp').controller ...

Utilizing JavaScript-set cookie in PHP: A comprehensive guide

I am currently facing a situation where I am setting a cookie using a JavaScript script on my page, but I need to access this value while generating HTML on the server-side using PHP. Let me explain the scenario. When a user requests a page, PHP star ...

javascript functionality may be affected in Internet Explorer and Firefox following the upgrade to jquery version 1.8.3

After upgrading to jquery 1.8.3 from jquery 1.7 (where everything was functioning properly in all browsers), I added a javascript plugin that specifically requires jquery 1.8.2 or 1.8.3 Unfortunately, the image resizing functionality of this javascript is ...

While using jQuery, it was discovered that the name attribute could be changed within the .each() function when working in console.log. However

I'm attempting to modify the name attribute of a cloned table row with the following code: var ipCount = 2; $("#input_form").on("click", "#add_input_param", function() { $('#input_param tr').eq(1).clone().find('input').val ...

What could have caused these errors, since they never made an appearance?

'Link' component cannot be utilized within JSX. The type 'ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>' is not a valid element for JSX. The type 'ForwardRefExoticComponent<LinkPro ...

What is the best way to show an array object from PHP to AJAX in JavaScript?

I am facing an issue with a function that returns an array object from PHP using MySQL. I need to call this array in an AJAX function using JavaScript, but I am unsure of how to display the PHP array object in a dynamic table or console log. Here is my PH ...

Upcoming construction: Issue encountered - The Babel loader in Next.js is unable to process .mjs or .cjs configuration files

Within my package.json file, I have set "type": "module" and "next": "^12.2.5". In my tsconfig.json: { "compilerOptions": { "target": "ES2022", "module": "esnext ...

The icons from MaterializeCSS are not displaying correctly on the navbar within an Angular 7 project

Having an issue implementing MaterializeCSS Icons on the navbar. The arrow-drop_down icon is not displaying correctly, showing only text instead. Oddly enough, the icons render properly on other pages except for the app.component.html file. I attempted to ...

Error message displayed: "Unexpected token 'H' when attempting to render Markdown

I've been working with the react markdown library and wanted to share my code: import Markdown from 'react-markdown'; import PreClass from './PreClass'; type MarkdownFormatTextProps = { markdown: string; tagName?: string; ...

Anticipated outcome for absent callbacks in module API implementation

I am seeking advice on the expected behavior when developing a Node module API. It is becoming complicated in my module implementation to check if the caller has provided a callback before calling it. I am starting to believe that it may be the user's ...

What steps should I take to modify the API addresses within the React project build?

In my React project, I am looking for a method to dynamically change the API addresses after building it. Is there a way to accomplish this without using environment variables? I want to be able to modify the API address even after the build process is c ...

Components in Angular modules that are loaded lazily with identical names

I have developed an Angular application with multiple lazy-loaded modules. Each of these modules contains different components that are conceptually similar but vary in content. For example, each module may have its own "home" component. Is it advisable t ...

Implementing multiple dropdown menus with Material UI in a navigation bar

I am currently working on designing a navigation bar that consists of multiple material UI dropdown menus. However, I have encountered an issue that has proven to be quite challenging for me to resolve. Whenever I click on a navigation bar item, all the dr ...

Do not delete blank notes upon saving

Issue: When multiple notes are created simultaneously, and the same text is entered in the first note and saved, the blank remaining notes are not removed upon page reload or refresh. How can I ensure that empty notes are deleted and only notes with conten ...

Uploading a file to NodeJS via POST and seamlessly forwarding it to another API without storing it on disk

In order to transfer a file from a user through a React UI (with axios), then send it to a NodeJS method via POST using Express, and finally forward the same file directly to another API (.NET WebAPI) without saving it to disk, I am faced with an issue whe ...

I encountered an issue where the error "data.map is not a function" occurs whenever I try to execute a React component

I have implemented the HorizontalScrollbar component and passed data as a prop. When I try to run the HorizontalScrollbar component, I encounter the following error in the console tab of Chrome: Error: Uncaught TypeError: data.map is not a function Horiz ...

Having trouble getting NPM environment variables to function properly on a Windows system?

I have a confusion in my package.json file where I am attempting to compile less code using versioning. Here is an example of what I am trying to achieve: "scripts" { ... "build:css": "lessc --source-map css/index.less build/$npm_package_name.$npm_package ...

Guide on incorporating factories with Ionic/Angular JS while utilizing phonegap

I've been experimenting with global variables in my ionic/angular + phonegap app project by implementing a factory service. However, even adding a simple factory service like the one below somehow disrupts the app and causes all screens to turn compl ...