Troubles arising from Maya 2017 export to ThreeJS

Question

Troubles arising from Maya 2017 export to ThreeJS

I'm facing an issue with exporting from Maya to Three.js

Using Maya 2017 on a Mac and recently downloaded ThreeJS from the site. Initially, I had no problems with the .min version (seems to be Revision 57). I was utilizing

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

However, after learning this method had been deprecated, I switched to using

mesh = new THREE.Mesh(geometry, materials)

. Unfortunately, with Three.js it failed completely - no model rendered and no errors were generated. While it would render the stage in Three.js, nothing else appeared. Models generated outside the JSON loader would render as expected, but that didn't solve my issue. I needed the JSON to load and render.

I attempted to reinstall the Three export, but it seems the version has changed. Now, I can't get any results using either three.min.js or three.js to instantiate a model.

I've explored various solutions, including triangulating the models, but still get an empty stage with no errors. Even a simple triangulated cube model failed to render. I checked the examples on the ThreeJS site for the JSON loader, but they weren't very helpful either. Without diving into the JSONLoader parser to inspect the JSON, does anyone have any suggestions? I'm unsure where to find the correct format for the exported data.

javascript json three.js maya

Answer 1

Answer №1

Whenever I mention not feeling any sense of happiness, it's because I couldn't see any model being rendered and there were no apparent errors. I checked the array contents using the console, and everything seemed to be in order, including the materials. I tried simplifying the model to just a single cube with triangulation. The Json file is very brief - should I share it? The main issue remains that the model simply doesn't appear. I've inspected the lighting in case it's hidden, and I've added other objects outside the Json to test visibility, but it seems like the model isn't being created and isn't causing any errors?

My objective is to export a simple Json file from Maya, import it into Three.js, and use mesh (geometry, materials) to create a manipulatable model.

Answer 2

Whenever I mention not feeling any sense of happiness, it's because I couldn't see any model being rendered and there were no apparent errors. I checked the array contents using the console, and everything seemed to be in order, including the materials. I tried simplifying the model to just a single cube with triangulation. The Json file is very brief - should I share it? The main issue remains that the model simply doesn't appear. I've inspected the lighting in case it's hidden, and I've added other objects outside the Json to test visibility, but it seems like the model isn't being created and isn't causing any errors?

My objective is to export a simple Json file from Maya, import it into Three.js, and use mesh (geometry, materials) to create a manipulatable model.

Answer 3

Answer №2

I am going to provide an answer at this moment since I have one.

The issue lies in the ThreeJS JSON export from Maya not functioning properly - there seems to be an error in the output, causing ThreeJS to reject it. However, a workaround is to utilize a conversion tool that transforms an OBJ file into a JS file, which can then be loaded using the same code. To begin, export an OBJ file from Maya, which is a straightforward process. The conversion tool can be located in the threes download folder under utils>converters>obj>convert_obj_three.py. You will need to use the console for this - on a Mac, it is recommended to place a copy of the file in your working folder. Once you have navigated to the appropriate working folder with all your files in the console, use the following line:

python convert_obj_three.py -i myFile.obj -o myfile.js

The resulting JS file can be imported into ThreeJS using the following code:

var jsonLoader = new THREE.JSONLoader();

//load a resource
jsonLoader.load(

//resource URL
'myFile.js',

//Function when resource is loaded
function ( geometry, materials ) {

    var material = materials[ 0 ];
    var object = new THREE.Mesh( geometry, material );
    scene.add( object );

}
);

Another issue that arises is that the object does not display properly - the material appears black. It is only visible if there is something in front of it, or if a grid is used. It took some time to identify the cause by checking the console and realizing that the material was loading but displaying as black. Regardless of the lighting adjustments made, the issue persisted. However, I discovered that specifying a material color resolved the problem. Therefore, include the line material.color.setHex( 0xffffff ); before the scene.add( object ); line.

Answer 4

I am going to provide an answer at this moment since I have one.

The issue lies in the ThreeJS JSON export from Maya not functioning properly - there seems to be an error in the output, causing ThreeJS to reject it. However, a workaround is to utilize a conversion tool that transforms an OBJ file into a JS file, which can then be loaded using the same code. To begin, export an OBJ file from Maya, which is a straightforward process. The conversion tool can be located in the threes download folder under utils>converters>obj>convert_obj_three.py. You will need to use the console for this - on a Mac, it is recommended to place a copy of the file in your working folder. Once you have navigated to the appropriate working folder with all your files in the console, use the following line:

python convert_obj_three.py -i myFile.obj -o myfile.js

The resulting JS file can be imported into ThreeJS using the following code:

var jsonLoader = new THREE.JSONLoader();

//load a resource
jsonLoader.load(

//resource URL
'myFile.js',

//Function when resource is loaded
function ( geometry, materials ) {

    var material = materials[ 0 ];
    var object = new THREE.Mesh( geometry, material );
    scene.add( object );

}
);

Another issue that arises is that the object does not display properly - the material appears black. It is only visible if there is something in front of it, or if a grid is used. It took some time to identify the cause by checking the console and realizing that the material was loading but displaying as black. Regardless of the lighting adjustments made, the issue persisted. However, I discovered that specifying a material color resolved the problem. Therefore, include the line material.color.setHex( 0xffffff ); before the scene.add( object ); line.

Troubles arising from Maya 2017 export to ThreeJS

Answer №1

Answer №2

Similar questions

Do these two JavaScript statements behave the same under the principles of functional programming in a React environment?

Display or conceal a div based on the size of the screen using HTML and CSS

Discover additional Atom extensions

Developing a specialized directive to enhance bootstrap menuItems

Material design for Angular applications - Angular Material is

Executing a JavaScript file within the Meteor JS ecosystem

Troubles with retrieving native SQL Server JSON data

What is the best way to securely store a sensitive Stripe key variable in an Angular application?

How to display specific JSON objects that meet particular criteria in HTML cards using Ionic and Angular?

Dealing with timeout errors when using Puppeteer's page.waitForNavigation()

The method to eliminate the default active class using AngularJS when clicking on different links

The elegance of a JSON datetime in the world of ballerinas

I am encountering TypeError issues while attempting to mock/test Vuex store modules

Encountering a problem when verifying if the data is in JSON format using JavaScript

Learn how to efficiently disable or enable a button in Angular depending on the selected radio button

Issue encountered with PowerShell 2.0's ConvertFrom-Json and ConvertTo-Json due to a circular reference detection

Converting an array of objects to an array of JSON objects in TypeScript

Loading animation reminiscent of a whirlpool, similar to the movement

What causes the occurrence of "undefined" after multiple iterations of my code?

The Implementation of Comet Programming