experiment

public/gearvr/appui.js

@@ -0,0 +1,15 @@
+//-----App ui-----
+
+function createApp() {
+    
+        let self = this
+    
+        return {
+            $cell: true,
+            $type: "div",
+            class: "propGrid max-width mdc-layout-grid mdc-layout-grid--align-left",
+            $components: []
+        }
+
+    }
+    

public/gearvr/assets.json

@@ -6,10 +6,6 @@
     "sky":{
         "tag": "img",
         "src": "/../assets/skyes/sky3.jpg"
-    },
-    "plane":{
-        "tag": "a-asset-item",
-        "src": "/../assets/plane.dae"
     },
      "bg2":{
         "tag": "img",

public/gearvr/index.vwf.config.yaml

@@ -4,5 +4,5 @@ info:
 model:
   vwf/model/aframe:
 view:
-  vwf/view/aframe:
+  vwf/view/aframe: {gearvr: true, wmrleft: true, wmrright: true}
   vwf/view/editor-new:

public/gearvr/index.vwf.yaml

@@ -3,7 +3,7 @@
 ---
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
-  fog: "type: linear; color: #ECECEC; far: 30; near: 0"
+  fog: "type: linear; color: #ECECEC; far: 20; near: 0"
   assets: "assets.json"
 children:
   myLight:
@@ -13,123 +13,40 @@ children:
       color: "white"
       position: "0 10 5"
       rotation: "0 0 0"
-  model:
-    extends: http://vwf.example.com/aframe/acolladamodel.vwf
+  groundPlane:
+    extends: http://vwf.example.com/aframe/aplane.vwf
     properties:
-      src: "#plane"
-      position: "-1.0 1.7 -3"
-      rotation: "0 -45 0"
-      scale: "10 10 10"
+        height: 50
+        width: 50
+        repeat: "10 10"
+        rotation: [-90, 0, 0]
+        wireframe: false
+        src: "#bg2"
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
-      value: "Virtual World Framework & A-Frame"
-      color: "#ddd"
-      position: "-2 2.5 -2"
-  spaceText2:
-    extends: http://vwf.example.com/aframe/atext.vwf
-    properties:
-      value: "Project by Krestianstvo.org"
-      color: "#aaa"
-      position: "1 3 -4"
-  boxAnim:
+      value: "Virtual World Framework & A-Frame & OSC"
+      color: "#2b5d83"
+      position: [-2, 2.5, -3]
+  cube:
     extends: http://vwf.example.com/aframe/abox.vwf
     properties:
-      position: "0 0 -3"
+      position: "0 1 -3"
       rotation: "0 0 0"
       color: "#3c7249"
-      depth: 2
-      height: 1
-      width: 1
-  box:
-    extends: http://vwf.example.com/aframe/abox.vwf
-    properties:
-      position: "-1 0.5 -3"
-      rotation: "0 -30 0"
-      color: "#3c7249"
-      depth: 2
+      depth: 1
       height: 1
       width: 1
-      clickable: true
-    events:
-      clickEvent:
-    methods:
-      clickEventMethod:
-        body: |
-          if (this.clickable) {
-          let genColor = this.generateColor();
-          this.color = genColor 
-          }
-      generateColor:
-        body: |
-          var letters = '0123456789ABCDEF';
-          var color = '#';
-          for (var i = 0; i < 6; i++) {
-          color += letters[Math.floor(this.random() * 16)];
-          } return color 
-    scripts:
-      - |
-        this.clickEvent = function(){
-          this.clickEventMethod();
-         }
-  controller:
-    extends: http://vwf.example.com/aframe/aentity.vwf
-    properties:
-      position: "0 0 -1"
-      color: "green"
-      depth: 1
-    children:
-      gearvr-controls:
-        extends: http://vwf.example.com/aframe/gearvr-controlsComponent.vwf
-  sphere:
-    extends: http://vwf.example.com/aframe/asphere.vwf
-    properties:
-      position: "1 1.25 -4"
-      color: "#e0e014"
-      radius: 1
-      wireframe: true
     children:
-      box2:
-        extends: http://vwf.example.com/aframe/abox.vwf
+      sphere:
+        extends: http://vwf.example.com/aframe/asphere.vwf
         properties:
-          src: "#bg"
-          position: "2 -0.75 0"
-          color: "#2167a5"
-          depth: 1
-        children:
-          interpolation:
-            extends: http://vwf.example.com/aframe/interpolation-component.vwf
-            properties:
-              enabled: true
-              duration: 50
-              deltaPos: 0.1
-              deltaRot: 1
-        methods:
-          run:
-            body: |
-              var time = vwf.now;
-              let pos = AFRAME.utils.coordinates.parse(this.position);
-              this.position = [pos.x, pos.y, Math.sin(time)]
-              this.future( 0.01 ).run();  // schedule the next step
-  sky:
-    extends: http://vwf.example.com/aframe/asky.vwf
-    properties:
-      color: "#ECECEC"
-      src: "#sky"
-      fog: false
-  groundPlane:
-    extends: http://vwf.example.com/aframe/aplane.vwf
-    properties:
-      height: 50
-      width: 50
-      repeat: "10 10"
-      rotation: "-90 0 0"
-      color: "white"
-      wireframe: false
-      src: "#bg2"
-methods:
-  initialize:
-    body: |
-      var runBox = vwf_view.kernel.find("", "/sphere/box2")[0];
-      console.log(runBox);
-      vwf_view.kernel.callMethod(runBox, "run");
+          position: "0 2 0"
+          rotation: "0 0 0"
+          color: "#3c7249"
+          radius: 0.4
+  newSky:
+    extends: http://vwf.example.com/aframe/aentity.vwf
+    children:
+      skyshader:
+        extends: http://vwf.example.com/aframe/app-skyshader-component.vwf

public/webapps.json

@@ -37,5 +37,11 @@
         "imgUrl": "./webrtc/webimg.jpg",
         "text": "Audio and video streaming for Avatars",
         "featured": false
+    },
+    "gearvr":{
+        "title":"Control in VR app",
+        "imgUrl": "./gear/webimg.jpg",
+        "text": "VR controler example",
+        "featured": false
     }
 }

