Whenever I execute my code, the browser consistently crashes

Question

Whenever I execute my code, the browser consistently crashes

Here is the code I have been working on:

var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg"];
var objects = [];
var geometry;

while(objects.length < images.length) {

        var imagesIndex = 0;
        var object = [

            texture1 = textureLoader.load( "data/"+ images[imagesIndex] ),
            material1 = new THREE.MeshBasicMaterial( { map: texture1 } ),
            objectMesh = new THREE.Mesh( geometry, material1 ),
            location3d = new THREE.Vector3( Math.random()* 500-250, Math.random()* 500-250, Math.random()* 500+120 )

        ];  

        var overlapping = false;
        for (var j = 0; j < objects.length; j++) {
            var projectCubeLoc = objects[j][0][3];

The line

var otherCubesLoc = projectCubeLoc[j];

leads to an error.

            var otherCubesLoc = projectCubeLoc[j];
            var distance = projectCubeLoc.distanceTo( otherCubesLoc );
            console.log(distance);

            if (distance < 150) {
                overlapping = true;
                break;
            };
        };

I moved the statement outside of the for-loop because if no overlap occurs, at least one object will be added to the array.

        if (!overlapping) {
            objects.push(object);
            imagesIndex++;
        };
     };

However, now I am encountering a TypeError: Cannot read property '0' of undefined.

When running this code in the browser, it crashes without displaying any error messages. The browser just quits unexpectedly. I suspect there may be an issue with the while loop, but I can't pinpoint the exact problem.

Any assistance or suggestions would be highly appreciated!

If you require more code snippets or would like to see a JSFiddle example, please let me know :)

javascript while-loop three.js crash

Answer 1

Answer №1

The objects array is not being assigned any values.

Your for loop never reaches the objects.push function call in your code.

Since you initialize the array as empty, when it reaches the for loop with j == 0 and objects.length == 0, the loop does not execute.

Answer 2

The objects array is not being assigned any values.

Your for loop never reaches the objects.push function call in your code.

Since you initialize the array as empty, when it reaches the for loop with j == 0 and objects.length == 0, the loop does not execute.

Answer 3

Answer №2

Unity3d may be the platform you're utilizing, as I encountered a similar issue while attempting to run C# code. Your problem lies in declaring a variable within a loop - upon each update, the variable is continually reset to zero, resulting in a mesh.

Answer 4

Unity3d may be the platform you're utilizing, as I encountered a similar issue while attempting to run C# code. Your problem lies in declaring a variable within a loop - upon each update, the variable is continually reset to zero, resulting in a mesh.

Answer 5

Answer №3

When the loop
```
while(objects.length < images.length)
```
begins, there is an empty array which passes initially because the length of objects is less than that of the images array.
As you progress, a new variable object is declared with the intention of being added to the objects array. However, the for loop
```
for (var j = 0; j < objects.length; j++)
```
starts using the length of objects, which has not been initialized yet in the function. Therefore, it will never enter the loop.
The statement
```
if (!overlapping) {objects.push(object); imagesIndex++;}
```
cannot be reached because the loop does not start.

No values are pushed into the objects array, leading back to the initial point and causing an infinite loop in your function, ultimately crashing the browser.

Description: As the function begins execution, the length of 'objects' is 0 which is less than the image array's length, creating a valid condition. However, during the inner loop execution, the length of 'objects' is still zero as no value has been added to the object. This results in the for loop not executing as 'objects.length' remains 0. The cycle continues infinitely since no values were added to 'objects' before the loop. I hope this clarifies any confusion.

Answer 6

When the loop
```
while(objects.length < images.length)
```
begins, there is an empty array which passes initially because the length of objects is less than that of the images array.
As you progress, a new variable object is declared with the intention of being added to the objects array. However, the for loop
```
for (var j = 0; j < objects.length; j++)
```
starts using the length of objects, which has not been initialized yet in the function. Therefore, it will never enter the loop.
The statement
```
if (!overlapping) {objects.push(object); imagesIndex++;}
```
cannot be reached because the loop does not start.

No values are pushed into the objects array, leading back to the initial point and causing an infinite loop in your function, ultimately crashing the browser.

