CODEWITHSUNDEEP
three.js
lpuccio
lpuccio

Reputation: 103

How to create a three.js Geometry from a JSON object WITHOUT using JSONLoader

I'm creating a scene where objects are brought in from JSON files (exported from blender) and added to the scene. Since this is going to be a Cordova app, I can't use JSONLoader (or any XHR resource).

I'm able to get the JSON file using the FileSystem API, but I can't figure out how to create a THREE.Geometry object from the JSON, since the Geometry constructor does not take any arguments. (normally, the finished Geometry object is provided automatically by the JSONLoader callback function). I can't help but feel there's something obvious I'm missing. Any suggestions?

Upvotes: 3

Views: 2161

Answers (1)

M -
M -

Reputation: 28462

Option 1:

You can build your own THREE.Geometry object by manually adding its attributes. The docs give you a quick example of how to add vertices and faces:

var geometry = new THREE.Geometry();

geometry.vertices.push(
    new THREE.Vector3( -10,  10, 0 ),
    new THREE.Vector3( -10, -10, 0 ),
    new THREE.Vector3(  10, -10, 0 )
);

geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );

geometry.computeBoundingSphere();

With this example, you could write your own iterators, and create your Geometry with the data in your JSON file.

Option 2:

The above process is probably going to get too verbose if you need normals, uvs, colors, etc. So instead of re-writing it manually, just use the JSONLoader's parsing attributes, without using it to load the data. This is possible via the THREE.JSONLoader.parse() method:

// Use whatever method you're using to fetch the data
var JSONData = getJSONSomehow(); 

// Now we only use JSONLoader for parsing 
var JSONParser = new THREE.JSONLoader();
var myObject3D = JSONParser.parse(JSONData);
scene.add(myObject3D);

Upvotes: 2

Related Questions