Unexpected outcomes when rigging a .dae model in Three.js with Blender

I have been working on creating a rigged model for use in a browser using Three.js. Before rigging the model, it loads perfectly fine, allowing me to move and rotate it without any issues. However, after rigging the model, the pieces load in different locations with unexpected rotations.

The model I am working with is a .dae file type created in Blender. The problem seems to arise when I rig this file.

You can view the pre-rigged version of the model here (simply click the play button in the menu):

And here is the link to view the rigged version (click the play button in the menu):

Has anyone else encountered this issue? Is it even possible to successfully load a rigged .dae file in Three.js?

javascriptblenderthree.js

Answer №1

After manually removing the "Armature" node from the rigged model file, there was no change in the outcome.

Upon further investigation, I noticed that the nodes of the first model have specific transformations as follows:

<translate sid="location">0 0 0</translate>
<rotate sid="rotationZ">0 0 1 0</rotate>
<rotate sid="rotationY">0 1 0 0</rotate>
<rotate sid="rotationX">1 0 0 90.00001</rotate>

However, the nodes of the second model each have a unique set of transformations:

<translate sid="location">-0.03634153 0.2361725 0.196658</translate>
<rotate sid="rotationZ">0 0 1 7.848763</rotate>
<rotate sid="rotationY">0 1 0 -7.652335</rotate>
<rotate sid="rotationX">1 0 0 178.5435</rotate>

This discrepancy in transformation is the key difference between the two models.

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

One effective way to redirect after a PUT request and display a one-time message

Here's what I'm aiming for in terms of desired behaviour: A user navigates to a password change web page. The user completes the form and it is sent via PUT request to our REST server. Upon successful completion, the user is redirected to their ...

javascriptjqueryhtmlajaxhttp-redirect

The ReactJS hamburger menu fails to function after being clicked

I'm facing an issue with my responsive navbar. Whenever I click the hamburger menu, it directs me to a blank white page without any content. Can someone help me identify the problem? I am new to react and believe I might need to explore another approa ...

javascriptreactjsreact-reduxreact-hooks

Storing a token in NodeJS using JavaScript

We currently have a mobile single-page application built using HTML/CSS/NodeJS. The functionality of this app requires numerous API calls, all of which require a bearer token for authorization purposes. This bearer token is simply a string value that we ge ...

javascriptnode.js

Display the hidden element using jQuery with the !important rule

There is a specific element that has been given a class with the following CSS styling: .cls { display:none !important; } Despite attempting to display this element using jQuery $(".cls").show(); This method does not seem to be effective. Is ...

javascriptjqueryhtmlcss

Ways to implement StackNavigator along with Redux?

Is there anyone who can assist me in integrating StackNavigator and Redux? It seems straightforward, but I'm encountering issues. index.ios.js import React from 'react' import { AppRegistry } from 'react-native' import { Provi ...

javascriptreactjsreact-nativereact-reduxreact-navigation

Establishing a Table of Disarray

I've hit a roadblock and I'm feeling confused about where to go next. Currently, I'm exploring the use of JavaScript to create tables for my data and display them in HTML. While I've successfully created the HTML table, I'm facing ...

javascripthtml-table

Duplicate multiple "li" elements using jQuery and place them in a designated position within the ul element, rather than at the end

I am currently working on developing a dynamic pagination bar. This pagination bar will dynamically clone the "li" elements based on a number received from an external webservice. Here is the structure of my pagination element: <ul class="pagination"& ...

javascriptjqueryhtmlcss

Which JQuery plugins can transform regular <select> dropdowns into more stylish options?

After an extensive search, I was only able to locate one solution at this link. I scoured the entire internet for alternatives. ...

javascriptjqueryhtmlcssselect

The error message for validating my form magically disappears

I've been working on creating a registration form using HTML, Bootstrap, and JavaScript. My goal was to display an error message when a field is left empty, but for some reason, the error message appears briefly and disappears afterwards. I can't ...

javascripthtml

Turn off HTML display for Internet Explorer users

I am looking to implement code that will block certain pages for Internet Explorer users, making it accessible only for Google Chrome and Firefox users. Do you have any suggestions on how I can achieve this or if there are existing solutions available? I& ...

javascriptphphtmlbrowserweb

Every time I try to import my Node router in my Node.js application, it leads to a

I'm experiencing a crash on my Node.js server when I try to import the node routes. Strangely, removing the routes resolves the issue. I've spent time trying to pinpoint the problem without success. Upon double-checking, the path appears to be co ...

javascriptnode.jsexpress

What could be causing my insertRow function to inject empty cells into my table?

I am facing an issue with adding the results of a fetch request into a table as a new row. Strangely, when I click the button to trigger this function for the first time, it adds an empty row instead of the desired data. However, on subsequent clicks, the ...

javascripthtml

Which target should be specified for pressing Enter in a Javascript Alert using Selenium IDE?

Seeking assistance with creating simple test cases using Selenium IDE. Encountering difficulties when recording test cases involving Javascript alerts, as Selenium does not support these pop-ups. Attempted a workaround by simulating the Enter key press wh ...

javajavascripthtmlseleniumselenium-ide

The technique for accessing nested key-value pairs in a JSON object within an Angular application

After receiving the response from the backend, I have retrieved a nested hash map structure where one hash map is nested within another: hmap.put(l,hmaps); //hmap within hmap When returning the response to the frontend, I am using the ResponseEntity meth ...

javascriptangulartypescriptfor-loop

The render of Javascript is not functioning properly in Chromedriver

For website testing in VisualStudio, I planned to use Selenium with Cromedrive. Unfortunately, I encountered difficulty in seeing items generated by Javascript on the page. It appears that chromedriver captures the pagesource before the JS has a chance to ...

javascriptc#seleniumselenium-chromedriver

Unable to perform the GET request method due to data indicating [object object]

Currently, I am attempting to use a get request method within both Vue and Express in order to retrieve data based on my v-model. Displayed below is the code where I am trying to send the data to Express. getResult() { axios .get( `${process. ...

javascriptexpressvue.jsvuejs2

creating a countdown timer for the carousel

While experimenting, I decided to create a basic carousel from scratch. Initially, I used onclick="function()" to cycle through the images. Later on, I attempted to replace it with onload="setInterval(function, 4000)", but it seems like something went wron ...

javascripthtmlcarousel

endless cycle when utilizing useEffect with a mandatory function

I'm currently in the process of creating a custom hook for sorting and filtering tables within a dashboard application. However, I am encountering an issue with an infinite loop when attempting to refetch data after changing sort or filter fields. The ...

javascriptreactjsreact-hooks

How can I increase the element by $100 using a dropdown selection in JavaScript?

Hey there! Looking to create a dropdown list with two shipping options: Special Shipping Normal Shipping <select> <option>Special Shipping</option> <option>Normal Shipping</option> </select> If the user selects Speci ...

javascriptjqueryhtml

Issue with updating the vertices in three.js EdgesGeometry is causing the Line Segments to not be updated as expected

I have created multiple three.js objects. I have observed that the 'other' objects, designed as Mesh/Geometry/Material, update as expected after calling verticesNeedUpdate() Furthermore, I have two wireframe objects that were designed in this m ...

javascriptthree.js