Description: As the function begins execution, the length of 'objects' is 0 which is less than the image array's length, creating a valid condition. However, during the inner loop execution, the length of 'objects' is still zero as no value has been added to the object. This results in the for loop not executing as 'objects.length' remains 0. The cycle continues infinitely since no values were added to 'objects' before the loop. I hope this clarifies any confusion.

Answer 7

Answer №4

let pictures = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg"];
let items = [];

shape = new THREE.BoxGeometry( 100, 100, 100,10,10 );

while(items.length < pictures.length) {

    let picIndex = 0;

    let item = {};
    item.texture = textureLoader.load( "data/"+ pictures[picIndex] );
    item.material = new THREE.MeshBasicMaterial( { map: item.texture } );
    item.objectMesh = new THREE.Mesh( shape, item.material );
    item.coordinates = new THREE.Vector3( Math.random()* 500-250, Math.random()* 500-250, Math.random()* 500+120 );

    let overlap = false;
    for (let k = 0; k < items.length; k++) {
        let cubeLoc = items[k].coordinates;
        let dist = cubeLoc.distanceTo( item.coordinates );

        if (dist < 150) {
            overlap = true;
            break;
        };
    };

    if (!overlap) {
        items.push(item);
        picIndex++;
        item.objectMesh.position = item.coordinates;
        console.log(item.coordinates);
        scene.add(item.objectMesh);
    };
};

console.log(items);

i utilized a new object called "item" to simplify accessing data from the array of objects without encountering any issues. The modification works perfectly now ;) A big thank you to @Asad Jamil for all the assistance. Hopefully, this can benefit others in the future :)

Answer 8

let pictures = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg"];
let items = [];

shape = new THREE.BoxGeometry( 100, 100, 100,10,10 );

while(items.length < pictures.length) {

    let picIndex = 0;

    let item = {};
    item.texture = textureLoader.load( "data/"+ pictures[picIndex] );
    item.material = new THREE.MeshBasicMaterial( { map: item.texture } );
    item.objectMesh = new THREE.Mesh( shape, item.material );
    item.coordinates = new THREE.Vector3( Math.random()* 500-250, Math.random()* 500-250, Math.random()* 500+120 );

    let overlap = false;
    for (let k = 0; k < items.length; k++) {
        let cubeLoc = items[k].coordinates;
        let dist = cubeLoc.distanceTo( item.coordinates );

        if (dist < 150) {
            overlap = true;
            break;
        };
    };

    if (!overlap) {
        items.push(item);
        picIndex++;
        item.objectMesh.position = item.coordinates;
        console.log(item.coordinates);
        scene.add(item.objectMesh);
    };
};

console.log(items);

i utilized a new object called "item" to simplify accessing data from the array of objects without encountering any issues. The modification works perfectly now ;) A big thank you to @Asad Jamil for all the assistance. Hopefully, this can benefit others in the future :)

Whenever I execute my code, the browser consistently crashes

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Prevent reloading the page when adding a flash element using JavaScript (jQuery)

Unable to dismiss message in Django

JavaScript issue: "Error: Uncaught (in promise) SyntaxError: Unexpected end of input"

Switching from Vue's Options API to Composition API is like transforming your code from

Both of the radio buttons in Material-UI have been selected

Is there a seamless way to effortlessly upload massive files to s3 through an adminjs dashboard without encountering any glitches?

What is the URL I need to visit in my browser to monitor updates while running npm?

Replace the current CSS styles of a pre-installed package

Creating a stylish gradient text color with Material-UI's <Typography /> component

Is there a way to trigger an Angular $scope function from a hyperlink in the current or a new tab using a right

Having difficulty using JavaScript regex to replace the middle of content?

Illuminate a corresponding regular expression within a text input

Explore numerous databases using mongoosastic

Manipulating CSS Class Properties Using JavaScript

Looking to access the layout details of an HTML element similar to what can be done in Firefox's debugger tool?

Utilize Vue.js to easily upload images alongside form input fields

Utilizing turbolinks enables the page to be reloaded upon form submission

The dynamically generated table will only show the most recently added data

JavaScript: Invoking a nested function within a namespace

Ways to forward a parameter to a different web address?