vive

dependencies/ViveController.js

@@ -60,7 +60,7 @@ THREE.ViveController = function ( id ) {
 	this.update = function () {
 
 		gamepad = findGamepad( id );
-
+		//not working in chrome https://github.com/mrdoob/three.js/issues/9723
 		if ( gamepad !== undefined && gamepad.pose !== undefined ) {
 
 			if ( gamepad.pose === null ) return; // No user action yet

js/3dUI.js

@@ -123,7 +123,6 @@ function init3DUI(globals) {
 
     function hideHighlighters(){
         highlighter1.getObject3D().visible = false;
-        // highlighter2.getObject3D().visible = false;
     }
     
     // globals.threeView.sceneAdd(raycasterPlane);

js/ViveInterface.js

@@ -15,7 +15,10 @@ function initViveInterface(globals){
     $status.html("No device connected.");
     $("#VRoptions").show();
 
-    var mesh = new THREE.Mesh(new THREE.CubeGeometry(0.01,0.01,0.01), new THREE.MeshLambertMaterial({color:0xff0000}));
+    var geo = new THREE.CylinderGeometry(0, 0.05, 0.25, 4);
+    geo.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2));
+    var mesh = new THREE.Mesh(geo, new THREE.MeshLambertMaterial({color:0x444444}));
+    mesh.position.set(0,0,0.125);
     mesh.visible = false;
 
     var controls = new THREE.VRControls(globals.threeView.camera);
@@ -33,37 +36,153 @@ function initViveInterface(globals){
     controller1.add(mesh.clone());
     controller2.add(mesh.clone());
 
+    var controllers = [controller1, controller2];
+    var controllerStates = [false, false];
+
+    //vis
+    var highlighters = [new Node(new THREE.Vector3()), new Node(new THREE.Vector3())];
+    _.each(highlighters, function(highlighter){
+        highlighter.setTransparentVR();
+        globals.threeView.scene.add(highlighter.getObject3D());
+    });
+
+    var nodes = [null, null];
+    var draggingEvent = [false, false];
+    var releaseEvent = [false, false];
     var effect = new THREE.VREffect(globals.threeView.renderer);
 
     connect();
 
+    var yOffset = 1.6;
+    var scale = 0.5;
+
     function connect(){
         WEBVR.getVRDisplay( function ( display ) {
             if (!display) return;
             $status.html("VR device detected.");
             var button = WEBVR.getButton( display, globals.threeView.renderer.domElement );
-            console.log(button);
             $("#VRoptions").html(button);
             var callback = button.onclick;
             button.onclick = function () {
 				globals.vrEnabled = !display.isPresenting;
                 var y = 0;
-                if (globals.vrEnabled) y = 1;
+                if (globals.vrEnabled) y = yOffset;
+                globals.threeView.modelWrapper.scale.set(scale, scale, scale);
                 globals.threeView.modelWrapper.position.set(0,y,0);
-                // var scale = 0.01;
-                // globals.threeView.modelWrapper.scale.set(scale, scale, scale);
+                _.each(controller1.children, function(child){
+                    child.visible = true;
+                });
+                _.each(controller2.children, function(child){
+                    child.visible = true;
+                });
+                setControllerEvents();
                 if (callback) callback();
 			};
         } );
     }
 
+    function setControllerEvents(){
+        controller1.addEventListener('triggerdown', function() {
+            controllerStates[0] = true;
+            draggingEvent[0] = true;
+        });
+        controller2.addEventListener('triggerdown', function() {
+            controllerStates[1] = true;
+            draggingEvent[1] = true;
+        });
+        controller1.addEventListener('triggerup', function() {
+            controllerStates[0] = false;
+            releaseEvent[0] = true;
+        });
+        controller2.addEventListener('triggerup', function() {
+            controllerStates[1] = false;
+            releaseEvent[1] = true;
+        });
+    }
+
     function render(){
         controller1.update();
         controller2.update();
+        checkForIntersections();
         controls.update();
         effect.render( globals.threeView.scene, globals.threeView.camera );
     }
 
+    function checkForIntersections(){
+        for (var i=0;i<2;i++){
+            var object3D = highlighters[i].object3D;
+            var controller = controllers[i];
+            object3D.visible = false;
+            var position = controller.position.clone();
+            position.applyMatrix4(controller.standingMatrix);
+
+            if (controllerStates[i] && nodes[i]){
+                //drag node
+                if (draggingEvent[i]) {
+                    nodes[i].setFixed(true);
+                    globals.fixedHasChanged = true;
+                    draggingEvent[i] = false;
+                }
+                position.y -= yOffset;
+                position.multiplyScalar(1/scale);
+                nodes[i].moveManually(position);
+                globals.nodePositionHasChanged = true;
+                continue;
+            }
+
+            if (releaseEvent[i]){
+                if (nodes[i]) nodes[i].setFixed(false);
+                globals.fixedHasChanged = true;
+            }
+
+            draggingEvent[i] = false;
+            releaseEvent[i] = false;
+
+            var direction = new THREE.Vector3(0,0,-1);
+            direction.applyQuaternion(controller.quaternion);
+            position.add(direction.clone().multiplyScalar(-0.05));
+
+            var cast = new THREE.Raycaster(position, direction, -0.1, 10);
+            var intersects = cast.intersectObjects(globals.model.getMesh(), false);
+            if (intersects.length>0){
+                var intersection = intersects[0];
+                var face = intersection.face;
+                var point = intersection.point;
+
+                if (point.clone().sub(position).length() > 0.2) {
+                    nodes[i] = null;
+                    continue;
+                }
+
+                var verticesArray = globals.model.getVertices();
+                var vertices = [];
+                vertices.push(verticesArray[face.a]);
+                vertices.push(verticesArray[face.b]);
+                vertices.push(verticesArray[face.c]);
+                var dist = transformToGlobalCoords(vertices[0].clone()).sub(point).lengthSq();
+                var nodeIndex = face.a;
+                for (var j=1;j<3;j++){
+                    var _dist = (transformToGlobalCoords(vertices[j].clone()).sub(point)).lengthSq();
+                    if (_dist<dist){
+                        dist = _dist;
+                        if (j==1) nodeIndex = face.b;
+                        else nodeIndex = face.c;
+                    }
+                }
+                var nodesArray = globals.model.getNodes();
+                nodes[i] = nodesArray[nodeIndex];
+                object3D.position.copy(transformToGlobalCoords(nodes[i].getPosition().clone()));
+                object3D.visible = true;
+            } else nodes[i] = null;
+        }
+    }
+
+    function transformToGlobalCoords(position){
+        position.multiplyScalar(scale);
+        position.y += yOffset;
+        return position;
+    }
+
     return {
         effect: effect,
         render: render

js/model.js

@@ -173,8 +173,8 @@ function initModel(globals){
         geometry.attributes.position.needsUpdate = true;
         if (globals.colorMode == "axialStrain") geometry.attributes.color.needsUpdate = true;
         else geometry.computeVertexNormals();
-        // if (globals.userInteractionEnabled) geometry.computeBoundingSphere();
-        // geometry.computeBoundingBox();
+        if (globals.userInteractionEnabled || globals.vrEnabled) geometry.computeBoundingBox();
+
         // geometry.computeBoundingSphere();
     }
 

js/node.js

@@ -5,12 +5,11 @@
 var nodeMaterial = new THREE.MeshBasicMaterial({color: 0x000000, side:THREE.DoubleSide});
 var nodeMaterialFixed = new THREE.MeshBasicMaterial({color: 0x000000, side:THREE.DoubleSide});
 var nodeMaterialHighlight = new THREE.MeshBasicMaterial({color: 0xffffff, side:THREE.DoubleSide});
-var transparentMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, side:THREE.DoubleSide, opacity:0.5, transparent:true});
+var transparentMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, opacity:0.5, transparent:true});
+var transparentVRMaterial = new THREE.MeshBasicMaterial({color: 0xeeeeee, opacity:0.8, transparent:true});
+
 var nodeGeo = new THREE.SphereGeometry(0.04,20);
-nodeGeo.rotateX(Math.PI/2);
 var nodeFixedGeo = new THREE.CubeGeometry(1, 1, 1);
-nodeFixedGeo.applyMatrix( new THREE.Matrix4().makeTranslation(0, 0.25, 0) );
-
 
 function Node(position, index){
 
@@ -149,6 +148,11 @@ Node.prototype.setTransparent = function(){
     this.object3D.material = transparentMaterial;
 };
 
+Node.prototype.setTransparentVR = function(){
+    this.object3D.material = transparentVRMaterial;
+    this.object3D.scale.set(0.2, 0.2, 0.2);
+};
+
 Node.prototype.hide = function(){
     this.object3D.visible = false;
 };