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

Question

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?

M - · Accepted Answer · 2018-05-21 21:24:14Z

2

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);

edited May 21, 2018 at 21:24

answered May 21, 2018 at 21:15

M -

28.7k12 gold badges56 silver badges93 bronze badges

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

3 Comments

pailhead Over a year ago

Option two should be the proposed option.

lpuccio Over a year ago

The parse method did the trick, thanks. I knew there must have been something I was missing. Is there a similar method I can use for TextureLoader? The FileSystem API only returns the encoded URL and not and image I can pass to the THREE.Texture contructor.

M - Over a year ago

You'll need to create the image yourself: var image = document.createElement('img'); image.src = encodedURL; var tex = new THREE.Texture(image);

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related