What causes the while loop in a threejs render function to not refresh each frame?

I'm struggling with handling an array of 8 cubes, each only 1 pixel tall. When a button is pressed, I want them to smoothly animate to a new height using a while loop. Here's my current implementation:

if (buttonPressed) {
    console.log('button pressed')
    for (i in cubeArray) {
        while (Math.abs(cubeArray[i].size.y - targetSizes[i].value) > 5) {
            console.log(cubeArray[3].size.y)
            cubeArray[i].size.y += .3
        }
    }
    buttonPressed = false;
}

However, the console repeatedly shows that cubeArray[3] size remains at 1 pixel for 1215 iterations before suddenly jumping to the target height. Is it possible that the while loop is not functioning correctly within the render() function?

Answer №1

The issue lies in the fact that the render function is being called repeatedly for each frame that requires rendering. Therefore, all modifications are made within a single frame without allowing Three.js to update the display.

To address this, it is essential to adjust the height by 0.3 only once in each render call, instead of placing it within a loop.

Consider implementing the following approach:

function render() {

    if (buttonClicked) {
        new_height = 2;
        buttonClicked = false;
    }

    if (meshArray[i].scale.y < new_height) {
        meshArray[i].scale.y += 0.3;
    }

}

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

Adonis 5 and Vue encountering the error message 'E_ROUTE_NOT_FOUND'

I am currently working on a project using Adonis v5 as the backend and Vue 2 as the frontend. I have encountered an issue where, after building the Vue frontend into the public Adonis folder, accessing a specific route directly in the browser results in an ...

`Scrolling through a horizontal menu with no scrollbar present`

Is there a way to create a horizontal menu that can scroll left or right without the scrollbar? I'm looking for a solution like adding on-screen arrow buttons or implementing mouseover functionality. What would be the best approach? div.scrollmenu ...

Learn how to display only certain elements when triggered by the click of another

I have developed a tab system where each tab contains a unique set of questions and answers. The structure of the tabs is exactly as I envisioned, but I am facing challenges with toggling the display of answers when their respective questions are clicked. ...

Animating Divs with jQuery to Expand their Size

I am currently designing a services page for my portfolio website. The layout consists of three columns, with the central column containing a large box and the left and right columns each containing three smaller boxes. These smaller boxes function as clic ...

Change the structure of the JavaScript object into a new format

I humbly ask for forgiveness as I am struggling with figuring out how to accomplish this task. It seems like we need to utilize a map function or something similar, but I am having difficulty grasping it. Below is the object 'data' that I am wor ...

This is the command that includes the line "test": "tsc && concurrently "karma start karma.conf.js""

When running npm run test with the line "test": "tsc && concurrently \"karma start karma.conf.js\"" in my package.json, I encounter the error message 'Error: no test specified'. Can someone guide me on how to resolve this issue? ...

Uploading images using the Drag and Drop feature in HTML

Hello, I'm having an issue with the drag and drop functionality. I want to expand the size of the input to cover the entire parent div, but for some reason, the input is appearing below the drag and drop div. Can anyone assist me with this? https://i. ...

The presence of an unauthorized token within the meteor/node module has been detected, specifically related

While following g00glen00b's tutorial on meteor/twitter integration (), I encountered a persistent error. Any assistance or clues would be greatly appreciated. Steps I've Taken Uninstall/reinstall npm Uninstall/reinstall twitter package Uninst ...

Struggling to update the state of an array using ReactJS and unsure of how to iterate through it

Currently, I am in the process of developing a movie voting application for me and my friends using React. I have made significant progress but I am facing issues with setting or updating the state of the 'rating' object. The structure of the ar ...

Sending arrays in JSON format using Node.js Express (res.json)

I have a code snippet like this: app.get('/orders/:pizzeriaID/:status', async (req, res) => { try { const requestedOrderByPizzeriaID = req.params['pizzeriaID']; const requestedOrderByStatus = req.params['status']; ...

Angular: Disabling a button based on an empty datepicker selection

Can anyone help me figure out how to disable a button when the datepicker value is empty? I've tried using ngIf to check if the datepicker is empty and then disable the button, but it's not working. My goal is to make the button unclickable if th ...

Steps to fix the Error: connect EISCONN ::1:5555 - Local (:ffff.127.0.0.1:5555)

Currently, I am in the process of developing an Electron app where I need to establish a connection with a TCP port on my local machine. However, upon starting the application, I encounter the following error message: "A JavaScript error occurred in the ma ...

AngularJS - sorting JSON data based on key values

I am working with a JSON data set that I need to filter based on the selected option value. The select input is bound to an ng-model, but for some reason, the filter isn't functioning properly. Can anyone spot what mistake I might be making? This is ...

Enhance your browsing experience by inputting valuable information into the

I am looking to enhance a text box by adding values. The text box already has a default value of 10, and I want to create a button that will add new text boxes with a limit of 4. My goal is to continuously add values from text box 1 to text box 4. For exa ...

How can you leverage Symfony to iterate through a JSON array efficiently?

After selecting a user, I am attempting to display a list of contracts. To achieve this, I have written the following query: /** * @param $firstname * @param $lastname * @return mixed * @throws DBALException */ public function getListPerUser($firs ...

Error with Cross-Origin Resource Sharing (CORS) upon inserting a parameter within an Express application

I'm completely stumped as to why this isn't functioning properly. My express app is deployed on Heroku and here's the code: var urlMetadata = require('url-metadata') var express = require('express') var cors = require( ...

When attempting to redirect to a different page using setTimeout, the loading process appears to continue indefinitely

Currently, I am utilizing the following script: setTimeout(function(){ window.location.href = '/MyPage'; }, 5000); While this script successfully redirects me to /MyPage, it continuously reloads every 5 seconds. Is there a way to r ...

Chrome reports a Javascript error: indicating that it is not recognizing the function

When working with a js file and html, I encountered an issue where one function works fine but another prompts an error in Chrome: Uncaught TypeError: specification_existing is not a function I'm puzzled as to why one function works while the othe ...

The ng-change functionality of Angular radio buttons only functions correctly the first time it

I am struggling to comprehend why the angular ng-change function is only being called on the first click. Take a look at this example: http://jsfiddle.net/ZPcSe/5/ The function in the provided example is triggered every time the radio selection is change ...

Testing a React component that uses useParams: A step-by-step guide

I've been working on creating a BBS App using TypeScript, React, React Router, and React Testing Library. However, I've encountered an issue where a component utilizing useParams is not passing a test. Interestingly, it seems to be working correc ...