Exploring the dynamism of ThreeJS with Sphere and Line movement

Question

Exploring the dynamism of ThreeJS with Sphere and Line movement

Update: Please Help!

Looking for assistance with animating lines and spheres in a mesh simultaneously.

I've created a mesh with lines and spheres, and now I want to animate them all together to create a smooth, pulsating movement.

However, in my current attempt, only one of the lines and spheres is moving as desired, while the rest remain still or are out of place.

Any suggestions on how to fix this?

// Your code goes here

Update: I've managed to push the sphere data into arrays so all spheres move correctly, but I'm having trouble with the lines. I've also created an array for the lines, but only one line is moving as expected. Any advice on how to solve this issue would be greatly appreciated!

// Your updated code goes here

javascript for-loop three.js geometry

Answer 1

Answer №1

Ah, I finally figured it out! I realized that I needed to place the "update function" inside the loop.

//              _                 _   _
//   __ _ _ __ (_)_ __ ___   __ _| |_(_) ___  _ __
//  / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \
// | (_| | | | | | | | | | | (_| | |_| | (_) | | | |
//  \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|

function animations() {
    var time = Date.now() * 0.001;
    var speed = 0.55;
    var behave = speed * Math.cos(time);

    for (var i = 0; i < selectSpheres.length; i++) {
        sphere = selectSpheres[i];
        sphere.position.x =  selectxPosSpheres[i]/radiusControl + behave;
        sphere.position.y = (selectyPosSpheres[i]/radiusControl + offsetY) + behave;

        line = selectLines[i]; //assign the value "i" of the array to the variable "line"
        console.log("animations", line); //checking if all lines are being accessed by the loop
        line.vertices[1].x = sphere.position.x; //update the x coordinate of the second vector of line "i" to match the sphere
        console.log("lineX", line.vertices[1].x)
        console.log("sphereX", sphere.position.x)
        line.vertices[1].y = sphere.position.y; //update the y coordinate of the second vector of line "i" to match the sphere
        //Why is only one line being accessed by the loop even though the console shows it's accessing all of them?
        line.verticesNeedUpdate = true;
        sphereGeometry.normalsNeedUpdate = true;
    };
}

On a side note: Documentation for ThreeJS is quite lacking.

Answer 2

Ah, I finally figured it out! I realized that I needed to place the "update function" inside the loop.

//              _                 _   _
//   __ _ _ __ (_)_ __ ___   __ _| |_(_) ___  _ __
//  / _` | '_ \| | '_ ` _ \ / _` | __| |/ _ \| '_ \
// | (_| | | | | | | | | | | (_| | |_| | (_) | | | |
//  \__,_|_| |_|_|_| |_| |_|\__,_|\__|_|\___/|_| |_|

function animations() {
    var time = Date.now() * 0.001;
    var speed = 0.55;
    var behave = speed * Math.cos(time);

    for (var i = 0; i < selectSpheres.length; i++) {
        sphere = selectSpheres[i];
        sphere.position.x =  selectxPosSpheres[i]/radiusControl + behave;
        sphere.position.y = (selectyPosSpheres[i]/radiusControl + offsetY) + behave;

        line = selectLines[i]; //assign the value "i" of the array to the variable "line"
        console.log("animations", line); //checking if all lines are being accessed by the loop
        line.vertices[1].x = sphere.position.x; //update the x coordinate of the second vector of line "i" to match the sphere
        console.log("lineX", line.vertices[1].x)
        console.log("sphereX", sphere.position.x)
        line.vertices[1].y = sphere.position.y; //update the y coordinate of the second vector of line "i" to match the sphere
        //Why is only one line being accessed by the loop even though the console shows it's accessing all of them?
        line.verticesNeedUpdate = true;
        sphereGeometry.normalsNeedUpdate = true;
    };
}

On a side note: Documentation for ThreeJS is quite lacking.

Exploring the dynamism of ThreeJS with Sphere and Line movement

Answer №1

Similar questions

Trouble with toggling div visibility using jQuery and AJAX

Display different images based on user selection in vue.js

JS: Initiating a new keypress operation

The issue with Lodash isEqual arises from the constructor specified by Angular

Is there a way to position one DIV behind another?

"Enhancing Error Handling in Express with Node.js Middleware for Parsing

Three.js - Controlling Visibility of Text in troika-three-text with Clipping Planes

How can you convert a for loop using a recursive lag into a custom function?

Error in SO Embed Snippet Fiddle due to Bootstrap 4 JS Issue

As I attempt to connect with the bitcoin average server, I encounter a 403 status code error in the communication

Is there a way to integrate jQuery and Javascript into a Firefox add-on?

Struggling to update the color of my SpeedDial component in MUI

What is the best way to refresh or reset a component in VueJs: reloading it or destroying it and loading again?

Incorporating a parameter into a <div> only when the parameter holds a value

When an array is prototyped as a member of a JavaScript object, it becomes a shared property among all instances

Experiencing memory issues with small programs in Node on macOS?

Creating a personalized ESLint rule specifically for Redux reducers

Can you explain the distinction between incorporating and excluding the keyword "await" in the following code snippets?

Ways to adjust the width of the Dialog box in Jquery UI to 60% of the window size

Tips for implementing Vue in production mode with vue.esm-bundler.js