Having various Collada scenes in Three.js animation may not be compatible

I'm having trouble animating multiple models in Collada format (knight.dae & archer.dae). The issue is that I can't seem to get them all to animate properly, specifically in an idle state with only 2-3 frames. When I load the scene, I end up with one animated model and one static model without any animation - it's as if it was just modeled in 3ds max. I believe the problem lies within the skin and morphs, but despite my extensive search for a solution, my lack of experience has caused all my attempts to fail so far. Any help would be greatly appreciated!

//animation length of the model is 150(and it hosts 4 different animations)
var startFrame = 0, endFrame = 150, totalFrames = endFrame - startFrame, lastFrame;
var urls = [];
var characters = [];
urls.push('3D/archer/archer.dae');
urls.push('3D/archer/archer.dae');
//here's the loader
loader = new THREE.ColladaLoader();
        loader.options.convertUpAxis = true;
        for (var i=0;i<urls.length;i++) {                           
        loader.load(urls[i],function colladaReady( collada ){
            player = collada.scene;
            player.scale.x = player.scale.y = player.scale.z =10;
            player.position.y=115;
            player.position.z=i*200;
            player.updateMatrix()
            skin = collada.skins [ 0 ];
            //skinArray.push(skin);;
        var mesh=new THREE.Mesh(new THREE.CubeGeometry(10,20,10,1,1,1));
        player.add(mesh);
        characters.push(mesh);
        scene.add( player );
            });
        }
//i added the cube because i use raycaster and it doesnt detect collada obj


// Here is where i try my animation.
        function animate() {
        requestAnimationFrame( animate );
        render();

    }
        function render() {
        update();
        renderer.render(scene,camera);

    }
    function update() {
        var delta = clock.getDelta();
        delta = delta / 2;      
        if ( t > 1 ) t = 0;
        if ( skin )
            {
        skin.morphTargetInfluences[lastFrame] = 0;
        var currentFrame = startFrame + Math.floor(t*totalFrames);
        skin.morphTargetInfluences[currentFrame] = 1;
        t += delta;
        lastFrame = currentFrame;
        }
    }

Answer №1

Maybe consider implementing something like this at the start:

let characterSkins = [];

In your collada callback function, which seems to be well thought out already, try adding:

characterSkins.push(collada.characterSkins[0]);

When it comes to rendering, rather than the current if statement for skin existence:

time += deltaTime;
let lastFrame = currentFrame;
let currentFrame = initialFrame + Math.floor(time * totalFrames);

for (let i = 0; i < characterSkins.length; i++) {
  let skin = characterSkins[i];
  if (skin) {
    skin.morphTargetInfluences[lastFrame] = 0;
    skin.morphTargetInfluences[currentFrame] = 1;
  }
}

The key point is to iterate through all skins within the update() function. It's important to handle frame discrepancies among skins by possibly converting variables like lastFrame and currentFrame into arrays corresponding to the characterSkins array.

Answer №2

        if ( skinArray[0] && skinArray[1] )
        {
        skinArray[0].morphTargetInfluences[lastFrame] = 0;
        skinArray[1].morphTargetInfluences[lastFrame] = 0;
        var currentFrame = startFrame + Math.floor(t*totalFrames);
        skinArray[0].morphTargetInfluences[currentFrame] = 1;
        skinArray[1].morphTargetInfluences[currentFrame] = 1;
        t += delta;
        lastFrame = currentFrame;
        }

This code I've come up with gets the job done, but I can't shake the feeling that it's too hardcoded. If anyone has a more elegant solution, I'd be thrilled to see it.

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

Implementing Node Express 4 to efficiently handle response generation from successive API requests

I'm currently in the process of developing a NodeJS server using Express4. The main purpose of this server is to act as a mediator between my frontend Angular app and a 3rd party API. I've set up a specific path that my frontend app can request, ...

Include a requirement within an application/ld+json formatted script

I have a task to create an application using a script in the js+json format. It is crucial to include the person schema, which signals to Google and other search engines how to effectively interpret the structure of the page and its content. My current cod ...

Guide on looping through deeply nested children within an object to accumulate a list of names

Within an object, there are numerous parent and child elements var obj={ name: 'one', child:{ name: 'two', child:{ name: 'three', child.. } } } foo(obj) Create a ...

