Using SetTimeOut in THREE JS

Question

Using SetTimeOut in THREE JS

I'm currently working on a project for my master's degree that involves creating a space invaders game using three.js.

While the project is progressing well, I've encountered a problem with my aliens (THREE.Mesh object) being able to fire randomly. I've created a function that successfully generates a random number for this purpose. However, I'm facing an issue with the animate() function. I'm unable to use SetTimeout() within the animate() function.

The SetTimeout() function works the first time animate() is called, but afterward, there is no delay. The code continues to execute without waiting for the timer.

I suspect the problem may be due to animate being constantly called by requestAnimationFrame().

Here's a snippet of my code:

Index.html =>

if (!init()) animate();

function animate(){
   requestAnimationFrame(animate);
   level1.animate();

   render();
}

Level.js =>

Level.prototype.animate = function()
{

//Timer doesn't work
var that = this;

//Just a test with a simple console.log test
setTimeout(function() { console.log("test"); }, 10000);

this.sky.rotation.x -=0.005;

this.spaceship.fire();
for (var i = 0; i < this.ducks.length; i++)
{
   this.ducks[i].move();
    if (this.ducks[i].is_ready_to_fire())
        this.ducks[i].fire_if_ready();
}

};

With this code, the program will wait 10 seconds before printing "test" the first time, but subsequently, it will print "test" without any delay.

Do you have any suggestions on how to fix this issue?

Thank you for your help.

Apologies for any language barriers.

javascript three.js

Answer 1

Answer №1

Do you require a timer for your specific purpose?

If I have understood your issue correctly, you are looking to have the aliens fire after a random delay.

If the exact timing is not crucial and you just want the aliens to shoot at random intervals, you can implement a frame counter for each alien to track when it should fire.

Here is a sample code snippet to illustrate this:

var MAX_FRAMES_TO_WAIT = 600000;

Alien.prototype.init = function() {
 this.framesUntilFire = Math.round(Math.random() * MAX_FRAMES_TO_WAIT);
}

Alien.prototype.fireWhenReady = function() {
  if(--this.framesUntilFire === 0) {
    this.fire();
    this.framesUntilFire = Math.round(Math.random() * MAX_FRAMES_TO_WAIT);
  }
}

function animate() {
  requestAnimationFrame(animate);

  /* ... */

  for (var i=0; i<this.ducks.length;i++)
  {
    this.ducks[i].move();
    this.ducks[i].fireWhenReady();
  }

This approach should work for you. Just keep in mind that the alien firing rate will be affected by the frame rate of the game.

You can address this by also calculating the frame rate and using it to adjust the firing rate.

I hope this information was helpful to you!

Answer 2

Do you require a timer for your specific purpose?

If I have understood your issue correctly, you are looking to have the aliens fire after a random delay.

If the exact timing is not crucial and you just want the aliens to shoot at random intervals, you can implement a frame counter for each alien to track when it should fire.

Here is a sample code snippet to illustrate this:

var MAX_FRAMES_TO_WAIT = 600000;

Alien.prototype.init = function() {
 this.framesUntilFire = Math.round(Math.random() * MAX_FRAMES_TO_WAIT);
}

Alien.prototype.fireWhenReady = function() {
  if(--this.framesUntilFire === 0) {
    this.fire();
    this.framesUntilFire = Math.round(Math.random() * MAX_FRAMES_TO_WAIT);
  }
}

function animate() {
  requestAnimationFrame(animate);

  /* ... */

  for (var i=0; i<this.ducks.length;i++)
  {
    this.ducks[i].move();
    this.ducks[i].fireWhenReady();
  }

This approach should work for you. Just keep in mind that the alien firing rate will be affected by the frame rate of the game.

You can address this by also calculating the frame rate and using it to adjust the firing rate.

I hope this information was helpful to you!

Answer 3

Answer №2

To prevent setting a new timer on each frame, you can opt to reset the timer once the previous one completes. An effective approach to achieve this is by using recursion:

function delayFire() {
    setTimeout(function() {
        if (!currentLevel) {
            return;
        }

        delayFire();
        fire();
    }, Math.random() * 1000);
}

This recursive function will cease firing if the level is no longer the active level.

Do you follow that logic?

Answer 4

To prevent setting a new timer on each frame, you can opt to reset the timer once the previous one completes. An effective approach to achieve this is by using recursion:

function delayFire() {
    setTimeout(function() {
        if (!currentLevel) {
            return;
        }

        delayFire();
        fire();
    }, Math.random() * 1000);
}

This recursive function will cease firing if the level is no longer the active level.

Do you follow that logic?

Using SetTimeOut in THREE JS

Answer №1

Answer №2

Similar questions

Fetching JSON Data from Web Service using Ajax URL Field - A Simple Guide

Adding elements to the <Head> section in Next.js

Express Producing Empty Axios Post Request Body

Transferring a selection from a dropdown menu

Tips for returning JSON data using AJAX

In Angular, the ng-click directive that assigns the value of tab to $index does not seem to be functioning properly

Issue encountered when attempting to generate a mongoose schema using a JSON document

Developing a matrix arithmetic parser using JavaScript

What is the process for integrating a gltf model into Aframe & AR.js with an alpha channel?

Is there a way to store a complete array within a single cell?

Can someone please provide me with a Javascript code snippet that accomplishes the same function

Oh no, there seems to be an issue with accessing the 'map' property in REACT JS. It appears to

Using JavaScript to load the contents of a JSON file

What steps can be taken to ensure a function operates even when the mouse is stationary?

Vue.js is displaying the error message "Expected Object, got Array" when the length appears as undefined

Retrieve information from D3 line interpolation functions

Checking JavaScript files with TSLint

Obtain the beginning and ending positions of a substring within a larger string

The key property is present on the list item, yet the key warning persists

Is it possible to simultaneously wait for the completion of two methods instead of awaiting each one individually?