Adjust the attributes of THREE.tubeGeometry

Within my Three.js scene, I currently have a tube object that I need to dynamically adjust the start and end points of. I believe this approach is more efficient than creating a new tube with updated points and removing the old one. If this is not the case, please provide me with some insight.

Here is my current method of achieving this: http://jsfiddle.net/95t964o0/22/. Simply click the button to see it in action.

I have attempted to set all attributes related to this as true:

grid.dynamic = true;
grid.needsUpdate = true;
grid.geometry.verticesNeedUpdate = true;

Any assistance would be greatly appreciated!

javascriptdynamicthree.js

Answer №1

What on earth is this?

grid.geometry.parameters.path.points[0]= new THREE.Vector3(1000,100,100);

This seems unfamiliar to me. Do grids typically have parameters like this, or am I mistaken? To adjust the path position, you can modify it in the following way:

var path = new THREE.SplineCurve3([
    new THREE.Vector3(0,0,0) ,
    new THREE.Vector3(200,150,10) 
]);

var geometry = new THREE.TubeGeometry(path, 1, 0.11, 8);
grid.geometry = geometry;

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

What is the best way to retrieve data from Firebase and then navigate to a different page?

I am facing an issue with my app where I have a function that retrieves data from Firebase. However, after the completion of this Firebase function, I need to redirect it to another page. The problem is that when I press the button, the redirection happe ...

javascriptjqueryfirebase

What causes the 'then' method of my angular service to return a resolved promise instead of the expected value?

I am perplexed as to why the "result" in this code snippet is a resolved promise instead of the actual value: searchService.getLink(vm.queryObject).then(function (result) { console.log(result); }); The implementation for the getLink() function is pro ...

javascriptangularjsangular-promise

Choosing a value from a dropdown automatically based on the selection of a specific value from another dropdown

Currently, I am working on a project that involves selecting a value from a dropdown menu based on the selection from another dropdown menu. var gender1 = document.querySelector("#gender1"); var gender2 = document.querySelector("#gender2"); gender1.add ...

javascripthtml

Error: Trying to access the length property of an undefined or null reference in JSON formatted data fetched through Ajax

I am attempting to populate a jQuery DataTables with JSON data retrieved from a Web API ajax call, but encountering the following error: An unhandled exception occurred at line 38, column 314 in 0x800a138f - JavaScript runtime error: Unable to get proper ...

javascriptjqueryjsonajaxdatatables

Universal - Permissible data types for function and constructor arguments

In many statically typed languages, it is common to specify a single type for a function or constructor parameter. For example: function greet(name: string) { ... } greet("Alice") // works greet(42) // error TypeScript is an extension of JavaScri ...

javascriptc#typescriptkotlinlanguage-agnostic

Typescript declaration specifies the return type of function properties

I am currently working on fixing the Typescript declaration for youtube-dl-exec. This library has a default export that is a function with properties. Essentially, the default export returns a promise, but alternatively, you can use the exec() method which ...

javascripttypescripttypescript-declarations

vuex: The decision between using $store.commit and directly calling the function

Recently, I discovered an interesting technique where store mutation functions can be passed into HTML events. Here's an example: //In the template <input name="the_field" :value="the_field" @input="updateField"/> // In the component methods ...

javascriptvue.jsvuex

Is there a way to access the value of a variable within a loop inside a function and store it in a global variable?

I am struggling to retrieve the value of a variable after it has passed through a loop. I attempted to make it a global variable, but its value remains unchanged. Is there any way to achieve this? Below is my code snippet where I am attempting to access t ...

htmlfunctionvariablesjavascript

Tips for handling promise coverage within functions during unit testing with Jest

How can I ensure coverage for the resolve and reject functions of a promise within a function while conducting unit tests using Jest? You can refer to the code snippet below. Service.js export const userLogin = data => { return AjaxService.post( ...

javascriptreactjsunit-testingjestjscode-coverage

webpack: the necessity of running TSC before resolving modules manually

Below is my complete webpack.config.js file for reference. If I delete all the *.js files in the app directory, webpack throws the following error: ERROR in ../main.ts Module not found: Error: Can't resolve './app/app.module' in 'C ...

javascriptangularwebpack

Changing the font family for a single element in Next.js

One unique aspect of my project is its global font, however there is one element that randomly pulls font families from a hosted URL. For example: https://*****.com/file/fonts/Parnian.ttf My page operates as a client-side rendered application (CSR). So, ...

javascripttypescriptnext.js

When attempting to retrieve data from an API in Angular 8, I encountered difficulties in dynamically creating a formArray within a formArray

I am struggling to dynamically create form controls based on the data received, specifically for fields like task and template name. Your assistance is greatly appreciated. { "items": [ { "templatename": "Defult" ...

javascriptangularangular8

Generate pre-set components using fundamental building blocks

Can I predefine some props for components? In my Vuetify example, let's say I want to customize the v-btn component with specific props. This custom implementation would act as a child component while still providing all the functionalities of the par ...

javascriptvue.jsvuetify.js

Is there a way to iterate through indexed variables in javascript?

After receiving an array of data from a JQuery .ajax function, I noticed that the fields in the array are named and numbered like part1, part2, part3, etc. I attempted to loop through this data using the code below, but unfortunately, it resulted in NaN: ...

javascriptjqueryhtmlajax

Tips for accessing the value and text of an Angular Material mat-select through the use of *ngFor

When using a dropdown menu, I want to retrieve both the value and text of the selected option. View dropdown image Underneath the dropdown menu, I aim to display values in the format of "options: 'value' - 'selected option'". compone ...

javascriptangulartypescriptangular12

Using a JavaScript script in my HTML alongside Vue.js is not possible

Hello there! I recently created a Node.js server and now I'm trying to display an HTML file that contains a Vue script which loads data using another method written in a separate JS file. However, when I attempt to load my HTML file in the browser, ...

javascripthtmlnode.jsvue.js

Toggle the input box by clicking the button

How do I show or hide the input box (blue square) when I click the search button (red square)? Link Image I attempted to create the transition in CSS and also experimented with JavaScript, but the JavaScript part confused me. Here is what I tried: $(" ...

javascripthtmlcsstransition

Create a specific website link for searching on YouTube

Is there a way to generate a YouTube URL using JavaScript or PHP that searches for videos on a specific user account and displays the best title match at the top of the search results? This is the code I am currently using: <!DOCTYPE html> <head ...

javascriptyoutube

Executing Lambda functions on DynamoDB has no effect

Below is the code snippet for a Lambda function: console.log('Loading function'); var aws = require('aws-sdk'); var ddb = new aws.DynamoDB(); function retrieveUser(userid) { var query = ddb.getItem({ TableName: "Users", ...

javascriptnode.jscallbackamazon-dynamodbaws-lambda

Sauce Labs encountering issues when running JavaScript code

Currently, I am using Selenium WebdriverJs along with Mocha to conduct tests on Sauce Labs via Travis CI. After isolating the issue without any project dependencies, I am seeking help. The interesting observation is that defining an additional object with ...

javascriptseleniumselenium-webdriverwebdriversaucelabs