Verification of Phone Numbers (Global)

I am attempting to create a validation check for mobile numbers, similar to the one implemented by Gmail. Check out Gmail's signup page here However, there is significant variation in phone number formats across different countries, making it challe ...

What is the minimum required node.js version for my project to run?

Is there a command in NPM that can display the minimum required Node version based on the project's modules? ...

Sending back various results in a javascript function

I am attempting to correlate test scores with values from the level array in order to extract selected values into an output array. However, when I execute the following script in the Firebug console, I encounter the error message "TypeError: level is unde ...

Determine who the creator of the clicked div is

I'm sorry if my explanation is a bit difficult to comprehend. Here is the code snippet in question: names.push(newName); var strName = newName; var newName = document.createElement('p') newName.setAttribute('id', newName); documen ...

AngularJS allows you to easily filter a list of people based on the first letter of their first name

I'm attempting to sort through a group of individuals based on the first letter of their first name within an AngularJS repeater. Here's how the repeater looks: <li ng-repeat="person in people | orderBy: 'firstname' | firstLetter:& ...

Modify a field in every document and nested document by using a specific query in MongoDB with NodeJS

I am struggling with a complex query that involves searching for and updating a dynamic field in multiple embedded documents within a parent document. The challenge is to avoid manual iteration through each document and ensure that the field is updated at ...

Is the Positioning of JS Scripts in Pug and Jade Documents Important?

Have you ever wondered why a page loads faster when certain lines are placed at the end of the tag instead of inside it? script(src="/Scripts/jquery.timeago.js") This phenomenon is often seen in code like this: //Jade file with JQuery !!! 5 html(lang=" ...

Transferring information from a JavaScript function to an action method in an ASP.NET MVC controller

Despite searching through numerous posts on SO in an attempt to solve my problem, I have not made much progress. My goal is to pass data from a JavaScript function (DropdownChange()) to an MVC controller's action method as a parameter based on the sel ...

Can you explain the concept of cross domain and how JSONP fits into the picture?

As a beginner in .net programming, I have created a webservice where JavaScript calls the webservice in my code. I attempted to call it using my phone's browser while on the same network. It works perfectly with localhost, but when trying to call the ...

JavaScript objects and AJAX versus ASP MVC3 Model: A comparison of client-side and server

As someone who is still learning about MVC, I find myself a bit unsure about the best way to integrate MVC models with JavaScript objects and AJAX. For instance, in one of my applications, I have a calendar that displays user events stored in a database. ...

What is the best method for setting up message scheduling for a Microsoft Teams bot based on different time

I am trying to figure out how to send messages to users from my bot at specific time intervals. Currently, I'm using agenda for scheduling messages, but I've run into an issue with the timezone discrepancy - agenda is 5:30 hours behind my timezon ...

JavaScript Array Problem

Could you please review the code below and help me understand why I am encountering issues when trying to run the program? $(document).ready(function() { var comp = new Array("AAPL", "MSFT", "XRTX&"); var t = setInterval(function(){ ...

Is it possible to have separate ports for front-end and back-end in NODEJS?

As I develop my NodeJS website, incorporating both front-end and back-end components, it is recommended to organize the files in such a way that the front-end specifically requests data from the back-end via an API. I am curious whether it is considered a ...

What is the name of the JavaScript code editor that includes line numbering for plain text?

Looking to incorporate a text area with line numbering features. I experimented with EditArea, but encountered difficulties when working with text files. While syntax highlighting for various programming languages would be a nice touch, my primary focus ...

successive ajax requests

I am facing a challenge where I need to execute two separate ajax calls sequentially. The second call relies on the result of the first call for its data. Despite my efforts, I haven't been able to achieve the desired outcome. Here's what I have ...

What is the best way to identify the property of an object that holds a specific value?

Searching through an object array in JavaScript to find a specific value and identify the property containing that value is my current task. Here's an example: Object Array: var objArray = [{ "ID": 1, "Name": "Kathy", "Position": "Progra ...

Angular's Material Design Autocomplete feature with remote data sourcing and how its performance compares to the most effective methods

In my current project, I am utilizing an Angular material autocomplete feature that fetches data via AJAX. I am facing a dilemma trying to determine the most efficient approach. Below is a snippet of my code: $scope.loadOrganizations = function () { ...