Guide to animating several objects simultaneously in THREE.js

I am facing an issue where I am trying to add a group of birds to a scene, but only one of them is playing the animation that I loaded. I have tried using THREE.AnimationObjectGroup as mentioned in the documentation, however, I am struggling to make it work. I use the following loop to load the objects and animations.


for (var count = 0; count < 20; count++) {
    loader.load("./assets/bird.gltf", function (gltf) {

        //Loading and positioning the model
        var bird = gltf.scene;
        bird.scale.set(10, 10, 10);

        bird.position.set(Math.random() * 500, Math.random() * 500, Math.random() * 500);
        var flock = new THREE.AnimationObjectGroup;
        flock.add(bird);
        console.log(flock);

        //Playing the Animation
        mixer = new THREE.AnimationMixer(flock);
        console.log(gltf.animations);
        mixer.clipAction(gltf.animations[0]).play();

        scene.add(bird);


    });

}

Answer №1

As a newcomer to THREEjs, consider moving the creation of 'var flock = new THREE.AnimationObjectGroup;' outside of your for loop and executing your '//play animation' block after the loop.

Here's a suggested sequence: create group -> add 20 birds to the group using a for loop -> play animation for the group.

It's uncertain if you need to use scene.add(bird) in this scenario. You might just need to add scene.add(flock) after the loop.

Answer №2

As mentioned by @mumbu22, it's important to ensure that you are regularly updating your mixer within your update/render loop.

if (this.mixer) {
      this.deltaSeconds = timestamp - this.start;
      this.mixer.update( this.deltaSeconds );
      this.start = timestamp; 
}

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

Linked selection options for state, city, and postal code

I have set up a cascading dropdown list - State -> City -> Pincode . Instead of fetching data from the database, I am using JSON. The dropdown functions smoothly on the local server, but experiences slowness on the web server. Here is a snippet of ...

Using AngularJS to dynamically assign classes with values derived from an ng-repeat loop

I'm attempting to assign a class to a table row using ng-class based on the value of ng-repeat. I have searched online and found examples that involve calling a function. Is it possible to simply set ng-class with a value instead of using a function? ...

Tips for incorporating JavaScript code into back4app.com using Objective-C:1. Start by accessing the

Currently, I am trying to retrieve "ServerDate" from back4app.com using PFCloud. Unfortunately, I have encountered the following issue: Invalid function: "getServerDate" (Code: 141, Version: 1.13.0) When I attempted to use the code below: [PFCloud ...

Using the Set function to compare distinct elements within different arrays

Update: After reviewing the link shared by faintsignal, it appears to be the most suitable answer. It not only clarifies why this behavior is happening but also provides a solution to the issue at hand. I am currently working with an array and trying to d ...

Do AngularJS routes allow the use of special characters in URLs?

Issue at hand: Every time I enter http://localhost:53379 in the browser, it redirects me to http://localhost:53379/#/. Why is the /#/ being added? angular .module('app', ['ngRoute', 'ngStorage']) .config([&apo ...

The submit button in Angularjs does not respond to the Enter key press

Click below to submit: <input type="submit" ng-click="Showdata()" class="btn blue pull-right" Text="" /> Email input field: <input type="text" ng-model="texttype" class="form-control" ng-class="eml" placeholder="Enter Email" /> Password ...

Transferring information between Vue.js components via data emissions

Greetings from my VueJS Table component! <b-table class="table table-striped" id="my-table" :items="items" :per-page="perPage" :current-page="currentPage" :fields="fields" @row-clicked="test" lg >< ...

I am experiencing issues with the button click functionality in my Google extension

Greetings! I am currently developing a Chrome extension that will automatically redirect to my website and fill in the password. However, I am facing an issue with submitting the button click event. // Here is my manifest.json code { "name": "z", "v ...

After reaching the character limit, errors occur due to data being sent through Ajax requests on keyup

My website has a feature where users can input zip codes and get information based on that. However, I am facing an issue with the ajax call when users continue typing beyond the required number of characters for zip code entry. Even though the additional ...

The creation of transparent objects in THREE.js allows for a dynamic display of overlaid objects in the

Greetings, I am interested in creating a three.js room where the walls behind which objects are located (from the perspective of the camera) will become transparent with 50% opacity as I rotate the room. Allow me to elaborate: Visualize a scenario whe ...

Creating a User Registration and Authentication System with JavaScript for a Database

I'm new to the world of web development and I've encountered a bit of a challenge. I'm looking for a Javascript framework that can handle user registration and authentication with a database, similar to what I would do with PHP and MySql. I ...

State variables in React hooks like useState always return the previous value before

Whenever I choose a value, it seems to always display the previously selected option instead of the current one. What I really want is for the selection to update and store the current value immediately. const [postsPerPage, setPostsPerPage] = useState(1 ...

Replace the image with text inside an anchor when the anchor is being hovered

I want a logo (we'll call it .item-logo) to be shown inside a circle when not being hovered over, but when you hover over the container, the date should be displayed. Here is the HTML code: <div id="main-content" class="container animated"> ...

Crockford's method of replacing values with nested objects

/** Custom Supplant Method **/ String.prototype.customSupplant = function(obj) { return this.replace (/{([^{}]*)}/g, function (match, propPath) { var props = propPath.split('.'); var result = obj; f ...

Firebase Error: In order to deploy without hosting via source, options must be provided. (app/no-options)

After developing a Next.js application, I integrated Firebase authentication and utilized the useContext hook for managing user state throughout the app. Here's the snippet of code for the AuthContext: auth.js import { createContext, useState, useEff ...

Using AngularJS for AJAX operations with dynamic PHP variables

I have an AngularJS code that is looping through an AJAX JSON response like this: <div ng-repeat="post in posts"> {{post.title}} {{post.url}} </div> It's working fine. How can I pass a PHP variable based on the JSON? Let's assume t ...

The Express middleware is not being utilized

There seems to be an issue with the middleware in the code below that is supposed to create a property req.user if req.session.user exists. Unfortunately, it appears that the middleware is not being triggered, causing 'hihihhiihi' to not be print ...

What is the best way to modify the size of a canvas element while maintaining effectiveness?

I've encountered an issue while using Canvas to create a pie chart with chart.js. Despite adjusting the dimensions of the canvas element, it continues to take up the entire page. <canvas id="myChart" height ="200" width="200"></can ...

The carousel spun around, each section moving to the side on its own

One issue I'm facing is that on my page, I have multiple carousel rows. However, when I click on the "next" or "prev" button to navigate through the items in the carousel, it affects all carousels instead of just the one I clicked on. I've attem ...

Obtaining IP Address with Jquery or Phonegap: A Guide for Cross Platform Development

Is there a way to retrieve the IP address using Jquery or Phonegap? I am currently working on an application that is compatible with Android, iPhone, and Windows platforms. I'm in need of a solution to locate the IP address of a request. ...