CODEWITHSUNDEEP
three.js
three.jsaddict
three.jsaddict

Reputation: 305

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

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.

Upvotes: 0

Views: 861

Answers (1)

Tezcan
Tezcan

Reputation: 708

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.

Upvotes: 1

Related Questions