Using Threejs to create an elbow shape with specified beginning and ending radii

I'm a beginner in Threejs and I'm attempting to create an elbow shape along a curved path with varying begin_radius and end_radius, using the curve_radius and an angle. However, I haven't been successful in achieving the desired results.

  • CylinderGeometry allows for setting the begin_radius and end_radius but does not support a curve path.
  • TorusGeometry supports setting the curve_radius and angle, however it lacks options for adjusting the begin_radius and end_radius, as well as being non-solid.
  • LatheGeometry faces similar limitations as CylinderGeometry.
  • ExtrudeGeometry encounters comparable challenges as TorusGeometry.
  • TubeGeometry presents the same drawbacks as TorusGeometry.

I may be overlooking potential solutions within the mentioned geometries. Your guidance on alternative approaches would be greatly appreciated.

--EDIT: June 1 2020--

https://jsfiddle.net/arundhaj/ysfr8jb0 I have managed to modify TubeGeometry to achieve variable radius, although the solidity remains a challenge. By incorporating the generateCap function from CylinderGeomery to add caps at the start and end of the arc, the shape works well with a single cap but distorts when both caps are added.

Your assistance is requested.

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

angulartypescriptthree.js

Answer №1

In my opinion, the most effective solution would involve customizing a torus geometry to include the begin_radius and end_radius parameters.

One approach is to modify the existing code by incorporating a gradient definition for the radius instead of a static value. Here's a snippet of what that might look like:

for ( j = 0; j <= radialSegments; j ++ ) {

      for ( i = 0; i <= tubularSegments; i ++ ) {

          var u = i / tubularSegments * arc;          
          var v = j / radialSegments * Math.PI * 2;

          // vertex

          vertex.x = ( radius + tube * Math.cos( v ) ) * Math.cos( u );
          vertex.y = ( radius + tube * Math.cos( v ) ) * Math.sin( u );
          vertex.z = tube * Math.sin( v );

          vertices.push( vertex.x, vertex.y, vertex.z );

          // normal

          center.x = radius * Math.cos( u );          
          center.y = radius * Math.sin( u );          
          normal.subVectors( vertex, center ).normalize();

          normals.push( normal.x, normal.y, normal.z );

          // uv

          uvs.push( i / tubularSegments );            
          uvs.push( j / radialSegments );

      }

  }

The main challenge lies in determining how to adjust the parameters correctly. It may require some experimentation to identify which values need to be modified.

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

Setting a default check on a checkbox within an ngFor loop in Angular 2

I'm attempting to initialize a default value as checked for a checkbox within my ngFor loop. Here is an array of checkbox items I am working with: tags = [{ name: 'Empathetic', checked: false }, { name: 'Smart money', che ...

angulartypescriptcheckboxngforangular2-ngmodel

Can shapes in three.js be outlined with edge highlighting?

I have a 3D scene created with square "timber" shapes. I want to enhance the visuals by adding outlines to the shapes without displaying the triangles that form the rectangles. Additionally, I am working on incorporating side walls constructed from various ...

three.js

What causes the functionality of THREE.EffectComposer to fail when the webgl-context is re-initialized?

As I work on a page with ajax-navigation, I face an issue where my WebGL setup breaks when using EffectComposer. When the user navigates away from the WebGL section and returns, I need to re-run all WebGL setup code to recreate the scene. This process func ...

webglthree.js

Dealing with the Angular 7 ExpressionChangedAfterItHasBeenCheckedError in combination with NgsScrollReveal

