Three.js - include mesh data in code

Question

I have this Three.js code with JSON loader loading mesh from file /models/mountain.json:

var Three = new function () {
    this.scene = new THREE.Scene()

    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
    this.camera.position.set(20, 52, 20);
    this.camera.rotation.order = 'YXZ';
    this.camera.rotation.y = -Math.PI / 4;
    this.camera.rotation.x = Math.atan(-1 / Math.sqrt(2));
    this.camera.scale.addScalar(1);

    this.renderer = new THREE.WebGLRenderer()
    this.renderer.setSize(window.innerWidth, window.innerHeight);

    var ground = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(436, 624),
        new THREE.MeshLambertMaterial({color: '#808080'}));
    ground.rotation.x = -Math.PI / 2; //-90 degrees around the x axis

    this.scene.add(ground);

    var light = new THREE.PointLight(0xFFFFDD);
    light.position.set(-1000, 1000, 1000);
    this.scene.add(light);

    var loader = new THREE.JSONLoader();
    this.loadMountain = function (x, y) {
        loader.load('/models/mountain.json', Three.getGeomHandler('#808080', x, y, 1))
    }
    this.loadFields = function () {
        for (var i=0;i<4000;i++) {
            Three.loadMountain(x, y)
        }
    }

    this.getGeomHandler = function (color, x, y, scale) {
        return function (geometry) {
            var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: color}));
            mesh.scale.set(scale, scale, scale);
            mesh.position.set(x, 0, y);
            Three.scene.add(mesh);
        };
    }

    this.init = function () {
        $('body').append(Three.renderer.domElement);
        Three.loadFields()
        Three.render();
    }
    this.render = function () {
        requestAnimationFrame(Three.render);
        Three.renderer.render(Three.scene, Three.camera);
    };
}

$(document).ready(function () {
    Three.init();
});

and this is /models/mountain.json content:

