BasePlane.js

/**
 * Created by aghassaei on 1/31/15.
 */


BasePlane = Backbone.Model.extend({

    defaults: {
        zIndex: 0,
        mesh: [],
        dimX: 100,
        dimY: 100,
        material: new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.2, wireframe:true, side:THREE.DoubleSide}),
        currentScene: "default",
        allScenes: {default:"Default", "mars":"Mars"}
    },

    initialize: function(options){

        //bind events
        this.listenTo(this, "change:currentScene", this._renderForCurrentScene);
        this.listenTo(this, "change:zIndex", this._renderZIndexChange);

        //draw mesh
        this.set("mesh", this._makeBasePlaneMesh());
        this.updateScale(options.scale);
        this._showMesh();

    },

    _renderZIndexChange: function(){
        var zIndex = this.get("zIndex");
        var scale = this.get("mesh").scale.z;
        _.each(this.get("mesh"), function(mesh){
            mesh.position.set(0, 0, zIndex*scale*2/Math.sqrt(6));
        });
        window.three.render();
    },

    _renderForCurrentScene: function(){
    },

    updateScale: function(scale){
        _.each(this.get("mesh"), function(mesh){
            mesh.scale.set(scale, scale, scale);
        });
    },

    _showMesh: function(){
        var self = this;
        _.each(this.get("mesh"), function(mesh){
            window.three.sceneAdd(mesh, self._checkIsHighlightable(mesh));
        });
        window.three.render();
    },

    _removeMesh: function(){
        var self = this;
        _.each(this.get("mesh"), function(mesh){
            window.three.sceneRemove(mesh, self._checkIsHighlightable(mesh));
        });
        window.three.render();
    },

    _checkIsHighlightable: function(mesh){
        if (mesh.type == "Mesh") return "basePlane";
        return null;
    },

    destroy: function(){
        this.stopListening();
        this.set("zIndex", null, {silent:true});
        this._removeMesh();
        this.set("mesh", null, {silent:true});
        this.set("material", null, {silent:true});
        this.set("unitGeometry", null, {silent:true});
        this.set("dimX", null, {silent:true});
        this.set("dimY", null, {silent:true});
    }

});



///////////////////////////////////////////////////////////////////////////////////
/////////////////////////////OCTA FACE/////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////

OctaBasePlane = BasePlane.extend({

    _makeBasePlaneMesh: function(){

        var geometry = new THREE.Geometry();
        geometry.dynamic = true;
        geometry.vertices = this._calcOctaFaceVertices(0.0);
        var faces = geometry.faces;

        var dimX = this.get("dimX");
        var dimY = this.get("dimY");

        var currentOffset = 0;
        for (var j=-dimX;j<=dimX;j++){
            for (var i=-dimY;i<=dimY;i++){

                currentOffset++;
                if (j == -dimX || i == -dimY) continue;

                if (Math.abs(j)%2==1){
//                        faces.push(new THREE.Face3(currentOffset-1, currentOffset-2, currentOffset-2-2*baseDim));
                    faces.push(new THREE.Face3(3*currentOffset-4, 3*currentOffset-8-6*dimY, 3*currentOffset-6-6*dimY));//pt, base, base
                } else {
                    faces.push(new THREE.Face3(3*currentOffset-1, 3*currentOffset-8-6*dimY, 3*currentOffset-6-6*dimY));//pt, base, base
//                        faces.push(new THREE.Face3(currentOffset-1, currentOffset-2, currentOffset-3-2*baseDim));
                }

            }

        }

        geometry.computeFaceNormals();
        return [new THREE.Mesh(geometry, this.get("material"))];
    },

    _calcOctaFaceVertices: function(colSep){

        var vertices = [];
        var latticeScale = 1+2*colSep;
        var triangleHeight = latticeScale/2*Math.sqrt(3);
        var dimX = this.get("dimX");
        var dimY = this.get("dimY");

        var baseVertOffset = colSep/Math.sqrt(3);
        var pointVertOffset = 2*baseVertOffset;
        var horizontalOffset = colSep;

        for (var j=-dimX;j<=dimX;j++){
            for (var i=-dimY;i<=dimY;i++){

                var xOffset = 0;
                if (Math.abs(j)%2==0) {
                } else {
                    xOffset = 1/2*latticeScale;
                }

                vertices.push(new THREE.Vector3(i*latticeScale + xOffset - horizontalOffset, j*triangleHeight + baseVertOffset, 0));
                vertices.push(new THREE.Vector3(i*latticeScale + xOffset + horizontalOffset, j*triangleHeight + baseVertOffset, 0));
                vertices.push(new THREE.Vector3(i*latticeScale + xOffset, j*triangleHeight - pointVertOffset, 0));

            }

        }
        return vertices;
    },

    updateColSeparation: function(colSep){
        var geometry = this.get("mesh")[0].geometry;
        geometry.vertices = this._calcOctaFaceVertices(colSep);
        geometry.verticesNeedUpdate = true;
    }

});

///////////////////////////////////////////////////////////////////////////////////
/////////////////////////////CUBE GRID/////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////

SquareBasePlane = BasePlane.extend({

    _makeBasePlaneMesh: function(){

        var dimX = this.get("dimX");
        var dimY = this.get("dimY");

        var geometry = new THREE.Geometry();

        for ( var i = - dimX; i <= dimX; i += 1 ) {
            geometry.vertices.push( new THREE.Vector3(-dimX, i, 0));
            geometry.vertices.push( new THREE.Vector3(dimX, i, 0));
            geometry.vertices.push( new THREE.Vector3(i, -dimX, 0));
            geometry.vertices.push( new THREE.Vector3(i, dimX, 0));

        }

        var planeGeometry = new THREE.Geometry();
        planeGeometry.vertices.push( new THREE.Vector3(-dimX, -dimX, 0));
        planeGeometry.vertices.push( new THREE.Vector3(dimX, -dimX, 0));
        planeGeometry.vertices.push( new THREE.Vector3(-dimX, dimX, 0));
        planeGeometry.vertices.push( new THREE.Vector3(dimX, dimX, 0));
        planeGeometry.faces.push(new THREE.Face3(0, 1, 3));
        planeGeometry.faces.push(new THREE.Face3(0, 3, 2));
        planeGeometry.computeFaceNormals();

        return [new THREE.Mesh(planeGeometry, new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.0, side:THREE.DoubleSide})),
            new THREE.Line(geometry, new THREE.LineBasicMaterial({color:0x000000, transparent:true, linewidth:1, opacity:this.get("material").opacity}), THREE.LinePieces)];
    }

});