Maya exported json file not able to play animation and display multiple texture

[IamRizban]

Hi Devs,
I am trying to display a 3D model using .json file with the help of JSONLoader, but it display only black screen. I have exported .json from 'maya exporter plugin'. I want to load all its texture from json file only. I have tried several ways but still result is far away? I have spend lots of time on Google, Stack Overflow, Clara.io but not getting any relevant answer. I already added this issue on SO, but not found any solution.
Here it is link :

I am being confused that is it possible to render maya exported json with Three.js till current release or not. Please help me to sort out this issue.

Here it is my json file:
new-heart.txt

Here it is my json (material array):

"materials": [{
        "opacity": 0.0, 
        "mapDiffuseRepeat": [1, 1], 
        "mapNormalFactor": 1, 
        "depthTest": true, 
        "colorDiffuse": [0.5, 0.5, 0.5], 
        "vertexColors": false, 
        "blending": "NormalBlending", 
        "mapDiffuseAnisotropy": 4, 
        "shading": "Lambert", 
        "transparent": true, 
        "depthWrite": true, 
        "mapNormalRepeat": [1, 1], 
        "mapNormalWrap": ["repeat", "repeat"], 
        "DbgName": "Arota", 
        "mapNormalAnisotropy": 4, 
        "mapNormal": "Heart_Arota_NM.jpg", 
        "mapDiffuseWrap": ["repeat", "repeat"], 
        "mapDiffuse": "Heart_Arota_Diffuse.jpg"
    }, {
        "opacity": 0.0, 
        "mapDiffuseRepeat": [1, 1], 
        "mapNormalFactor": 1, 
        "depthTest": true, 
        "colorDiffuse": [0.5, 0.5, 0.5], 
        "vertexColors": false, 
        "blending": "NormalBlending", 
        "mapDiffuseAnisotropy": 4, 
        "shading": "Lambert", 
        "transparent": true, 
        "depthWrite": true, 
        "mapNormalRepeat": [1, 1], 
        "mapNormalWrap": ["repeat", "repeat"], 
        "DbgName": "Full_Heart1", 
        "mapNormalAnisotropy": 4, 
        "mapNormal": "Full_Heart_NM.jpg", 
        "mapDiffuseWrap": ["repeat", "repeat"], 
        "mapDiffuse": "Full_Heart_Diffuse.jpg"
    }]

Here it is my code:

var jsonloader = new THREE.JSONLoader( manager ); 
jsonloader.load( jsonFileName, function( geometry, materials ) { 
    mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials)); 
    scene.add( mesh ); 
} );

Here it is my screen shot:

Description of the problem

Three.js version

• Dev
• r82
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• Linux
• Android
• IOS

Hardware Requirements (graphics card, VR Device, ...)

[IamRizban]

Hi @mrdoob ,
After spending a lot of time, i have understood that the json file, exported by maya exporter will not support multiple texture and animation with current three.js (r82). So please, can anyone suggest me another way to render & play 3D animated maya models on web using three.js.

[IamRizban]

Hi @mrdoob
Any update in maya exporter plugin', because it is not exporting json file into required format for three.js (r82). Like value of opacity is setting 0 instead of 1 in json file. So there might be other things which are missing during export.
To check exported json, I have attached a .txt file link above. Please verify that it is exporting correct or not.
Thanks

[mrdoob]

/ping @ascloutier

[ascloutier]

The latest plugin code on the dev branch should have working transparency. From what I can tell it should also be in the r82 release. I can look into it again. The values in your file definitely look wrong, but with out seeing the maya file it's hard to know for sure where the problem is.

I will say that, while I've managed to make some improvements, the maya plugin is still not in very good shape. I would like to rewrite it from scratch but I'm not going to be able to even start that until the new year and I'm not exactly sure when. Until that happens, animation doesn't seem like it will work. In the way it was originally written I've never been able to successfully export animations.

The person (people) who wrote the Blender plugin did a much better job there than was done on the Maya plugin. You may have more luck exporting from Blender until I can (hopefully) get around to creating a new Maya plugin.

[IamRizban]

Hi @ascloutier
Thanks for your reply, you terminated my confusion. Now i will go with Blender Plugin.
Also i will keep an eye for your new release of Maya Exporter Plugin.

[code-matt]

Just giving this a bump, I tried adding my own tracks to threeJsFileTranslator.py with startFrame and endFrame and name. Then going through in JS after and create the AnimationAction/AnimationClips/AnimationTracks for each node by pulling them out of the one animations array the plugin gives you now in the export.

It's really complicated though and had to resort to running my models through Blender.

        animGroup = cmds.ls( 'animations', ap=True )[0]
        animations = cmds.listRelatives(animGroup, c=True)
        for animation in animations:
            self.animTracks.append({
                "name": animation,
                "start": cmds.getAttr(animation + '.startFrame'),
                "end": cmds.getAttr(animation + '.endFrame')
            })

This part worked at least. I was using empty group objects nested under one called animations that lived in the root. The nested groups had the attributes startFrame, endFrame added, the name of the node as the AnimationAction name.

Using the newer Maya versions 'Anim' tab would be a much better option. Though, having them all on one timeline and nodes like these would not be the end of the world and actually more straight forward in a way. That is how Torque did it anyways :)

[samiasultan]

hi
i uploaded model in blender and used three.js plugin in blender to convert it into json file. but it does not appear in web page. (black screen). i used three.js for this purpose. Please help me out.
Here is my code.

<html>
<head>
<script src="three.js"></script>
<script src="three.min.js"></script>
</head>
<body>
<script>
var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.01, 1000 );
	camera.position.z = 1;

	scene = new THREE.Scene();
  
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setClearColor(0*000000);
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
	
	var light= new THREE.AmbientLight(0*ffffff , 0.5);
	scene.add(light);
	
	var light2= new THREE.PointLight(0*ffffff , 0.5);
	scene.add(light2);
	
	var loader= new THREE.JSONLoader();
	loader.load('untitled.json', handle_load);
	
	function handle_load(geometry, material){
	   var mesh= new THREE.mesh(geometry, material);
	   scene.add(mesh);
	   mesh.position.z = -10;
	   
	}
	
	function render(){
	   renderer.render(scene, camera);
	   requestAnimationFrame(render);
	}
	
	render();
}


</script>

</body>
</html>

[Mugen87]

@samiasultan Please don't post your help request here. Use the forum or stackoverflow instead.