Search code examples
javascriptjsonthree.jsblendermaya

Import a 3d object on threejs with JSONLoader


i'm trying to use a very simple 3dobject i made with Maya in my threejs project using jsonloader but i have a few problems. The ojbect is composed by a few different material (Lambert and Phong) and different colors. To create the .json file i use Maya to create a .obj then Blender to make the .json and everything seems fine but when i try to import it loading HIS material i can't even load the model, instead if i use a random material while loading i'm able to correctly load the model.

    var loader = new THREE.JSONLoader();
    loader.load("http://localhost:8000/object/planev2.json", function 
            (mygeo,mymat){
            var mat =  mymat[0];
            mymesh  = new THREE.Mesh(mygeo,mat);
            mymesh.scale.set(50,50,50); 
            scene.add( mymesh );
    });

TL:TR - Is possible to load directly from a .json an object made by different materials ?


Solution

  • Try the following code:

    var material = new THREE.MeshPhongMaterial( {
                            color: 0xdddddd,
                            specular: 0x222222,
                            shininess: 35,
                            map: THREE.ImageUtils.loadTexture( "tex/map1.jpg" ),
                            specularMap: THREE.ImageUtils.loadTexture( "tex/map2.jpg" ),
                            normalMap: THREE.ImageUtils.loadTexture( "tex/map3.jpg" ),
                            normalScale: new THREE.Vector2( 1, 1 ),
                            morphTargets: true
                        } );
    
                        loader = new THREE.JSONLoader( );
    
                        loader.load( "mesh.json", function( geometry ) {
    
                            mesh = new THREE.Mesh( geometry, material );
                            mesh.name = "male";
    
                            scene.add(mesh);
    
                        });
    
                        loader.onLoadComplete = function () {
    
                            console.log("Loading is complete!");
    
                        }