Utilizing ngScrollReveal triggers a re-render with every scroll event. I am invoking a function through the HTML in this manner: <component [alternate]="toggleAlternate()"> The code for toggleAlternate() is as follows: toggleAlternate() { this.a ...

angulartypescript

Solving issues with malfunctioning Angular Materials

I'm facing an issue with using angular materials in my angular application. No matter what I try, they just don't seem to work. After researching the problem online, I came across many similar cases where the solution was to "import the ...

htmlcssangulartypescript

Angular is unable to bind with 'dragula' because it does not recognize it as a valid property of 'ul'

I've been attempting to incorporate dragula into my Angular 2 application, but I'm struggling to get it functioning. This is what I have added in my app.module.ts file: import { DragulaModule, DragulaService } from 'ng2-dragula/ng2-dragula ...

javascriptangularnpmwebpackng2-dragula

Interacting between two occurrences of the identical Angular component

Within a Razor view, I include an angular component: <my-widget id="myWidget" isfullscreen="false" class="some-class"></my-widget> Upon clicking the 'Popup' button, a popup appears in an iframe and the s ...

jqueryangularangular10

Using Angular 4's ngComponentOutlet to showcase ContentChildren that are dynamically changing

My main objective is to create a unique container component with a dynamic list of customized card components that can be accessed individually (instead of as a group using ng-content). <custom-card-holder> <custom-card></custom-card> ...

angulartypescript

Utilizing Regular Expressions as a Key for Object Mapping

Currently, I am facing a challenge in mapping objects with keys for easy retrieval. The issue arises when the key can either be a string or a RegExp. Assigning a string as a key is simple, but setting a regex as a key poses a problem. This is how I typica ...

angularregextypescriptmapping

The validator is incorrectly diagnosing the input as 'invalid' when in reality it is not

Currently, I am working on creating a text field that must not be empty and should also not start with a specific set of characters (let's say 'test'). For example, I want testxyz or an empty field to be considered invalid, while anything e ...

angulartypescriptvalidation

Angular 2 RXJS allows for the creation of JSON objects through multiple calls

Feeling a bit perplexed, but here I go: I am dealing with information on two characters obtained from various endpoints. The data is not neatly organized from the backend, so instead of receiving structured data like this: character{ character1{ ...

arraysjsonangularobjectrxjs

When trying to access the DOM from another module in nwjs, it appears to be empty

When working with modules in my nwjs application that utilize document, it appears that they are unable to access the DOM of the main page correctly. Below is a simple test demonstrating this issue. The following files are involved: package.json ... "ma ...

javascripttypescriptnode-webkitnwjs

Navigating with the router on a different page

My appcomponent contains all the routes, and on the next page I have several links that are supposed to route to the same router outlet. How can I navigate when a link is clicked? I attempted using [routerLink]="['PersonInvolved']", but I encoun ...

angularangular2-routing

Error: Unhandled promise rejection - component.canDeactivate is undefined

I encountered an error while setting up my CanDeactivateGuard. Uncaught (in promise): TypeError: component.canDeactivate is not a function To ensure reusability, I decided to create a generic version of the CanDeactivateGuard. For this purpose, I craf ...

angulartypescript

Angular 2 issue with nested form elements

Looking to build a form that includes nested sub/child components within it. Referring to this tutorial: https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2 https://plnkr.co/edit/clTbNP7MHBbBbrUp20vr?p=info List of modificatio ...

javascriptangularjsformsangularcomponents

Angular allows for the dynamic updating of og meta tags

Sharing dynamic content on WhatsApp has been made possible through an API. By utilizing the angular Meta class in my component.ts file, I am able to dynamically update the default meta tag property in index.html with the latest content. ...

htmlangulartypescriptmeta-tagsog-meta

Steer clear of encapsulating components or modifying the attributes of the encapsulating element

I am currently developing an application that involves dynamically adding components. One of the key components is a block component with the following template: <div id="{{element.id}}" class="row" [hidden]="hide"> ...

angular

Using placeholders with inputs in an Angular2 table generated by ngFor

I have an array public example = [['hallo', 'fruit', 'rose'], ['apple','book']] Currently, I am working on creating a table of inputs. The values in this table depend on the specific part that I am usin ...

javascriptangulartypescriptngfor

Ideal method of re-entering ngZone following an EventEmitter event

There is a specific component that wraps around a library, and to prevent the chaos of change detection caused by event listeners in this library, the library is kept outside the Angular zone: @Component({ ... }) export class TestComponent { @Output() ...

angulartypescriptoutputngzoneangular-event-emitter

Vue.js with TypeScript: The property 'xxx' is not found on the type 'never'

I have a computed method that I am trying to execute: get dronesFiltered(){ const filtered = this.drones.filter((drone) => { return drone.id.toString().indexOf(this.filterId) > -1 && drone.name.toLowerCase().toString().in ...

typescriptvue.js