Animate the tubular geometric pathway by continuously updating its values

When creating a TubeGeometry, I supplied a SplineCurve3 / CatmullRomCurve3 path as a parameter.

My goal is to update the position of each point on the path using

geometry.parameters.path.points[1].y += 0.01;
within the requestAnimationFrame loop. Even though the values update in the console, the points themselves don't move. How can I achieve this?

Just to clarify, I'm not looking to modify the 'vertices' but rather the individual points that define the shape of the tube rendering.

By the way, here's the WebGL initialization and animation code for reference:


// JavaScript code snippet for initializing and animating a WebGL scene
// (Code is too long to display here)

Answer №1

After struggling to make it work using TubeGeometry, I switched to TubeBufferGeometry and found success. Thankfully, the transition was smooth as both methods utilize the curve path to define mesh vertices. Feel free to experiment with TubeGeometry if you prefer.

The key issue lies in understanding that Tube(Buffer)Geometry essentially CONSTRUCTS geometry rather than BEING the actual geometry. This means that updating the path does not automatically trigger a rebuild of the geometry. Instead, when changing the path, the Tube(Buffer)Geometry must be recreated from scratch.

In the code snippet below, I simply substituted TubeBufferGeometry for TubeGeometry, modified geometry.verticesNeedUpdated to geometry.needsUpdate (as per how BufferGeometry manages updates), and added the line necessary to reconstruct the tube:

geometry.copy(new THREE.TubeBufferGeometry(geometry.parameters.path, 1000, 0.2, 8, false));

... // The rest of the content remains unchanged.

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

Using Vuejs to display errors with alerts

Is there a way to display errors using alerts in bootstrap when working with vuejs? This is an example of the code: <div v-if="this.getError"> <div v-for="(_errors, key) in this.getError"> <p>{{key.repla ...

Incorporating External JavaScript and CSS specifically for a single component

In my Angular 4 application, I have a specific component that requires the use of a js and css file. While most guidelines suggest placing these files in the Index.html file, I prefer to only load them when this particular component is accessed, not on e ...

Designing Checkboxes and Radio Buttons

I am seeking a way to customize the appearance of checked and unchecked checkboxes using images without modifying the HTML structure. I would prefer not to add labels, classes, or IDs to the elements. The provided example only works in Webkit browsers, s ...

Is there a more efficient approach to streamline Javascript code similar to the chaining method used in JQuery?

When working with jQuery, it's possible to streamline the code by running multiple methods in a single statement: $("#p1").css("color", "red").html("Hello world!").attr("class","democlass"); But how can this be accomplished in Javascript? document. ...

Adding a Bearer Token to a GET request using location.href: A step-by-step guide

At the moment, I have all my ajax requests sending an Authentication token. However, I have created a service for exporting to excel and since ajax doesn't support that, I am using location.href for the get request. Is there a way to include the token ...

What is the role of the app.use method in ExpressJS in handling URL redirects that end with a "/"?

This script automatically redirects URLs that end with a "/" to the same URL without it. For example, if a user visits http://localhost:3000/about/, they will be directed to http://localhost:3000/about. This ensures that image URLs and other HTML file refe ...

How can I dynamically change the orderBy parameter based on conditions in an Angular application?

I need to dynamically change the orderBy parameter in a table row based on the result of a method. Here is an example of my current tr setup - <tr class="pl" ng-repeat="thing in things | orderBy:'oldId':reverse" ng-class="{'row-error&apo ...

You do not have the authorization to access this content

I have been working on a Laravel web application to upload images into a data table and allow users to download the uploaded image on click. Initially, everything was working fine until I made changes in the code from return '{!! Html::link('ima ...

How can I change a PHP for loop to Javascript?

Can the following code be converted to JavaScript? for (let lift of liftDetails) { document.write('<option>'+ lift["LiftMakes"] +'</option>'); } ...

Perform a function in jQuery only after the previous one has finished running in a cascading manner

Looking for guidance from an expert on how to accomplish this task. I have HTML code for a multiple choice question with options A to E: <div id="correct-answer-XXXXX" style="display:none;"></div> <div id="wrong-answer-XXXXX" style="display ...

What is the best way to showcase all menu and submenu items in separate dropdown lists?

Having trouble with my code, it's not functioning properly. I can't pinpoint the error. The menu displays correctly but the submenu isn't showing up under specific menus. Here is the code snippet: ##Table: menus## id name ...

Is there a live password verification tool available?

Currently, I am conducting some initial research for my school's IT department as a student employee. The students at our institution are required to change their passwords every six months, but many of them struggle with the various password regulati ...

The Tab component's onClick event is nonfunctional

I am currently utilizing the Tab feature from the material-ui library in my React project. As I try to come up with a workaround for an issue I am facing, I notice that my onClick event listener is not being triggered. An example of one of the tabs: < ...

What is the best way to automatically create a list of file names that can be used in a Grunt task?

I am currently utilizing load-grunt-config and grunt-prompt for my project development. I am working on an init task that involves moving php templates between folders. At the moment, I have hardcoded the template filenames, but I would prefer if Grunt co ...

Angular directive specifically meant for the parent element

I am working on a directive that I need to apply to a specific div element without affecting its child elements. The goal is to make the main div draggable, so that when it moves, its child divs move along with it. However, I do not want the child divs to ...

Encountering issues with proper function of history.listen within React Router

I am struggling to get my function to work every time React detects a change in the URL. The history.listen method is not triggering (the console.log statement is not showing up). I have read that this issue may be related to using BrowserRouter, but when ...

NodeJS - The function app.listen is not defined in this context

I've come across a similar question before, but the answers provided didn't help me resolve my issue. The error message I'm getting is "TypeError: app.listen is not a function"; Here's my full code below. Thank you in advance for your ...

Verify if the program is operating on a server or locally

My current project involves a website with a game client and a server that communicate via sockets. The issue I'm facing is how to set the socket url depending on whether the code is running on the server or my local PC. During testing and debugging, ...

JavaScript callbacks using customized parameters

I am currently grappling with the challenge of incorporating an asynchronous callback in node without prior knowledge of the potential arguments. To provide more clarity, let me outline the synchronous version of my objective. function isAuthorized(userI ...

Retrieving JSON data through HttpClient in Angular 7

I am attempting to retrieve information from this specific URL. The data obtained from this URL is in JSON format. This particular file is named data.services.ts: import { Injectable } from '@angular/core'; import { HttpClient } from '@an ...