how to import json and rendering in three.js

Question

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.14213562373…

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.

how to import json and rendering in three.js

Solution

Problem