Question

122

how to import json and rendering in three.js

rated 0 times [ 129] [ 7] / answers: 1 / hits: 17692 / 10 Years ago, sat, february 22, 2014, 12:00:00

Hi everyone i write code for importing a json file and rendering it with three.js i export the json file from three.js editor
it doesnt show any error in console

window.onload = function(){

var 

    shapeObjectUrl = test.json,

    scene = new THREE.Scene(),

    camera = new     THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000),

    renderer = new THREE.WebGLRenderer(),

    loader = new THREE.JSONLoader();



renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);



loader.load( shapeObjectUrl, 

    function ( geometry, materials ) {

        console.log(geometry, materials);

        var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );

        scene.add( mesh );

        console.log(mesh);

        render();

});



camera.position.z = 5;



var render = function () {

    requestAnimationFrame(render);

    renderer.render(scene, camera);

};



};

Json file:

{

metadata: {

    version: 4,

    type: geometry,

    generator: GeometryExporter

},

vertices: [0,50,20,14.14213562373095,50,14.142135623730951,20,50,1.2246063538223773e-15,14.142135623730951,50,-14.14213562373095,2.4492127076447545e-15,50,-20,-14.14213562373095,50,-14.142135623730955,-20,50,-3.673819061467132e-15,-14.142135623730955,50,14.142135623730947,-4.898425415289509e-15,50,20,0,-50,20,14.14213562373095,-50,14.142135623730951,20,-50,1.2246063538223773e-15,14.142135623730951,-50,-14.14213562373095,2.4492127076447545e-15,-50,-20,-14.14213562373095,-50,-14.142135623730955,-20,-50,-3.673819061467132e-15,-14.142135623730955,-50,14.142135623730947,-4.898425415289509e-15,-50,20,0,50,0,0,-50,0],

normals: [0.3826834323650897,0,0.9238795325112866,0,0,1,0.7071067811865475,0,0.7071067811865476,0.9238795325112866,0,0.3826834323650899,1,0,6.123031769111886e-17,0.9238795325112866,0,-0.38268343236508967,0.7071067811865476,0,-0.7071067811865475,0.3826834323650899,0,-0.9238795325112866,1.2246063538223773e-16,0,-1,-0.3826834323650895,0,-0.9238795325112868,-0.7071067811865474,0,-0.7071067811865476,-0.9238795325112866,0,-0.38268343236508984,-1,0,-1.836909530733566e-16,-0.9238795325112868,0,0.3826834323650895,-0.7071067811865478,0,0.7071067811865475,-0.38268343236508995,0,0.9238795325112866,-2.4492127076447545e-16,0,1,0,1,0,0,-1,0],

uvs: [[0,1,0,0,0.125,1,0.125,0,0.25,1,0.25,0,0.375,1,0.375,0,0.5,1,0.5,0,0.625,1,0.625,0,0.75,1,0.75,0,0.875,1,0.875,0,1,1,1,0]],

faces: [56,0,9,1,0,1,2,0,1,1,2,56,9,10,1,1,3,2,0,1,2,2,56,1,10,2,2,3,4,3,2,2,4,56,10,11,2,3,5,4,3,2,4,4,56,2,11,3,4,5,6,5,4,4,6,56,11,12,3,5,7,6,5,4,6,6,56,3,12,4,6,7,8,7,6,6,8,56,12,13,4,7,9,8,7,6,8,8,56,4,13,5,8,9,10,9,8,8,10,56,13,14,5,9,11,10,9,8,10,10,56,5,14,6,10,11,12,11,10,10,12,56,14,15,6,11,13,12,11,10,12,12,56,6,15,7,12,13,14,13,12,12,14,56,15,16,7,13,15,14,13,12,14,14,56,7,16,8,14,15,16,15,14,14,16,56,16,17,8,15,17,16,15,14,16,16,56,0,1,18,0,2,3,17,17,17,17,56,1,2,18,2,4,5,17,17,17,17,56,2,3,18,4,6,7,17,17,17,17,56,3,4,18,6,8,9,17,17,17,17,56,4,5,18,8,10,11,17,17,17,17,56,5,6,18,10,12,13,17,17,17,17,56,6,7,18,12,14,15,17,17,17,17,56,7,8,18,14,16,17,17,17,17,17,56,10,9,19,3,1,0,18,18,18,18,56,11,10,19,5,3,2,18,18,18,18,56,12,11,19,7,5,4,18,18,18,18,56,13,12,19,9,7,6,18,18,18,18,56,14,13,19,11,9,8,18,18,18,18,56,15,14,19,13,11,10,18,18,18,18,56,16,15,19,15,13,12,18,18,18,18,56,17,16,19,17,15,14,18,18,18,18]

}

i appreciate any help

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

answered 10 Years ago miles · Accepted Answer

The method you are using is right except for some minor things like, in loader.load function's call back you are trying to access material also but its not included in the JSON .

Now I used your code and was successfully able to load the JSON object, so there is nothing wrong with that, except that you are setting camera position to 5 which just makes the loaded model out of the view.

So you can reposition the model like this

        var loader = new THREE.JSONLoader();

        loader.load( 'models/jsonModel.json', function ( geometry ) {

        var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );



                        mesh.position.x =500;

                        mesh.position.y =100;

                        mesh.position.z =500;

        scene.add( mesh );



        });

or set the camera position to some other position.

You can also use OrbitControls to instead.

Including the above mentioned things I have created a sample code here, you can look are lines 138 and 62, to understand better.