"Endless loop error in Three.js causing a system crash

I'm currently in the process of developing a library that consists of 'letter' functions responsible for generating letters in vertex coordinates. The main objective here is to allow users to create words or sentences using an interactive PointsCloud feature. Unfortunately, utilizing TextGeometry hasn't been successful as it doesn't produce an adequate amount of vertex points.

The W() function is designed to incorporate all the corner points, which are inputted manually. On the other hand, the Draw() function works to 'draw' vertex points between the manually provided points.

However, I'm encountering an issue wherein my code is triggering a 'Potential out of Memory error' crash, and the exact cause remains unclear. Google Chrome is highlighting the 'for' loop within the Draw() function as the root of the problem.

            function W(int) {
            w = new THREE.Geometry();
            w.vertices.push(
                new THREE.Vector3(-1,1,0),
                new THREE.Vector3(-.5,-1,0),
                new THREE.Vector3(0,1,0),
                new THREE.Vector3(5,-1,0),
                new THREE.Vector3(1,1,0)
            )
            var temp = w;
            for(var u = 0; u < temp.vertices.length; u++){
                Draw(w,int,u,u++)
            }
            return w;
        }

        function Draw(P,intensity, v1, v2)
        {
            for (var i = 0; i < intensity; i++){
                var diffX = Math.abs(P.vertices[v1].x - P.vertices[v2].x);
                var spacingX = diffX/intensity;
                if(P.vertices[v1].x-P.vertices[v2].x > 0){spacingX=spacingX*-1}

                var diffY = Math.abs(P.vertices[v1].y - P.vertices[v2].y);
                var spacingY = diffY/intensity;
                if(P.vertices[v1].y-P.vertices[v2].y > 0){spacingY=spacingY*-1}

                var diffZ = Math.abs(P.vertices[v1].z - P.vertices[v2].z);
                var spacingZ = diffZ/intensity;
                if(P.vertices[v1].z-P.vertices[v2].z > 0){spacingZ=spacingZ*-1}

                p = new THREE.Vector3(
                    P.vertices[v1].x+spacingX*i,
                    P.vertices[v1].y+spacingY*i,
                    P.vertices[v1].z+spacingZ*i
                )
                P.vertices.push(p)
            }
        }

        pointCloud = new THREE.Points(W(10), pointMaterial)
        scene.add(pointCloud)

Answer №1

Issue Resolved:

The problem stemmed from my assignment of a variable to an array, which simply created a mirror of the array instead of generating a new unique array.

                var temp = w.vertices.length;
            for(var u = 0; u < temp-1; u++){
                Draw(w,int,u,u+1)
            }

The corrected code above replaces the previous code snippet

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

How to use the Enter key to submit a form in react.js with the help of "@material-ui/core/Button"

Here is the form I have created using the render method for user sign-in. <form onSubmit={this.handleSubmit}> <Avatar className={classes.avatar}> <LockOutlinedIcon /> </Avatar> <Typography component="h1" varia ...

Javascript: Iterating over a promise contained in an object

Currently, I am attempting to iterate through a return from an API that supposedly contains an object with a promise within it. You can find the API documentation here: https://github.com/sentanos/roblox-js/wiki/Main-Functions This is what my code looks ...

Importing a JavaScript file into another JavaScript file

var FS = require('fs'); var Path = require('path'); var Jsonfile = require('jsonfile'); var search = function () {}; search.prototype.projectContainerDirPath = null; /* * interface */ search.prototype.setPaths = function ...

Storing the subscription value retrieved from an API in a global variable

I am trying to find a way to make the data retrieved from an API accessible as a global variable in Typescript. I know that using subscribe() prevents this, so I'm looking for a workaround. Here is the API code: getResultCount(category:any):Obs ...

Unable to interpret AJAX request using PHP

I am trying to implement a feature where file contents can be deleted upon the click of a button. I have set up an ajax request that sends two variables - the filename and the name of the person who initiated the deletion process. The PHP function is runni ...

What sets apart an object within the scalajs scope from the exact same object within the js.global scope?