{

    "metadata": {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.7 Exporter",
        "vertices"      : 39,
        "faces"         : 62,
        "normals"       : 36,
        "colors"        : 0,
        "uvs"           : [],
        "materials"     : 1,
        "morphTargets"  : 0,
        "bones"         : 0
    },

        "scale" : 1.000000,

        "vertices" : [2.47941e-07,-1.13504e-07,-2.59668,-2.41031,-6.2081e-08,-1.42025,-2.2107,4.55942e-08,1.04307,2.16045,1.84802,0.183901,-0.427399,1.11956e-07,2.56126,1.23588,9.98242e-08,2.28371,2.50387,4.55942e-08,1.04307,2.58781,9.37308e-09,0.214431,2.17385,-0.0483214,-1.42025,1.40026,-0.0483214,-1.74566,1.50645e-07,2.13114,-1.9421,-0.6306,2.13114,-1.52968,-1.04238,2.48498,-1.06715,-1.23632,3,-0.856474,-1.5574,2.62306,-0.476759,-1.68478,2.74775,0.160378,-1.20001,3,0.780135,-1.14654,3,1.41015,-0.31966,3,1.91562,0.31966,2.48498,1.46763,0.92434,3,1.70803,0.754272,2.73835,0.751422,1.90443,2.61032,0.780134,1.52632,2.76301,0.160377,1.78144,2.69402,-0.47676,1.9564,3,-1.06223,0.807846,2.13114,-1.68984,1.32727,3.09213,-1.10549,1.13568,1.38919,-1.21096,1.98255,0.969716,-1.07503,0.529022,2.81989,0.43993,0.969891,3.32801,-1.43745,-0.39848,2.2361,-1.12285,-1.00579,1.31316,2.27174,-0.789081,1.31316,2.34614,0.888122,0.684588,2.17543,0.568656,2.07869,1.615,2.13863,1.49103,1.32889,2.52981,0.924307,0.978923],
        "faces"    : [34,0,11,10,0,0,1,2,34,1,13,12,0,3,4,5,34,0,12,11,0,0,5,1,34,0,1,12,0,0,3,5,34,38,3,37,0,6,7,8,34,9,31,28,0,9,10,11,34,0,10,26,0,0,2,12,34,9,26,31,0,9,12,10,34,9,0,26,0,9,0,12,35,18,17,33,34,0,13,14,15,16,35,37,3,23,22,0,8,7,17,18,34,29,27,25,0,19,20,21,34,28,31,27,0,11,10,20,34,29,28,27,0,19,11,20,34,12,19,20,0,5,22,23,34,5,6,20,0,24,25,23,34,6,38,37,0,25,6,8,34,37,22,21,0,8,18,26,34,30,27,31,0,26,20,10,34,6,37,20,0,25,8,23,34,30,31,32,0,26,10,27,34,37,21,20,0,8,26,23,34,30,32,26,0,26,27,12,34,21,30,20,0,26,26,23,34,11,12,20,0,1,5,23,34,26,10,11,0,12,2,1,34,30,11,20,0,26,1,23,34,30,26,11,0,26,12,1,34,20,35,5,0,23,28,24,34,20,19,36,0,23,22,28,34,20,36,35,0,23,28,28,35,6,7,3,38,0,25,29,7,6,34,7,23,3,0,29,17,7,34,29,25,24,0,19,21,30,34,7,24,23,0,29,30,17,34,7,8,29,0,29,31,19,34,7,29,24,0,29,19,30,34,18,36,19,0,13,28,22,34,4,5,35,0,32,24,28,34,18,35,36,0,13,28,28,34,18,34,4,0,13,16,32,34,18,4,35,0,13,32,28,35,13,14,15,16,0,4,33,33,34,34,30,25,27,0,26,21,20,34,23,24,25,0,17,30,21,34,21,22,23,0,26,18,17,34,30,21,25,0,26,26,21,34,21,23,25,0,26,17,21,35,8,9,28,29,0,31,9,11,19,34,26,32,31,0,12,27,10,34,2,16,15,0,35,34,33,34,14,13,1,0,33,4,3,34,14,2,15,0,33,35,33,34,14,1,2,0,33,3,35,34,2,17,16,0,35,14,34,34,4,34,33,0,32,16,15,34,2,33,17,0,35,15,14,34,2,4,33,0,35,32,15,34,16,12,13,0,34,5,4,34,18,19,12,0,13,22,5,34,16,17,18,0,34,14,13,34,16,18,12,0,34,13,5],
        "uvs"      : [],
        "normals"  : [0.094028,0.298624,-0.949705,-0.162755,0.939238,-0.302133,0.228248,0.832942,-0.504044,-0.822016,0.351848,-0.447707,-0.253456,0.911466,-0.323923,-0.004059,0.913785,-0.40614,0.788598,0.576983,0.21247,0.952086,0.29432,-0.082797,0.625996,0.719138,0.301553,0.474441,0.29017,-0.83105,0.255501,0.796655,-0.547746,0.441328,0.166265,-0.881802,0.221656,0.483047,-0.847041,0.192999,0.761406,0.618824,-0.352977,0.778008,0.5197,-0.653584,0.252663,0.713401,-0.29136,0.293313,0.91052,0.688314,0.722556,0.063967,0.612629,0.761834,0.210364,0.718711,0.280313,-0.63625,0.370495,0.893033,-0.255287,0.629627,0.578692,-0.518326,0.229896,0.680258,0.695944,-0.064241,0.589251,0.805353,0.205145,0.606586,0.768059,0.734519,0.631458,0.24839,0.211341,0.910367,0.355693,-0.135533,0.925748,-0.352916,-0.03061,0.231269,0.972381,0.975982,0.184362,-0.11594,0.694266,0.717338,0.058412,0.712027,0.350871,-0.608173,-0.201483,0.259865,0.944365,-0.820185,0.572069,-0.001556,-0.322733,0.944334,0.063509,-0.922117,0.223151,0.315958],

        "skinIndices"  : [],
        "skinWeights"  : [],
        "morphTargets" : [],

        "bones"      : [],
        "animations" : [],

        "colors"    : [],
        "materials" : [
            {
                "DbgColor": 15658734,
                "DbgIndex": 0,
                "DbgName": "default",
                "vertexColors": false
            }
        ]


}

Is it possible to use this content in code as a variable and add it to scane?

Take a look at the source of JSONLoader in src/loaders. Look at the THREE.JSONLoader.prototype.parse() method. The first argument is the json content. — gaitat
– gaitat, Commented Jan 16, 2015 at 20:42

WestLangley · Accepted Answer · 2015-01-17 05:04:35Z

4

Here is the pattern to follow if you want to load a model by parsing a JSON data structure.

Modify your mountain.json file and give your data structure a name.

var mountain = {

    "metadata": {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.7 Exporter",

        ... etc ...

}

Include the following code in your source:

<script src="mountain.js"></script>

Now you can load your model like so:

var loader = new THREE.JSONLoader();

var model = loader.parse( mountain );

mesh = new THREE.Mesh( model.geometry, model.materials[ 0 ] );

scene.add( mesh );

three.js r.70

answered Jan 17, 2015 at 5:04

WestLangley

105k11 gold badges288 silver badges285 bronze badges

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

4 Comments

Bartek Kosa Over a year ago

no need to use fallback function like in loader.load()?

WestLangley Over a year ago

loader.load() is asynchronous. parse() is not.

Bartek Kosa Over a year ago

It works realy great but there is one problem - I have to edit every file and add variable name to JSON data and I have to do it every time I update mesh via Blender export. Is it possible to handle this programatically?

fmacdee Over a year ago

If you have one directory for all of your blender exports and another for the files that are being read in using the script tag then you could create a simple python script to prepend the "var varname =" text into each file and output it into your js directory. It would be easiest if your file names in the blender export directory were the variable names you wanted added to the files themselves so that could be automated. Otherwise you will have to write one line per file that you want converted in the python script to name the filename and the variable name.

Collectives™ on Stack Overflow

Three.js - include mesh data in code

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related