Halting Execution After Placing an Object in Three.js Scene with Javascript

Question

Halting Execution After Placing an Object in Three.js Scene with Javascript

It seems like a simple task, but I've been struggling with it for days.

How can I add objects to a scene with a pause between each addition?

Inside a loop{

I call the make_obj function()

then I call the wait function()

}

The issue is that the program doesn't display each added object with a pause; instead, it waits until the loop ends and then shows all the objects together on the screen after all pauses have been completed.

I've tried to explain this before

Three.js scene not reacting while program is running

but it seems too complicated, so I'm breaking it down here.

Thank you in advance.

Edit_1: Yes, I can. Please consider the scene and three as objects inserted by another class. These are standard instantiations.

test = function (scene, three){

    this.scene = scene;
    this.caller_inst = three;

    var that= this;
    var depth_mod=0;

    this.start_loop=function(){

        var i;

        for(i = 0; i < 10; i++){
            this.make_objects();
            this.wait(1000);
        }
    };

    this.wait = function(ms){

        setTimeout(function(){ console.log("Wait!"); }, ms);
        return;

        console.log("wait start");
        var start = new Date().getTime();
        var end = start;

        while(end < start + ms){
            end = new Date().getTime();
        }
        console.log("wait ended");
    };

    this.make_objects = function(count_rows, count_columns){

        var color = '#'+Math.floor(Math.random()*16777215).toString(16);
        var sphere_geometry = new THREE.SphereGeometry(1);
        var material1 = new THREE.MeshPhongMaterial({ color: color, specular: 0x555555 });
        var sphere_mesh = new THREE.Mesh(sphere_geometry, material1);

        this.scene.add(sphere_mesh);

        sphere_mesh.position.copy(that.caller_inst.camera.position);
        sphere_mesh.position.x = sphere_mesh.position.x+5+depth_mod;
        sphere_mesh.position.z = sphere_mesh.position.z-15 + depth_mod;

        that.caller_inst.renderer.render(that.caller_inst.scene, that.caller_inst.camera);
        depth_mod = depth_mod-1;
    };

};

I made a slight modification but got the same result.

this.start_loop=function(){

var i;

for(i = 0; i < 10; i++){
    setTimeout(function(){ that.make_objects(); }, 1500);
}

};

Why doesn't manual waiting work like this:

var i;

for(i = 0; i < 10; i++){
    this.object[i].visible = true;
    this.wait(1000);
}

?

javascript three.js

Answer 1

Answer №1

Implementing setTimeout for delayed execution.

Create a function that adds an object, and then execute it using setTimeout. For multiple additions, simply include another setTimeout call at the end of your object-adding function.

function greet() {
  alert('Hello');
}

setTimeout(greet, 1000);

For more examples, visit this page: https://javascript.info/settimeout-setinterval

Answer 2

Implementing setTimeout for delayed execution.

Create a function that adds an object, and then execute it using setTimeout. For multiple additions, simply include another setTimeout call at the end of your object-adding function.

function greet() {
  alert('Hello');
}

setTimeout(greet, 1000);

For more examples, visit this page: https://javascript.info/settimeout-setinterval

Answer 3

Answer №2

Exploring various techniques for implementing a loop with a pause reveals the modern ES6 approach using async functions.

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

async function executeTasksWithDelay() {
  for (let i = 0; i < 10; ++i) {
    console.log(i);    // add object here
    await wait(1000);  // wait 1 second
  }
}

executeTasksWithDelay();

illustrative example:

<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.module.js';

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

async function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 40;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 50;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 16;

  const scene = new THREE.Scene();

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
  }

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  function makeInstance(geometry, color, x) {
    const material = new THREE.MeshPhongMaterial({color});

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.x = x;

    return cube;
  }

  const cubes = [];

  function animate(time) {
    time *= 0.001;  // convert time to seconds

    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * .1;
      const rot = time * speed;
      cube.rotation.x = rot;
      cube.rotation.y = rot;
    });

    renderer.render(scene, camera);

    requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);

  const numCubes = 11;
  for (let i = 0; i < numCubes; ++i) {
    const u = i / (numCubes - 1);
    const x = (u * 2 - 1) * 10;
    cubes.push(makeInstance(geometry, `hsl(${u * 360},100%,70%)`, x));
    await wait(1000);
  }   
}

main();
</script>

Answer 4

Exploring various techniques for implementing a loop with a pause reveals the modern ES6 approach using async functions.

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

async function executeTasksWithDelay() {
  for (let i = 0; i < 10; ++i) {
    console.log(i);    // add object here
    await wait(1000);  // wait 1 second
  }
}

executeTasksWithDelay();

illustrative example:

<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.module.js';

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

async function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 40;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 50;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 16;

  const scene = new THREE.Scene();

  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 2, 4);
    scene.add(light);
  }

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  function makeInstance(geometry, color, x) {
    const material = new THREE.MeshPhongMaterial({color});

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.x = x;

    return cube;
  }

  const cubes = [];

  function animate(time) {
    time *= 0.001;  // convert time to seconds

    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * .1;
      const rot = time * speed;
      cube.rotation.x = rot;
      cube.rotation.y = rot;
    });

    renderer.render(scene, camera);

    requestAnimationFrame(animate);
  }
  requestAnimationFrame(animate);

  const numCubes = 11;
  for (let i = 0; i < numCubes; ++i) {
    const u = i / (numCubes - 1);
    const x = (u * 2 - 1) * 10;
    cubes.push(makeInstance(geometry, `hsl(${u * 360},100%,70%)`, x));
    await wait(1000);
  }   
}

main();
</script>

Halting Execution After Placing an Object in Three.js Scene with Javascript

Answer №1

Answer №2

Similar questions

Identify data points on the line chart that fall outside the specified range with ng2-charts

The NextJs image entered into an endless loop, throwing an error message that said: "The 'url' parameter is correct, but the response from the

Double dragenter events triggered before dragleave in HTML5 drag and drop functionality

Exploring the process of passing an array as a function argument from PHP to JavaScript

How to Implement Flexbox Display Across Various Browsers Using jQuery?

Trouble with ScrollTo animation on div with adjustable offset top feature - seeking assistance

Unable to navigate through select2 dropdown if fixed div is present

Utilize a React function to incorporate an external link

Upon completion of an Ajax call, ReactJS will execute a callback function

What is the best way to transfer the text from an input field into a paragraph when a button is

What leads to the occurrence of the "maximum call stack size exceeded" error?

Navigating through an array in Pug

A step-by-step guide on generating a dynamic JSON file with JavaScript

Ways to make a jsonp request without including the 'callback' in the URL

Check to see if the ContentEditable div is currently focused

Having trouble installing gulp locally due to an error with ` ode_modulesansi-regex`

Utilizing JavaScript: Storing the output of functions in variables

Tips for recognizing a specific object ID within an array in order to modify the status of an element within that object

Tips for building a task list using JavaScript only

Verifying the "select" dropdown option prior to final submission