Transforming Lines with ThreeJS

I have created a rotating cube in ThreeJS that is made up of multiple particles. These particles belong to an array called 'particles' and are part of a group named 'group' which rotates around the origin on all axes (x, y, z). My goal is to dynamically connect two particles with a line. The current code I am using for this task is shown below:

var geometry2 = new THREE.Geometry();

linemat = new THREE.LineBasicMaterial({
    color: 0xffffff
});
geometry2.vertices.push(particles[4].position);
geometry2.vertices.push(particles[1000].position);  
geometry2.update;           
line = new THREE.Line(geometry2, linemat);
scene.add(line);          

This code snippet exists within my render loop. However, instead of linking the two particles with a line that updates as the cube rotates, it only draws a static line connecting where the particles used to be located. The line does not move along with the particles or update accordingly.

If anyone has any advice or solutions on how to achieve this dynamic particle connection, I would greatly appreciate it! Thank you

Answer №1

To enhance your current strategy, I suggest initializing the line outside of the render loop and then modifying its geometry within the loop. Keep in mind that when you update a Geometry's vertices, you must set the verticesNeedUpdate flag to true (version 61). In the code snippet provided, there is a line geometry2.update that doesn't serve any purpose as it does not invoke a method or modify a value, and the property update does not exist.

Another approach is to simply add the line to the rotating group so it will rotate along with it seamlessly.

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

Having trouble installing handlebars on Node using the command line

I've been attempting to integrate handlebars with node using the instructions from my book. The guide advised me to install handlebars like so: npm install --save express3-handlebar. However, this resulted in an error npm WARN deprecated express3-han ...

Apply a specific class to a list once scrolling beyond a certain offset of a group of division elements

I seem to be getting close, but I'm struggling to finalize this task. Essentially, as you scroll down to each image, the div containing that image's offset from the top of the window (with a buffer of -500) should add a .selected class to the cor ...

Pressing the Add button will create a brand new Textarea

Is it possible for the "Add" button to create a new textarea in the form? I've been searching all day but haven't found any logic to make the "Add" function that generates a new textarea. h1,h2,h3,h4,h5,p,table {font-family: Calibri;} .content ...

"Using Js-ctypes to interface with a third-party DLL that returns a string

I have encountered an issue while working with a DLL using js-ctypes, which is written in C. After calling the method that returns a string and trying to access the content of the pointer, Firefox crashes! The following code snippet works perfectly: Fun ...

Users are encountering timeout issues when attempting to connect to the Azure Postgres flexible database through the node.js server deployed on the Azure App Service

My node.js express server is deployed on Azure App Services, connecting to an Azure flexible Postgresql database. Strangely, everything works fine when running the server locally, but once it's deployed to Azure App Service, all requests time out: htt ...

"Unlocking the power of AngularJS translate: A step-by-step

I'm seeking answers to two questions. 1) How can I utilize angularjs translate with ng-repeat? Although my Json file works fine, the text does not display when using ng-repeat. Here is a snippet from my json: "rules":{ "points":[ {"t ...

Show one marker on the map from a GeoJson file

On my webpage, I have a Google map that displays all markers using the map.data.loadGeoJson method. Each marker is linked to its respective details page with the following code: map.data.addListener('click', function(event) { var id = even ...

After using driver.execute_script, the variable results in nil

Attempting to retrieve a lengthy string of URLs separated by commas is proving challenging. The code functions correctly in the console, but when running the script, the ruby variable urls_list remains nil. require 'rubygems' require 'selen ...

What is the best way to set the input type file to null when deleting an image in Vue?

My form allows users to upload an image, and everything was functioning properly until I encountered an issue. When I remove an image and try to upload the same image again, the @change function is not triggered. I am unable to reset the file value to null ...

Iterating through a legitimate JSON object and storing each data value in a separate variable

I am currently utilizing jQuery. To further elaborate on my previous question, I have executed an Ajax request using the jQuery $.ajax function with a PHP script. The PHP script returned a JSON object which was validated when tested with link text. I am p ...

Extract the color of an individual character

There is a code snippet in JavaScript using p5.js that functions as a video filter: const density = ' .:░▒▓█' //const density = ' .tiITesgESG' //let geist; let video let asciiDiv let playing = false let ...

Pull data from one array of objects using the id from another array to display in a list using AngularJS ng-repeat

After retrieving a list of options, I make an API call to validate each option. The goal is to display whether each option is valid or not. My starting array looks like: $scope.preValidationArray = [ { id: 1, description: 'Item 1' }, { id: 2 ...

Automating the linking of tsd definitions with bower and npm: A step-by-step guide

Currently, I am in the process of transitioning an existing project to TypeScript which includes numerous bower and npm dependencies (bower.json and package.json). As mentioned on the tsd github page, TSD facilitates the discovery and linking of defini ...

"There seems to be an issue with the KeyListener function in

The error I'm encountering is: index.html:12 Uncaught TypeError: Cannot read property 'addEventListener' of null I'm unsure about what went wrong. The intention behind the code was to store the result of the selected radio button into a ...

Using the fieldset element in AngularJS Material causes disruptions in my flex layout

My current issue can be illustrated through two code examples: The first example functions properly when the fieldset is not included. In the second example, including the fieldset causes the layout to extend beyond the window when there is long text (in ...

Mounted class not initiating transition in Vue.js

After attempting to apply a class to an element in the mounted lifecycle, I noticed that the transition effect was not taking place. The element would immediately display in its final state: However, when I used setTimeout to delay the class change, the t ...

What is the best way to extract a CSS rule using PHP?

Below is an example of the stylesheet I am currently using: #thing { display: none; } I am looking to retrieve the value of the 'display' property using PHP instead of Javascript. While I know how to do this with Javascript, I would prefer to u ...

Accessing feedback from Reddit's API

After writing some code to search Reddit's API with a specific query, I now want it to display comments as well. Inside my $.getJSON statement that retrieves each title/post based on the search query, I have the following nested code block. The goal i ...

What is the best method for choosing all options in a select box in IE without experiencing the scrolling effect?

Here's the scenario: I have a select element with multiple options and a checkbox that allows users to select/deselect all options. The issue arises in Internet Explorer, where selecting all options using code causes the entire select box to scroll un ...

The function documents.getElementsById() is hindering the effectiveness of Javascript validation

I'm facing an issue with this code. If I uncomment the specific line, the form bypasses validation and goes directly to the linked page in the action attribute. However, if I keep it commented out, the validation runs smoothly, and the alert box displ ...