In Three.js r74, JSONLoader mistakenly links a duplicate of all geometry to the initial bone

I have gained more insight into the bug, so I am rewriting this question. It seems that when using the JSONLoader in r74, the first named bone in an exported Maya scene ends up with a duplicate of all the geometry.

EDIT: Check out this JSFiddle for reference.

For instance, in the provided example, there are 2 boxes, each bound to a single bone with keyframes for animation. There is also a bone without any geometry attached, and it remains stationary. When the stationary bone is named "joint1" in Maya, and the other bones are named "joint2" and "joint3", renaming the stationary bone to "joint4" results in a duplication of both boxes linked to the animated "joint2".

I suspect that there might be a bug causing this issue or I may be making a mistake when loading the animations. Any suggestions would be greatly appreciated. Currently, my only solution is to separate each animated object into different files, but that is not practical. Moreover, this approach does not address the problem when dealing with a multi-bone skeleton. The provided example involves rigs with single bones and no actual deformation.

Below is the loader code I am using:

//Load Scene, Materials, and Animation

var mixer, mesh;
var actions = {};
var sceneLoader = new THREE.JSONLoader();
sceneLoader.load( sceneFile, function( geometry,materials ) {
   materials.forEach( function( material ){
      material.skinning = true; 
   });

    mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) );

    mixer = new THREE.AnimationMixer( mesh );
    actions.main = mixer.clipAction( geometry.animations[ 0 ]);
    actions.main.setEffectiveWeight( 1 );
    actions.main.play();

    scene.add( mesh );

});

//Render

var render = function () {
    requestAnimationFrame( render );

    controls.update;

    var delta = clock.getDelta();
    var theta = clock.getElapsedTime();

    if ( mixer ) { mixer.update( delta ); }

    renderer.render(scene, camera)
}

render();

Answer №1

Although the issue persists, I have managed to come up with a decent workaround.

Whenever the duplicated geometry is created, it is always assigned the default Lambert shader that is automatically included when using the Maya Exporter. If all objects that need to be kept have a different material than the default in Maya, you can add

mesh.material.materials[0].visible = false;

to the loader code. This will hide any material with the default Lambert.

Check out this fiddle

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

Obtaining a result from a Promise in AngularJS

Here is a snippet of an Angular JS Service that I have: 'use strict'; app.factory('loggedService', ['$http', 'authService', 'customerService', function ($http, authService, customerService) { var out = ...

What is the best way to flip the direction of the text input for a Calculator?

I am currently working on creating a basic calculator from scratch using HTML, CSS, and JavaScript. I have been trying to figure out how to align the numbers to the right side of the input element. Can anyone provide me with guidance on how to achieve thi ...

Tips for achieving a gradual transformation of an element according to the scrolling position

I have been experimenting with using waypoints for two specific purposes. The first objective is to determine whether a user is scrolling up or down and if the container comes into view. However, this functionality is not working as expected. The sec ...

Load link dynamically using the rel attribute

I am trying to implement dynamic content loading using jQuery's .load() function. The links are stored in the .rel attribute of the anchor tags. My setup looks like this: <script> $(document).ready(function(){ $('.sidebar_link').clic ...

What is the proper way to leverage the global 'window' object within Angular?

I'm attempting to utilize the method "window["initMapCallback"]" to invoke and monitor for "initMapCallback" in a separate file. However, I am encountering an error message in the debugging console that states Query - How can I properly implement thi ...

Passing data between parent and child components within an Angular application using mat tab navigation

I am currently working on a project, which can be found at this link. Current Progress: I have implemented a mat tab group with tabs inside the app-component. When a tab is clicked, a specific component is loaded. Initially, most of the data is loaded in ...

Adjusting height in Google Maps to fill the remaining space

Currently, I am developing a map application where I want the Google Maps DIV to occupy the remaining height under the header. Here is the code snippet: <!DOCTYPE html> <head> <title>Map Application</title> <style type ...

The art of handling jQuery promises and interconnected AJAX requests

Is there a better way to handle dependent AJAX calls using promises/deferred in jQuery? Currently, my code looks like this: $.when($.ajax('https://somedomain.com/getuserinfo/results.jsonp', { dataType : 'jsonp', jsonp ...

Traversing a JavaScript class within a for loop

I am attempting to access the locations listed in json.responseJSON.Sites, starting with LHR on the first iteration and then NJE on the next one, and so forth. The notifications for each location are "LHR" and "NJE", respectively. Is it possible to achieve ...

Certain javascript files have had illegal characters mistakenly added to them

There seems to be an issue with the js files or server on certain pages, as they are not loading in Firefox: with firefox: SyntaxError: illegal character 癡爠浥湵楤猠㵛≶敲瑩捡汭敮產崻 ⽅湴敲⁩搨猩映啌敮畳Ⱐ獥灡牡瑥 ...

What could be causing the Metamask account address to return as undefined even after it was stored in the useState() function?

A code snippet I have establishes a connection to the Metamask wallet and initializes the account address using useState() hook. const [currentAccount, setCurrentAccount] = useState("") const connectWallet = async () => { try { if (! ...

In JavaScript, you can ensure that only either :after or :before is executed, but not both

My html slider is causing me some trouble <div class="range-handle" style="left: 188.276px;">100,000</div> Upon loading the page, I noticed that in Firebug it appears like this https://i.sstatic.net/Rgqvo.png On the actual page, it looks li ...

Guide on implementing ES6 script's template literals

I've been tackling a template literal question on hackerrank. It's working smoothly on my local IDE, but encountering an error on the Hackerrank IDE. Here's the code to add two numbers and print the result using a template literal: const sum ...

Is there a way for me to achieve a vertical page turning effect on a single page?

I am seeking to develop a unique calendar display consisting of 12 images that give the illusion of flipping up when clicked. While I am aware of turn.js, my knowledge of javascript is limited and I need guidance on how to proceed. Despite having a program ...

Delaying the activation of the code until the image upload is complete

I'm having trouble synchronizing code to upload an image using a vue composable, wait for the upload to finish, and then store the Firebase storage URL into a database. Despite getting the URL, the success code fires before the upload is complete. My ...

Validating phone numbers in Saudi Arabia for both mobile and landlines

I've been struggling to validate a Saudi Arabia phone number on my Bootstrap form, but I keep running into an invalid error. Here is the current regex pattern I am using: /^(009665|9665|\+9665|05|5)(5|0|3|6|4|9|1|8|7)([0-9]{7})$/ function ch ...

Place the Material-UI Drawer component beneath the Appbar in the layout

Currently, I am working on developing a single-page application using Material-UI. In this project, I have integrated the use of an AppBar along with a ToolBar and a Drawer. However, I have encountered an issue where the Drawer is overlapping the AppBar an ...

Attempting to modify Namecheap's custom DNS field through Python Selenium

I am facing an issue while attempting to modify DNS settings for domains in Namecheap using Python Selenium Below is the HTML code: <select class="dashed-select add-margin ng-untouched ng-valid select2-offscreen ng-dirty ng-valid-parse" ng-change="nam ...

Material-UI web application experiencing crashes due to worn-out cards, resulting in element type being declared as invalid and raising an error

After reviewing numerous similar SO questions, it appears that the issue always comes down to problems with imports. Typically, these involve mistyped import destinations or missing braces, but I have double-checked and found no such issues in my code. ht ...

Is there a way for me to store the output of an AJAX call?

One of the challenges I'm facing involves an AJAX request: $.ajax({ url: 'script.php?val1=' + value1 + '&val2=' + value2, dataType: "json", success: function (data) { var newValue1 = data[0]; ...