Continuously generate new objects every second

Question

Continuously generate new objects every second

I am working on a function that involves adding the RandomBlock object to the scene and then moving it downward on the screen.

function enemyPaddleMovement()
{
scene.add(RandomBlock);
RandomBlock.translateX(-8);
}

The RandomBlock object is created using the following code:

var shapes = [LeftBlock, RightBlock, middleRightBlock, middleLeftBlock, middleBlock];
var shape = shapes[Math.floor(Math.random()*shapes.length)];`

RandomBlock = new THREE.Object3D();
RandomBlock.add(shape);

My goal is to continuously spawn a new RandomBlock object every second and have it move down the screen. I have attempted using setInterval, but it only replaces the existing RandomBlock object rather than creating a new one each time.

Any assistance would be greatly appreciated.

javascript three.js

Answer 1

Answer №1

This particular issue does not actually require Three.js; the issue lies in the fact that you are not creating new objects, but rather reusing the same one multiple times. Consider trying an approach like the following:

// keep this line outside of the function
var shapes = [LeftBlock, RightBlock, middleRightBlock, middleLeftBlock, middleBlock];

function enemyPaddleMovement()
{
    var shape = shapes[Math.floor(Math.random()*shapes.length)];
    var randomBlock = new THREE.Object3D();
    randomBlock.add(shape);
    scene.add(randomBlock);
    randomBlock.translateX(-8);
}

It's worth noting that there are no longer any references to randomBlock outside of the function. This is because it is an object specific to that particular function call and is unique to it.

Assuming you intended to choose a different shape for each new object, if not, simply move var shape = ... back outside the function.

Answer 2

This particular issue does not actually require Three.js; the issue lies in the fact that you are not creating new objects, but rather reusing the same one multiple times. Consider trying an approach like the following:

// keep this line outside of the function
var shapes = [LeftBlock, RightBlock, middleRightBlock, middleLeftBlock, middleBlock];

function enemyPaddleMovement()
{
    var shape = shapes[Math.floor(Math.random()*shapes.length)];
    var randomBlock = new THREE.Object3D();
    randomBlock.add(shape);
    scene.add(randomBlock);
    randomBlock.translateX(-8);
}

It's worth noting that there are no longer any references to randomBlock outside of the function. This is because it is an object specific to that particular function call and is unique to it.

Assuming you intended to choose a different shape for each new object, if not, simply move var shape = ... back outside the function.

Answer 3

Answer №2

It's important to remember to save this updated Object to avoid inadvertently recreating it. Consider using a BlockContainer instead of RandomBlock, as it can contain multiple blocks in a list.

Answer 4

It's important to remember to save this updated Object to avoid inadvertently recreating it. Consider using a BlockContainer instead of RandomBlock, as it can contain multiple blocks in a list.

Continuously generate new objects every second

Answer №1

Answer №2

Similar questions

What is the best way to interact with all the rendered DOM elements in React that were created using the map method

Broadcast and listen to events in AngularJS using `$rootScope.$emit`

Inserting POST request data into subdocument arrays of a database

Node/Express: Detecting PDF Data Size of 0

Creating an element in JavaScript with a designated ID is a

Improved explanation of DOM elements in raw JavaScript

Angular2 Animation for basic hover effect, no need for any state change

Importing pixi-sound in the right way for PIXI JS

Is Cookie-session the most ideal choice for React applications?

Troubleshooting issues with AngularJS's minDate functionality

What are some methods for saving HTML form data locally?

utilizing staggered animations with three.js

Issue with jQuery datepicker not triggering onChangeMonthYear event

Node.js population process

How can I implement a scroll functionality to navigate to the next item in a Vuetify v-carousel?

Troubleshooting Problems with Angular ng-include

The MongoDB object type is not stored

How to Send Data to ASP.NET MVC Controller Using AJAX Request with jQuery

Troubleshooting lack of output in Console.log (NodeJs)

Using HTML and JavaScript to create a link that appears as a URL but actually directs to a JavaScript function