pushPullMeshView.js

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

//this is a parent class for other threeJS VCs that allows push and pull scale changes in the threeJS scene

PushPullMeshView = Backbone.View.extend({

    el: "#threeContainer",

    events: {
    },

    boundsBox: null,
    boxHelper: null,
    currentHighlightedFaces:[],
    shouldReceiveHighlight: true,
    highlightPlane: null,

    initialize: function(options){

        this.three = options.three;

        //bind events
        this.listenTo(this.model, "change:bounds change:scale change:orientation", this.updateBounds);

        this.drawBounds();
//        this.createHighlightPlane();
    },

    drawBounds: function(){
        this.boundsBox = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100),
            new THREE.MeshLambertMaterial({color:0x0000ff, shading:THREE.FlatShading, transparent:true, opacity:0.0, vertexColors:THREE.FaceColors}));
        this.boxHelper = new THREE.BoxHelper(this.boundsBox);

        this.boxHelper.material.color.set(this.defaultColor);
//        this.three.sceneAdd(this.boxHelper);
//        this.three.sceneAdd(this.boundsBox);
        this.updateBounds();
    },

    updateBounds: function(){
        var bounds = this.model.get("bounds");//this has not been scaled or rotated, as is when model was first imported
        var max = bounds.max.toArray();
        var min = bounds.min.toArray();
        var size = numeric.sub(max, min);
        var translation = numeric.mul(numeric.add(max, min), 0.5);
        var geometry = new THREE.BoxGeometry(size[0], size[1], size[2]);
        geometry.applyMatrix(new THREE.Matrix4().makeTranslation(translation[0], translation[1], translation[2]));
        this.boundsBox.geometry = geometry;
        this.boxHelper.update(this.boundsBox);
        this.render();
    },

//    createHighlightPlane: function(){
//        var squareGeometry = new THREE.Geometry();
//        squareGeometry.vertices.push(new THREE.Vector3());
//        squareGeometry.vertices.push(new THREE.Vector3());
//        squareGeometry.vertices.push(new THREE.Vector3());
//        squareGeometry.vertices.push(new THREE.Vector3());
//        squareGeometry.faces.push(new THREE.Face3(0, 1, 2));
//        squareGeometry.faces.push(new THREE.Face3(0, 2, 3));
//        var squareMaterial = new THREE.MeshBasicMaterial({color:0xffffff, shading:THREE.FlatShading, transparent:true, opacity:0.0, vertexColors:THREE.FaceColors});
//        this.highlightPlane = new THREE.Mesh(squareGeometry, squareMaterial);
//        this.three.sceneAdd(this.highlightPlane);
//    },

    checkHighlight: function(intersections){
        if (intersections.length>0){
            var face = intersections[0].face;
            if (this.currentHighlightedFaces.indexOf(face) != -1) return;//stay the same
            this.setHighlightColor(this.currentHighlightedFaces, 0x0000ff);

            var faceIndex = intersections[0].object.geometry.faces.indexOf(face);
            var face2Index = faceIndex-1;
            if (faceIndex%2==0) face2Index = faceIndex+1;
            this.currentHighlightedFaces = [face, intersections[0].object.geometry.faces[face2Index]];
            this.setHighlightColor(this.currentHighlightedFaces, 0xffffff);

            this.render();
        } else if (this.currentHighlightedFaces.length > 0){
            this.setHighlightColor(this.currentHighlightedFaces, 0x0000ff);
            this.currentHighlightedFaces = [];
            this.render();
        }
    },

    setHighlightColor: function(faces, color){
        _.each(faces, function(face){
            face.color.setHex(color);
        });
        this.boundsBox.geometry.colorsNeedUpdate = true;
//        this.boundsBox.geometry.__dirtyColors = true
//        this.boundsBox.geometry.dynamic = true
    }

});