Animating cloned meshes in Three.js

I'm having an issue when trying to generate copies of a 3D json model that I've animated. Everything works fine with just one model in the scene.

However, as soon as I attempt to create multiple copies, I encounter the following error:

Uncaught TypeError: Cannot read property '0' of undefined.

The error seems to be pointing back to the following function:

for(i = 0; i < enemics_generats; i++ ){

    var enemic = dolent.clone(true); //Clone from original model
    enemic.name = i.toString();
    if (i > 5){
        enemic.visible = false;
    }
    else{
        enemic.visible = true; 
    } 

    enemic.box = new THREE.Box3().setFromObject(enemic);//Box collider
    enemic.box_helper = new THREE.BoxHelper( enemic ); //Display box on scene

    //THE ERROR OCCURS HERE

    enemic.mixer = new THREE.AnimationMixer( enemic );
    enemic.mixer.clipAction( enemic.animations[ 0 ] ).play(); //ERROR AT THIS LINE

    enemics.push(enemic);
    scene.add(enemic);
    scene.add(enemic.box_helper);
}

Thank you for your assistance.

Answer №1

When using Object3D.clone, keep in mind that your animations array will not be duplicated along with the object's properties. To ensure that the animations are also copied, you must manually replicate or reference them in the cloned object.

Let's illustrate this with an example:
var obj1 = new THREE.Object3D();
obj1.someProperty = "test";
var obj2 = obj1.clone();
console.log(obj2.someProperty); // This will output 'undefined'
<script src="https://threejs.org/build/three.js"></script>

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

What is the best way to ensure there is only one space after every 4 characters in a string?

Looking for a way to make social security number input more readable by inserting a whitespace after the first 4 characters in the string. The social security number has a total of 10 numbers, so the desired format is: 1234 567890. Most solutions I found ...

Validating HTML forms using Javascript without displaying innerHTML feedback

Hey, I'm just diving into web development and I'm struggling to figure out why my innerHTML content isn't displaying on the page. Can anyone offer some assistance? I'm trying to display error messages if certain fields are left empty, b ...

Step-by-step guide on triggering a button using another button

I have a unique question that sets it apart from others because I am looking to activate the button, not just fire it. Here is my syntax: $("#second_btn").click(function(){ $('#first_btn').addClass('active'); }) #first_btn ...

Terminate a targeted recipient following the completion of the on event

I am currently running a node service with socket.io and utilizing an event emitter to send updates based on user context. For example, context A may have users 1, 2, and 3 while context B has users 4 and 5. Once a successful connection is established wit ...

Internet Explorer causing issues with Jasmine mocking ajax calls

Recently, I attempted to develop a spec that enables mocking out Ajax calls. The testing procedure functions seamlessly on browsers such as Chrome and Firefox; however, I encountered some difficulties while executing the test case on Internet Explorer (spe ...

Use ngResource's $delete method to remove a record from a query object

Just starting out with angular and trying to work with the $resource library for API services. I'm having trouble figuring out how to delete a record obtained through the query() method. Specifically, we have an endpoint for user notifications. The go ...

Guide on deactivating the div in angular using ngClass based on a boolean value

displayData = [ { status: 'CLOSED', ack: false }, { status: 'ESCALATED', ack: false }, { status: 'ACK', ack: false }, { status: 'ACK', ack: true }, { status: 'NEW', ack ...

Neither BigText nor FitText is effective

Here is a sample HTML snippet: <div id="bigtext" style="width: 300px"> <div>The mysterious</div> <div>BIGTEXT</div> <div>feature exclusively</div> <div>encapsulated on screen</div> < ...

Remove all stored data from localStorage and update the view in Backbone framework

Hi, currently I am using backbone localstorage and facing an issue where I need to clear the localstorage every time a user hits the search button. This will allow me to add new data to the localStorage without any conflicts. Additionally, I am attempting ...

What could be causing the malfunction of the .setAttribute() and .removeAttribute functions in my JavaScript program?

Below is a flashcard game I have developed: Once a user enters the correct answer in the text box, "Correct!" is expected to be displayed in bold green font. The CSS attributes are then supposed to be removed shortly after. Here is the HTML code for the i ...

Duplicate text content from a mirrored textarea and save to clipboard

I came across some code snippets here that are perfect for a tool I'm currently developing. The codes help in copying the value of the previous textarea to the clipboard, but it doesn't work as expected when dealing with cloned textareas. Any sug ...

When encountering duplicates within an array, I must ensure that the complete structure of the array is preserved and stored in MongoDB

I have encountered a situation where I am looping through an array and need to save the data in a MongoDB database. However, I need to avoid duplicating the array's indexes. I was thinking of using a filter to achieve this, but I'm concerned abou ...

Tips on how to make the cursor blink in an input text box after tab switching

Whenever I click the button, the cursor in the input field blinks. However, the issue arises when I switch to another tab and return to this tab - the cursor is no longer in position and I have to click the input field again. Even after switching tabs an ...

JQuery Mobile Navigation with Bootstrap 3 Sidebar on the Go

While using RoR, I encountered a baffling issue. I have created a new navbar with a sidebar that only displays on mobile and not on desktop. The Turbolink is functioning properly. <%= javascript_include_tag 'application', 'data-turboli ...

Ensuring the Line Breaks in CSS and JavaScript to Easily Modify the Style

Is there a way to determine when a line will break so I can apply different styles? The design team needs 3 buttons in a grid (3 columns) with specific sizes. They want buttons with content that breaks onto the next line to have a border-radius of 13px, w ...

What causes MongoDB to modify my UTC time zone from UTC+2:00 to UTC+0 when utilizing Mongoose in conjunction with moment-timezones.js?

MongoDB recently updated their UTC time from UTC+2:00 to UTC+0. Despite attempting to include the option "{ forceServerObjectId: true }", I still encountered issues. My code relies on moment-timezones.js for creating dates, here's a snippe ...

Acquiring the Facebook profile_id and incorporating it into a URL using a Chrome Extension

Although I have limited knowledge of JavaScript, I believe I know enough to complete the task at hand; I just need some guidance. I am working on developing an extension that will extract the profile_id from the current Facebook page being viewed, and the ...

The three.js library encountered an ERROR 404 ( File Not Found ) when trying to import an existing file

Error: GET http://localhost:port/js/three net::ERR_ABORTED 404 (Not Found) I am currently working on a web development project using Three JS. I downloaded the master Zip of ThreeJS from the official website of Three JS I copied the JS files from the Bui ...

What is the best way to retrieve input attributes in Node.js?

How can I achieve the same functionality as the code snippet below using Node.js? selectedRadio = document.querySelector('input[name="device"]:checked').dataset.name; I am developing a backend using Node.js and Express.js with BodyParser for an ...

React - The select component has received an invalid value of `undefined` that is out of range

I am working on a material-UI dialogue form that sends data to my API. One of the fields in the backend database is binary and only accepts two possible options. How can I handle this in the dialogue code provided below? Below is the error message: Mate ...