tfe Homepage


Threejs - two cubes moving

Well, i am starting to have something!

I can now initiate instances of cubes, and bind them to different keys.

To have some hits about how it is done, you can read the sources, sure, but here is the big part:

The server is serving the client commands, wich looks like:

    { "command": "add", "id":"floor","type":"plane", "position": [ 0,0,0],  "rotation":[0,0,0], "width":200, "height":200, "color": "#b0b0b0" },

    { "command": "add", "id":"floorgrid","type":"grid", "position": [ 0,0,0], "rotation":[90,0,0], "divisions": 20,  "size":200, "color": "#000000" },

    { "command": "loadjs", "file":"js/characters/square.js"},

    { "command": "loadjs", "file":"levels/puzzle/logic.js"}

The square.js file define the "squre" object, wich is the moveable cube.

And on the logic.js  file, the magic!

    var square1 = new square();
    square1.init({x :0, y:0 });
    // Bindings: should go elsewhere

    ux.bind('a', square1.trigger_move.bind(this,'left'));
    ux.bind('d', square1.trigger_move.bind(this,'right'));
    ux.bind('w', square1.trigger_move.bind(this,'top'));
    ux.bind('s', square1.trigger_move.bind(this,'bottom'));

    var square2 = new square();
    square2.init({x :1, y:0 });
    ux.bind('h', square2.trigger_move.bind(this,'left'));
    ux.bind('l', square2.trigger_move.bind(this,'right'));
    ux.bind('k', square2.trigger_move.bind(this,'top'));
    ux.bind('j', square2.trigger_move.bind(this,'bottom'));