How to represent geometry with values read from JSON file in Three.js?

Question

I've large group of five vertices in JSON which needs to represented as cone geometry shown below.

Five vertices: {(x,y,z) , (a,b,c), (d,e,f), (g,h,i), (j,k,l) }, {(x1,y1,z1) , (a1,b1,c1), (d1,e1,f1), (g1,h1,i1), (j1,k1,l1) }..............

NOTE: These cordinates are canvas cordinates.

Here is the diagram:

Cone

where these vertex values are read from JSON file and needed to make a geometry. These vertex values are unique to every single geometry.

AFAIK, how to use three.js pre-defined geometry and custom geometry like below code. My question is how to represent the geometry using the values read from JSON file?

    var cone;
    var geo = new THREE.Geometry();

    var meshMaterial = new new THREE.MeshLambertMaterial( { color: 0xffffff });

    geo.vertices.push( new THREE.Vector3(   0, 0, 0));
    geo.vertices.push( new THREE.Vector3( -0.5, 0.5, 1));
    geo.vertices.push( new THREE.Vector3( 0.5, 0.5, 1));
    geo.vertices.push( new THREE.Vector3( -0.5, -0.5, 1));
    geo.vertices.push(new THREE.Vector3( 0.5,-0.5, 1));

   geo.faces.push( new THREE.Face3(0,1,2));
   geo.faces.push( new THREE.Face3(4,3,0));
   geo.faces.push( new THREE.Face3(3,1,0));
   geo.faces.push( new THREE.Face3(0,2,4));
   geo.faces.push( new THREE.Face3(2,1,4));
   geo.faces.push( new THREE.Face3(1,3,4));

   geo.computeFaceNormals();
   cone = new THREE.Mesh(geo, meshMaterial);
   cone.doubleSided = true;
   cone.overdraw = true;

   //And finally we need (x,y,z) to set the position of this geometry to display on the canvas
   cone.position.set(x,y,z);

I've tried a lot, how to create geometry using values read from other files , But I didn't find anything, which initated me to post this question.

P.S: Among these values {(x,y,z) , (a,b,c), (d,e,f), (g,h,i), (j,k,l) }, (x,y.z) should be position of the tip of the cone on the canvas while representing the cone.

Tezcan · Accepted Answer · 2013-01-10 08:53:55Z

1

Check out the 81.214.75.32:8181/admin (wait for autoloding scene for a couple of seconds) see the page source and open FileManager.js included on top. Examine "importScene" function. That will help you alot with loading geometry data from a file and create models from vertice, normals, textures info.

answered Jan 10, 2013 at 8:53

Tezcan

7082 gold badges7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hisham Over a year ago

hi, I am facing the similar problem in Three.js I also need to read the positions from local JSON file and populate them in Three JS Buffer Geometry_Point, could you please share your solution or can answer my question here: stackoverflow.com/questions/38112211/…

Collectives™ on Stack Overflow

How to represent geometry with values read from JSON file in Three.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related