What is the best method for rotating segments in THREE.TubeGeometry?

I've successfully generated a flat tube structure using THREE.TubeGeometry with radiusSegments set to 2. However, once added to the scene, it appears perpendicular to the ground:

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

Is there a way to rotate each segment of the tube so that they are parallel to the ground?

Check out this example on JSFiddle.

var points = [];
for (var i = 0; i < 5; i++) {
   var randomY = i*5/2*10 + -50;
   var randomX = 15*Math.sin(5*i);
   points.push(new THREE.Vector3(randomX, randomY, 0));
}
var tubeGeometry = new THREE.TubeGeometry(new THREE.SplineCurve3(points), 64, 6, 2, false);
tubeMesh = createMesh(tubeGeometry);
scene.add(tubeMesh);
javascriptthree.js

Answer №1

One approach I would suggest is using a unique custom flat geometry instead of the TubeGeometry. Calculate the vertices at specific locations rather than relying on rotation.

To achieve this, you can follow these steps:

  1. Generate random points (some mathematical calculations will be required to place them accurately, which can be a fun challenge!)
  2. Obtain spline points from each curve
  3. Perform triangulation on these points

If you opt to proceed with your code, make the following adjustment to ensure it is parallel to the plane. Add this line after creating the tubeMesh in the generateTube function:

tubeMesh.rotateY(Math.PI/2);

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

The element 'Component' cannot be utilized as a JSX component since its type 'ReactElement<any, any> | Component<{}, any, any>' is not a valid JSX element

I'm currently facing an issue while running "yarn build" and/or "npm run build" on a repository. The error persists for both commands. My goal is to build and deploy this code to an AWS environment, but I am stuck at resolving the errors that indicate ...

javascriptreactjsnext.jsjsx

Display a div based on user selection using Ajax and Laravel

There are two div elements on the index page containing a datatable. By default, these two divs should be hidden. When an option is selected from the dropdown menu, the corresponding div should be displayed. The webpage is designed for searching within a ...

javascriptjqueryajaxlaravellaravel-5.6

The HTML unit is unable to locate the form for unknown reasons. My suspicion is that it could be due to the presence of Angular

Struggling with using HTMLunit to login and upload a file. Successfully logged in but unable to locate the form, despite it being present on the HTML page. Here is the JAVA CODE snippet: public static void main(String[] args) { WebClient webClient = ...

javascriptjavahtmlangularjshtmlunit

What is the proper way to invoke a child method after converting an object from a parent class to a child class?

When we have a subclass B that overrides a method from its superclass A in TypeScript, why does calling the method on an instance of A result in the parent class's implementation being called? In TypeScript, consider a class called Drug with properti ...

javascripttypescriptclasspolymorphismsubclass

Repair the navigation bar once it reaches the top of the screen using ReactJS

I have a webpage that contains specific content followed by a bar with tabs. My goal is to have this bar stay fixed at the top of the screen once it reaches that position while scrolling down, and only allow the content below the fixed bar to continue scro ...

javascripthtmlcssreactjstailwind-css

JavaScript's setAttribute function is not functioning as expected

I have been using the setAttribue method as shown below. It works perfectly for the first instance, but after that, when I try to change the value, it displays an alert without updating with document.getElementById("to").setAttribute("value", selValue); d ...

javascripthtml

Close session when browser/tab is exited

After extensive searching online, I have been unable to find a satisfactory solution for ending a session when a browser or tab is closed without requiring the user to log off. I have attempted numerous JavaScript codes that I came across, but none of the ...

javascriptjqueryasp.netajax

Transfer information using cURL without the need to refresh the webpage

I am trying to send data to an external API using cURL from a Facebook iframe page (not tab). However, I want to achieve this without reloading the form page. My idea is to use jQuery AJAX to display a "submitting data" message upon form submission and sh ...

phpjavascriptajaxiframefacebook

Utilizing the Filter Function to Eliminate an Element from an Array

I am a beginner in the world of React and I'm currently working on developing a simple timesheet tool where users can add tasks and save them. My tech stack includes React and Typescript. Currently, my main component has an empty array for tasks and ...

javascriptreactjstypescriptfunctionevents

Is there a way for me to update a Link To containing a parameter by using history.push with a parameter inside a table cell?

Hey there! I'm working on some code and wondering if it's doable to replace the Link To with a history.push, including the following parameter, like so: <TableCell style={{width: '10%'}}> <Link to={`/run-id/${item.run_ ...

javascriptreactjsreact-routermaterial-ui

Encountered Node.js & MySQL error: 1251 - Client not able to support authentication protocol requested by server. It is recommended to upgrade MySQL client for resolving this

I currently only have the following code snippet: const Sequelize = require('sequelize'); const sequelize = new Sequelize('database', 'root', 'passwd', { host: 'localhost', dialect: 'mysql', ...

javascriptmysqlnode.jssequelize.js

Tips for achieving a complete 3D model rotation using pitch, roll, and heading in three.js?

My advanced chip provides me with pitch angles ranging from -90° to 90°, roll angles from -180° to 180°, and heading angles from 0° to 360°. In my threejs project, I aim to reflect any object rotations onto a model. Even though I have developed a t ...

three.js3dcoordinate-systems

Analyzing the list of paths that are passed to the function

I am looking for assistance in creating an asynchronous "getTypes" function that can analyze a list of paths and return an array describing the type of content in each path. The function should handle all cases efficiently and in case of any errors during ...

javascriptasynchronouses6-promise

Guide to handling HTTP request parsing in Express/NodeJs when the content type is missing, by setting a default content type

Is it possible to retrieve POST data in an express request when the bodyParser does not work? var server = express(); server.use(express.bodyParser()); server.post('/api/v1', function(req, resp) { var body = req.body; //if request header doe ...

javascriptjsonnode.jsexpresshttp-headers

Implementing bind to invoke a function during an onClick Event

Here is a code snippet I have been working on that demonstrates how to handle click events on hyperlinks. The code features two hyperlinks named A and B. When hyperlink A is clicked, the console will log 'You selected A', and when B is clicked, ...

javascriptreactjs

Incorporate form checkboxes with the image's title preceding them within every individual div

Is there a way to dynamically add a form checkbox to each of these divs with incrementing id's? My current setup is as follows: <div class="img-wrap"> <img title="1" src="img.jpg" /> </div> <div class="img-wrap"> < ...

javascriptjqueryhtmlforms

Guide to verifying Regular Expressions for text fields in JSP with JavaScript

Need help with validating the firstname using regex. The javascript code provided generates an error if the value length is 0, however, even after entering a correct firstname format based on the regex, it still shows 'First name invalid'. I susp ...

javascriptregexjsp

I have a `null` input value. Is there a way to compute this value in relation to a date

When the input is null, what can be done to calculate the value with date? https://i.stack.imgur.com/DmFsJ.png /* // ======================================================== * * * * * How To Calculate Input Value With Date When Input Is Null * * */ // ...

javascripthtmldate

Next.js app experiencing issues with Chakra UI not transitioning to dark mode

After attempting to incorporate Chakra UI into my Next.js application, I carefully followed every step outlined in their documentation: Despite setting the initialColorMode to "dark" for the ColorModeScript prop, it seems that the dark mode is not being a ...

javascriptreactjsnext.jschakra-ui

Discover the process of executing two functions simultaneously by interacting with a VRbutton through React360

As a newcomer to React, I am still learning the ropes and facing a challenge with using two functions simultaneously with Vrbutton (or any button) on onClick event. I have attempted various methods (referenced in my commented out code below) to make multi ...

javascriptreactjsreact-360