support/client/lib/vwf/model/aframe/addon/aframe-components.js

@@ -369,4 +369,22 @@ AFRAME.registerComponent('sun', {
 
     tick: function (t) {
     }
-})
+})
+
+AFRAME.registerComponent('gearvrcontrol', {
+    
+        init: function () {
+            this.gearel = document.querySelector('#gearvrcontrol');
+            //this.el.sceneEl.querySelector('#gearvrcontrols')
+        },
+    
+        update: function () {
+        },
+    
+        tick: function (t) {
+        //    if (this.gearel) {
+        //     let rot = this.gearel.getAttribute('rotation');
+        //     this.el.setAttribute('rotation', rot);
+        //    }
+        }
+    })

support/client/lib/vwf/model/aframeComponent.js

@@ -923,6 +923,14 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
  
          }
 
+         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/gearvrcontrol-component.vwf")) {
+            
+ 
+                // aframeObj.el.setAttribute(node.type, {});
+             aframeObj.compName = "gearvrcontrol";
+             aframeObj.el.setAttribute(aframeObj.compName, {});
+ 
+         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/gearvr-controlsComponent.vwf")) {
 

support/client/lib/vwf/view/aframe.js

@@ -34,6 +34,8 @@ define(["module", "vwf/view"], function (module, view) {
 
             this.state.appInitialized = false;
 
+            if ( options === undefined ) { options = {}; }
+
             if (typeof options == "object") {
 
                 this.rootSelector = options["application-root"];
@@ -42,7 +44,9 @@ define(["module", "vwf/view"], function (module, view) {
                 this.rootSelector = options;
             }
 
-         
+            this.gearvr = options.gearvr !== undefined  ? options.gearvr : false;
+            this.wmrright = options.wmrright !== undefined  ? options.wmrright : false;
+            this.wmrleft = options.wmrleft !== undefined  ? options.wmrleft : false;
         },
 
         createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
@@ -61,7 +65,25 @@ define(["module", "vwf/view"], function (module, view) {
                 document.body.appendChild(scene); //append is not working in Edge browser
                 createAvatarControl(scene);
                 createAvatar.call(this, childID);
+
                // this.state.appInitialized  = true;
+
+               if (this.gearvr == true) {
+                   console.log("CREATE GEARVR HERE!!");
+                   createGearVRControls();
+                   createControlVR.call(this, childID, 'controlvr-');
+               }
+               if (this.wmrright == true) {
+                console.log("CREATE WMR RIGHT HERE!!");
+                createWMRVRControls('right');
+                createControlVR.call(this, childID, 'wmrvr-right-');
+            }
+            if (this.wmrright == true) {
+                console.log("CREATE WMR LEFT HERE!!");
+                createWMRVRControls('left');
+                createControlVR.call(this, childID, 'wmrvr-left-');
+            }
+                
             }
 
             if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj) {
@@ -167,6 +189,10 @@ define(["module", "vwf/view"], function (module, view) {
         ticked: function (vwfTime) {
 
             updateAvatarPosition();
+            updateHandControllerVR('controlvr-', '#gearvrcontrol');
+            updateHandControllerVR('wmrvr-right-', '#wmrvrcontrolright');
+            updateHandControllerVR('wmrvr-left-', '#wmrvrcontrolleft');
+
            
             //lerpTick ()
         }
@@ -175,6 +201,24 @@ define(["module", "vwf/view"], function (module, view) {
     });
 
 
+    function updateHandControllerVR(aName, aSelector) {
+        //let avatarName = 'avatar-' + self.kernel.moniker();
+        let avatarName = aName + self.kernel.moniker();
+        let el = document.querySelector(aSelector);
+        if (el) {
+            let position = el.getAttribute('position');
+            let rotation = el.getAttribute('rotation');
+
+            if ( position && rotation) {
+               // vwf_view.kernel.callMethod(avatarName, "updateAvatarVRControl", [postion, rotation]);
+         vwf_view.kernel.setProperty(avatarName, "rotation", AFRAME.utils.coordinates.stringify(rotation));
+         vwf_view.kernel.setProperty(avatarName, "position", AFRAME.utils.coordinates.stringify(position));
+         //AFRAME.utils.coordinates.stringify(position)
+            }
+        }
+
+    }
+
     function updateAvatarPosition() {
 
         let avatarName = 'avatar-' + self.kernel.moniker();
@@ -263,5 +307,65 @@ define(["module", "vwf/view"], function (module, view) {
         return '_' + Math.random().toString(36).substr(2, 9);
    }
     
+    function createGearVRControls() {
+
+        let sceneEl = document.querySelector('a-scene');
+        let gearvr = document.createElement('a-entity');
+        gearvr.setAttribute('id', 'gearvrcontrol');
+        gearvr.setAttribute('gearvr-controls', '');
+        gearvr.setAttribute('gearvr-controls', 'hand', 'right');
+        sceneEl.appendChild(gearvr);
+
+    }
+
+    function createWMRVRControls(hand) {
+        
+                let sceneEl = document.querySelector('a-scene');
+                let wmrvr = document.createElement('a-entity');
+                wmrvr.setAttribute('id', 'wmrvrcontrol'+hand);
+                wmrvr.setAttribute('windows-motion-controls', '');
+                wmrvr.setAttribute('windows-motion-controls', 'hand', hand);
+                sceneEl.appendChild(wmrvr);
+            }
+
+
+
+    function createControlVR(nodeID, name) {
+        
+                let avatarID = self.kernel.moniker();
+                var nodeName = name + avatarID;
+        
+                var newNode = { 
+            "id": nodeName,
+             "uri": nodeName,
+                "extends": "http://vwf.example.com/aframe/abox.vwf",
+                "properties": {
+                    "color": "white",
+                    "position": "0 0 0",
+                    "height": 0.1,
+                    "width": 0.1,
+                    "depth": 1,
+                },
+                children: {
+                    "gearvr":
+                    {
+                        "extends": "http://vwf.example.com/aframe/gearvrcontrol-component.vwf",
+                        "type": "component",
+                        "properties": {
+                        }
+                    }
+                    // "interpolation":
+                    // {
+                    //     "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
+                    //     "type": "component",
+                    //     "properties": {
+                    //     }
+                    // }
+                }
+            }
+               
+            vwf_view.kernel.createChild(nodeID, nodeName, newNode);
+                // vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
+            }
 
 });

support/client/lib/vwf/view/editor-new.js

@@ -345,6 +345,30 @@ define([
 
 
 
+                                    ]
+                                },
+                                {
+                                    $cell: true,
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                    $components: [
+                                        {
+                                        
+                                            $cell: true,
+                                            $type: "button",
+                                            class: "mdc-button mdc-button--raised",
+                                            $text: "GearVR controller",
+                                            onclick: function (e) {
+                                                //document.querySelector('#' + 'viewSettings').style.visibility = 'hidden';
+                                                let sceneEl = document.querySelector('a-scene');
+                                                let gearvr = document.createElement('a-entity');
+                                                gearvr.setAttribute('id','gearvrcontrols');
+                                                gearvr.setAttribute('gearvr-controls','');
+                                                gearvr.setAttribute('gearvr-controls', 'hand', 'right');
+                                                sceneEl.appendChild(gearvr);
+                                            }
+
+                                        }
                                     ]
                                 }
 

support/proxy/vwf.example.com/aframe/avatar.js

@@ -1,3 +1,22 @@
+this.simpleVrControllerDef = {
+    "extends": "http://vwf.example.com/aframe/abox.vwf",
+    "properties": {
+        "color": "white",
+        "position": "0.5 0 -2",
+        "height": 0.3,
+        "width": 0.3,
+        "depth": 1,
+    },
+    children: {
+        "gearvr":
+        {
+            "extends": "http://vwf.example.com/aframe/gearvrcontrol-component.vwf",
+            "type": "component",
+            "properties": {
+            }
+        }
+    }
+}
 this.simpleBodyDef = {
     "extends": "http://vwf.example.com/aframe/abox.vwf",
     "properties": {
@@ -39,6 +58,8 @@ this.createAvatarBody = function (modelSrc) {
 
     let myColor = this.getRandomColor();
     let myBodyDef = this.simpleBodyDef;
+    let myHandDef = this.simpleVrControllerDef;
+
     myBodyDef.properties.color = myColor;
 
     var newNode = {
@@ -49,6 +70,7 @@ this.createAvatarBody = function (modelSrc) {
         children: {
            
             "myBody": myBodyDef,
+            //"myHand": myHandDef,
             "myHead": {
                 "extends": "http://vwf.example.com/aframe/aentity.vwf",
                 "properties": {
@@ -261,6 +283,16 @@ this.followAvatarControl = function (position, rotation) {
     // this.avatarCamera.rotation = [rotation.x, myHeadRot.y, rotation.z];  
 }
 
+this.updateAvatarVRControl = function(position, rotation){
+
+    let myBodyRot = AFRAME.utils.coordinates.parse(this.avatarNode.myBody.rotation);
+    this.avatarNode.myHand.rotation = rotation;
+    this.avatarNode.myHand.position = position;
+    //console.log(this.avatarNode.myHand.rotation);
+
+}
+
+
 this.createSimpleAvatar = function(){
        if (this.avatarNode.myBody) {
         this.avatarNode.children.delete(this.avatarNode.myBody);

support/proxy/vwf.example.com/aframe/avatar.vwf.yaml

@@ -24,6 +24,10 @@ methods:
         parameters:
             - position
             - rotation
+    updateAvatarVRControl:
+        parameters:
+            - position
+            - rotation
     setSmallVideoHead:
     setBigVideoHead:
     setVideoTexture:

support/proxy/vwf.example.com/aframe/gearvrcontrol-component.vwf.yaml

@@ -0,0 +1,5 @@
+# Interpolation
+---
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties: