Three.js - possible to use JSON to declare objects?

Question

I'm trying to decide on the best Javascript 3D library for my project.

I like Three.js a bit more than Scene.js, but the coding style of Scene.js seems more efficient, because I need to create about 100 objects on the fly, and this would mean declaring hundreds of variables with Three.js.

In Three.js it seems that for each different object you need to define variables and add them to the scene, like this :

var renderer = new THREE.WebGLRenderer();
var camera =
  new THREE.PerspectiveCamera(
    VIEW_ANGLE,
    ASPECT,
    NEAR,
    FAR);

var scene = new THREE.Scene();

var sphere = new THREE.Mesh(

  new THREE.SphereGeometry(
    50,
    16,
    16),

  sphereMaterial);

scene.add(sphere);

while in Scene.js, objects are created in a JSON-like structure, like this :

var scene = SceneJS.createScene({
    nodes:[
        {
            type:"material",
            color: { r: 0.3, g: 0.3, b: 1.0 },

            nodes:[
                {
                    type: "rotate",
                    id: "myRotate",
                    y: 1.0,
                    angle: 0,

                    nodes: [
                        {
                            type:"geometry",
                            source:{
                                type:"teapot"
                            }
                        }
                    ]
                }
            ]
        }
    ]
});

Now my question is, if it's possible to use a more JSON-like coding style with Three.js as well?

I already found out about THREE.JSONLoader, but since Three.js doesn't have very good documentation, I find it very hard to discover if this would be right for me. It seems to be more aimed at converted models from 3D-software, but I really need to build the objects myself.

Answer 1

Yes you can use JSON to define geometries in Three.js. You can parse JSON directly like this (untested, but at least the idea is there):

    var json = { .... }; // your JSON geometry, not as string but already parsed object 
    var loader = new THREE.JSONLoader();
var result = loader.parse(json, texturePath);
    var mesh = new THREE.Mesh(result.geometry, result.materials);

This can be used to define only geometries (and materials).

I agree that the documentation is sparse. Fortunately all Three.js JSON formats are pretty much human readable. You can check existing example models or take a look at https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3.1 for geometry JSON format to use with JSONLoader.

For complex scene hierarchies (multiple geometries, lights etc) you can use the apparently undocumented ObjectLoader JSON format pretty much in a similar fashion as the JSONLoader format. For checking out the ObjectLoader JSON format, I suggest reading the source at src/loaders/ObjectLoader.js and/or generating sample files using http://threejs.org/editor/ (File->Export Scene / Object)

Answer 2

You could take a look at GLGE's 'Quick Notation': http://www.glge.org/ (I've not looked deeply into that BTW, so I'm not sure if it fits your needs).

If you use SceneJS, be sure first that its features cover your requirements, because it has a narrower feature set than THREE.js, being intended more for high detail visualisation rather than for a wide range of rendering effects.

If I were you though, I would jump in and write your own open source JSON layer for THREE.js, starting with what you need. I'm sure you would get contributors filling in the rest soon enough.