Attempting to create a basic example for rendering a cube using the THREEJS library. package three import org.scalajs.dom import scala.scalajs.js import scala.scalajs.js.Dynamic._ import scala.scalajs.js.annotation.JSName ... object ThreeExample { d ...

Utilizing a Variety of Animations with D3 (version 5)

I am currently working on an animation that involves fading out text in a list and collapsing the list when the heading is clicked. However, I am facing a few issues with the code provided in this example. d3.select('.panel-heading') .on(&apos ...

Double the fun: JavaScript array appears twice!

I am currently working on displaying the selected filters from checkboxes. Initially, I create an array containing the values selected from the checkboxes and then aim to add them to a string. Suppose I have two checkboxes labeled: label1 and label2, my a ...

Fire an event following the execution of $state.go()

Is there a way to activate an event once the state has been modified in ui.router? Specifically, I am utilizing the ionic framework alongside angularJS which incorporates angular-ui-router. Note: Below is the pseudo code I am hoping to implement. $state. ...

I am puzzled as to why the JSON response is visible in the browser but cannot be forwarded to the Ajax callback function, causing the page to remain on the initial request page

Currently, I am in the process of developing a web application that utilizes AJAX and servlet. My main focus right now is creating a functional login page for the application. Although the servlet successfully generates a response in JSON format, the issu ...

Expanding upon React Abstract Component using Typescript

Currently, I am in the process of building a library that contains presentations using React. To ensure consistency and structure, each presentation component needs to have specific attributes set. This led me to create a TypeScript file that can be extend ...

Utilizing v-for in Vue with TypeScript to generate multiple checkboxes

My goal was to capture the values of checkboxes and store them in an array using v-model. However, I encountered an issue where the first time I toggle a checkbox, it doesn't register. Only after checking a second box and hitting submit does the secon ...

What is the procedure for generating a mouse event for clicking a tab in Selenium WebDriver?

As I work with Selenium WebDriver and Java, there is a tab named PR Per Product. Under the PR Reports tab, there are multiple tabs. In the PR tab, I used: WebElement menuHoverLink = driver.findElement(By.id("ext-pr")); actions.moveToElement(menuHoverLink) ...

When using the `mongoose find()` method, the returned _id may not match the one stored in

Just had a bizarre experience while working with MongoDB recently. It appears that when I make a query in a collection for a document, instead of returning the _id stored in the database, it generates a new _id for the queried document. For instance: In ...

I am encountering an issue with the material ui dropdown component in my react native app where I am receiving a TypeError stating that it cannot read the property 'style' of undefined. This error is likely caused

Upon installation of Material UI and importing The Dropdown component, I encountered the error TypeError: Cannot read property 'style' of undefined, js engine: hermes. This is my code import React, { useEffect, useState } from "react"; import { ...

Arranging rows according to an array value containing column (PHP/MySQL/jQuery)

Initially, I am seeking a solution using PHP/MySQL and JS/jQuery, but I am unsure of the most effective approach for handling larger datasets (40,000+). Consider a scenario where you have a database and wish to enable sorting of a table based on a column ...

Removing the gridlines in a Linechart using Apexcharts

I am experiencing issues with the grid and Nodata options on my Apexchart line chart. noData: { text: none , align: 'center', verticalAlign: 'middle', offsetX: 0, offsetY: 0, style: { color: undefined, fontSize: &apo ...

Revise the list on the page containing MEANJS components

Utilizing MEAN JS, I am attempting to make edits to the list items on the page, but an error keeps appearing. I have initialized the data using ng-init="find()" for the list and ng-init="findOne()" for individual data. Error: [$resource:badcfg] Error in r ...

Implementing code to scroll and play multiple videos simultaneously using JavaScript and jQuery

This solution currently only works for one video, but it needs to be able to handle multiple videos (TWO OR MORE) <html> <head> <script src="https://code.jquery.com/jquery-1.8.0.min.js" integrity="sha256-jFdOCgY5bfpwZLi ...

Retrieving data with JQuery when encountering an XHR error

When I send a jQuery AJAX request and receive a successful response, I am able to retrieve my JSON data. However, if the response code is anything other than 200, I am unable to access the data in the jQuery callback function. This data is crucial as it co ...