update aframe to master

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

@@ -1159,6 +1159,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
             aframeObj = document.createElement('a-scene');
             let assetsElement = document.createElement('a-assets');
             aframeObj.appendChild(assetsElement);
+            aframeObj.setAttribute('scene-utils', "");
             self.state.scenes[node.ID] = aframeObj;
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-item.vwf")) {
 

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

@@ -2,6 +2,36 @@ if (typeof AFRAME === 'undefined') {
     throw new Error('Component attempted to register before AFRAME was available.');
 }
 
+AFRAME.registerComponent('scene-utils', {
+
+
+    init: function () {
+
+
+        const sceneEnterVR = (e) => {
+
+            //vwf_view.kernel.callMethod(vwf.application(), "enterVR");
+
+        }
+
+        const sceneExitVR = (e) => {
+
+            //vwf_view.kernel.callMethod(vwf.application(), "exitVR");
+        }
+
+        this.el.sceneEl.addEventListener('enter-vr', sceneEnterVR);
+        this.el.sceneEl.addEventListener('exit-vr', sceneExitVR);
+
+    },
+
+    update: function () {
+    },
+
+    tick: function (t) {
+    }
+})
+
+
 AFRAME.registerComponent('linepath', {
     schema: {
         color: { default: '#000' },
@@ -372,184 +402,187 @@ AFRAME.registerComponent('sun', {
 })
 
 AFRAME.registerComponent('gearvrcontrol', {
-    
-        init: function () {
-            var self = this;
-            var controllerID = 'gearvr-' + vwf_view.kernel.moniker();
-            //this.gearel = document.querySelector('#gearvrcontrol');
-            this.el.addEventListener('triggerdown', function (event) {
-              vwf_view.kernel.callMethod(controllerID, "triggerdown", []);
-              });
-              this.el.addEventListener('triggerup', function (event) {
-               vwf_view.kernel.callMethod(controllerID, "triggerup", []);
-              });
-        },
-    
-        update: function () {
-        },
-    
-        tick: function (t) {
-        }
-    })
-
-
-    AFRAME.registerComponent('wmrvrcontrol', {
-        
-        schema: {
-            hand: { default: 'right' }
-        },
-    
-        update: function (old) {
-            this.hand = this.data.hand;
-        },
-
-            init: function () {
-                var self = this;
-                this.hand = this.data.hand;
-                var controllerID = 'wrmr-' + this.hand + '-' + vwf_view.kernel.moniker();
-                //this.gearel = document.querySelector('#gearvrcontrol');
-                this.el.addEventListener('triggerdown', function (event) {
-                  vwf_view.kernel.callMethod(controllerID, "triggerdown", []);
-                  });
-                  this.el.addEventListener('triggerup', function (event) {
-                   vwf_view.kernel.callMethod(controllerID, "triggerup", []);
-                  });
-            },
-        
-            tick: function (t) {
-            }
-        })
 
-        AFRAME.registerComponent('streamsound', {
+    init: function () {
+        var self = this;
+        var controllerID = 'gearvr-' + vwf_view.kernel.moniker();
+
+        this.el.addEventListener('triggerdown', function (event) {
+            vwf_view.kernel.callMethod(controllerID, "triggerdown", []);
+        });
+
+        this.el.addEventListener('triggerup', function (event) {
+            vwf_view.kernel.callMethod(controllerID, "triggerup", []);
+        });
+
+
+    },
+
+    update: function () {
+    },
+
+    tick: function (t) {
+    }
+})
+
+
+AFRAME.registerComponent('wmrvrcontrol', {
+
+    schema: {
+        hand: { default: 'right' }
+    },
+
+    update: function (old) {
+        this.hand = this.data.hand;
+    },
+
+    init: function () {
+        var self = this;
+        this.hand = this.data.hand;
+        var controllerID = 'wrmr-' + this.hand + '-' + vwf_view.kernel.moniker();
+        //this.gearel = document.querySelector('#gearvrcontrol');
+        this.el.addEventListener('triggerdown', function (event) {
+            vwf_view.kernel.callMethod(controllerID, "triggerdown", []);
+        });
+        this.el.addEventListener('triggerup', function (event) {
+            vwf_view.kernel.callMethod(controllerID, "triggerup", []);
+        });
+    },
+
+    tick: function (t) {
+    }
+})
+
+AFRAME.registerComponent('streamsound', {
 
-            schema: {
-                positional: { default: true }
-              },
-           
-            init: function () {
-                var self = this;
+    schema: {
+        positional: { default: true }
+    },
+
+    init: function () {
+        var self = this;
 
-                let driver = vwf.views["vwf/view/webrtc"];
+        let driver = vwf.views["vwf/view/webrtc"];
 
-                this.listener = null;
-                this.stream = null;
+        this.listener = null;
+        this.stream = null;
 
-                if(!this.sound) {
-                    this.setupSound();
-                  }
+        if (!this.sound) {
+            this.setupSound();
+        }
 
-                  if (driver) {
-                    //let avatarID = 'avatar-' + vwf.moniker();
-                    let avatarID = this.el.id.slice(0, 27); //avatar-0RtnYBBTBU84OCNcAAFY
-                   let client = driver.state.clients[avatarID];
-                   if (client ){
-                       if (client.connection) {
+        if (driver) {
+            //let avatarID = 'avatar-' + vwf.moniker();
+            let avatarID = this.el.id.slice(0, 27); //avatar-0RtnYBBTBU84OCNcAAFY
+            let client = driver.state.clients[avatarID];
+            if (client) {
+                if (client.connection) {
                     this.stream = client.connection.stream;
-                    if (this.stream){
+                    if (this.stream) {
                         this.audioEl = new Audio();
                         this.audioEl.srcObject = this.stream;
-            
-                    this.sound.setNodeSource(this.sound.context.createMediaStreamSource(this.stream));
+
+                        this.sound.setNodeSource(this.sound.context.createMediaStreamSource(this.stream));
                     }
-                   }
                 }
-                  }
+            }
+        }
 
-            },
+    },
 
-            setupSound: function() {
-                var el = this.el;
-                var sceneEl = el.sceneEl;
-            
-                if (this.sound) {
-                  el.removeObject3D(this.attrName);
-                }
-            
-                if (!sceneEl.audioListener) {
-                  sceneEl.audioListener = new THREE.AudioListener();
-                  sceneEl.camera && sceneEl.camera.add(sceneEl.audioListener);
-                  sceneEl.addEventListener('camera-set-active', function(evt) {
-                    evt.detail.cameraEl.getObject3D('camera').add(sceneEl.audioListener);
-                  });
-                }
-                this.listener = sceneEl.audioListener;
-            
-                this.sound = this.data.positional
-                  ? new THREE.PositionalAudio(this.listener)
-                  : new THREE.Audio(this.listener);
-                el.setObject3D(this.attrName, this.sound);
-              },
-
-              remove: function() {
-                if (!this.sound) return;
-            
-                this.el.removeObject3D(this.attrName);
-                if (this.stream) {
-                  this.sound.disconnect();
-                }
-              },
+    setupSound: function () {
+        var el = this.el;
+        var sceneEl = el.sceneEl;
 
-            update: function (old) {
+        if (this.sound) {
+            el.removeObject3D(this.attrName);
+        }
 
-            },
+        if (!sceneEl.audioListener) {
+            sceneEl.audioListener = new THREE.AudioListener();
+            sceneEl.camera && sceneEl.camera.add(sceneEl.audioListener);
+            sceneEl.addEventListener('camera-set-active', function (evt) {
+                evt.detail.cameraEl.getObject3D('camera').add(sceneEl.audioListener);
+            });
+        }
+        this.listener = sceneEl.audioListener;
 
-            tick: function (t) {
-            }
-            })
+        this.sound = this.data.positional
+            ? new THREE.PositionalAudio(this.listener)
+            : new THREE.Audio(this.listener);
+        el.setObject3D(this.attrName, this.sound);
+    },
+
+    remove: function () {
+        if (!this.sound) return;
 
+        this.el.removeObject3D(this.attrName);
+        if (this.stream) {
+            this.sound.disconnect();
+        }
+    },
 
-            AFRAME.registerComponent('viewoffset', {
-
-                // fullWidth:
-                // fullHeight:
-                // xoffset:
-                // yoffset:
-                // width:
-                // height:
-
-                schema: {
-                    fullWidth: { default: window.innerWidth },
-                    fullHeight: { default: window.innerHeight },
-                    xoffset: { default: window.innerWidth/2 },
-                    yoffset: { default: window.innerHeight/2 },
-                    width: { default: window.innerWidth },
-                    height: { default: window.innerHeight }
-                },
-            
-    
-                init: function () {
-                    var self = this;
-                    this.el.sceneEl.addEventListener('loaded', setOffset);
-
-                    function setOffset(){
-                        this.setNewOffset();
-                    }
-                    
-                },
-            
-
-                update: function (old) {
-                    this.fullWidth = this.data.fullWidth;
-                    this.fullHeight = this.data.fullHeight;
-                    this.xoffset = this.data.xoffset;
-                    this.yoffset = this.data.yoffset;
-                    this.width = this.data.width;
-                    this.height = this.data.height;
-                    //console.log(this.data);
-                    this.setNewOffset();
-                },
-            
-                setNewOffset: function(){
-                    this.el.object3DMap.camera.setViewOffset ( 
-                        this.data.fullWidth,
-                        this.data.fullHeight,
-                        this.data.xoffset,
-                        this.data.yoffset,
-                        this.data.width,
-                        this.data.height)
-                },
-
-                tick: function (t) {
+    update: function (old) {
 
-                }
-            })
+    },
+
+    tick: function (t) {
+    }
+})
+
+
+AFRAME.registerComponent('viewoffset', {
+
+    // fullWidth:
+    // fullHeight:
+    // xoffset:
+    // yoffset:
+    // width:
+    // height:
+
+    schema: {
+        fullWidth: { default: window.innerWidth },
+        fullHeight: { default: window.innerHeight },
+        xoffset: { default: window.innerWidth / 2 },
+        yoffset: { default: window.innerHeight / 2 },
+        width: { default: window.innerWidth },
+        height: { default: window.innerHeight }
+    },
+
+
+    init: function () {
+        var self = this;
+        this.el.sceneEl.addEventListener('loaded', setOffset);
+
+        function setOffset() {
+            this.setNewOffset();
+        }
+
+    },
+
+
+    update: function (old) {
+        this.fullWidth = this.data.fullWidth;
+        this.fullHeight = this.data.fullHeight;
+        this.xoffset = this.data.xoffset;
+        this.yoffset = this.data.yoffset;
+        this.width = this.data.width;
+        this.height = this.data.height;
+        //console.log(this.data);
+        this.setNewOffset();
+    },
+
+    setNewOffset: function () {
+        this.el.object3DMap.camera.setViewOffset(
+            this.data.fullWidth,
+            this.data.fullHeight,
+            this.data.xoffset,
+            this.data.yoffset,
+            this.data.width,
+            this.data.height)
+    },
+
+    tick: function (t) {
+
+    }
+})

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

@@ -130,6 +130,11 @@ define(["module", "vwf/view"], function (module, view) {
                 return;
             }
 
+            if (node.extendsID == "http://vwf.example.com/aframe/gearvrcontroller.vwf"){
+                    console.log("gearVR controller initialized")
+            }
+
+
         },
 
         createdProperty: function (nodeId, propertyName, propertyValue) {
@@ -445,7 +450,7 @@ define(["module", "vwf/view"], function (module, view) {
 
         let el = document.querySelector('#avatarControl');
         if (el) {
-            let position = el.getAttribute('position');
+            let position = el.getAttribute('position');//el.object3D.getWorldPosition()//
             let rotation = el.getAttribute('rotation');
 
             let lastRotation = self.nodes[avatarName].selfTickRotation;
@@ -474,7 +479,7 @@ define(["module", "vwf/view"], function (module, view) {
 
         let el = document.querySelector(aSelector);
         if (el) {
-            let position = el.getAttribute('position');
+            let position = el.object3D.getWorldPosition() //el.getAttribute('position');
             let rotation = el.getAttribute('rotation');
 
             let lastRotation = self.nodes[avatarName].selfTickRotation;
@@ -486,10 +491,7 @@ define(["module", "vwf/view"], function (module, view) {
             if (position && rotation && lastRotation && lastPosition) {
                 if (compareCoordinates(position, lastPosition) || compareCoordinates(rotation, lastRotation)) {
                     console.log("not equal!!");
-
                     vwf_view.kernel.callMethod(avatarName, "updateVRControl", [position, rotation]);
-                   // vwf_view.kernel.setProperty(avatarName, "position", AFRAME.utils.coordinates.stringify(position));
-                    //vwf_view.kernel.setProperty(avatarName, "rotation", AFRAME.utils.coordinates.stringify(rotation));
                 }
             }
 
@@ -509,38 +511,35 @@ define(["module", "vwf/view"], function (module, view) {
         avatarEl.setAttribute('position', '0 1.6 0');
 
         if (AFRAME.utils.device.isGearVR()) {
-           // avatarEl.setAttribute('position', '0 3.2 0');
+            avatarEl.setAttribute('position', '0 0 0');
         }
 
         let controlEl = document.createElement('a-camera');
-        // controlEl.setAttribute('avatar', '');
+
         controlEl.setAttribute('id', 'avatarControl');
-        // controlEl.setAttribute('wasd-controls-enabled', true);
-        // controlEl.setAttribute('look-controls-enabled', true);
         controlEl.setAttribute('wasd-controls', {});
-        controlEl.setAttribute('look-controls', {});
-        //controlEl.setAttribute('user-height', 1.6);
+        controlEl.setAttribute('look-controls', {pointerLockEnabled: false});
        controlEl.setAttribute('gamepad-controls', {'controller': 0});
-        //controlEl.setAttribute('universal-controls', {});
         
         //controlEl.setAttribute('gearvr-controls',{});
         controlEl.setAttribute('camera', 'active', true);
-       // controlEl.setAttribute('camera', 'userHeight', 1.6);
        // controlEl.setAttribute('camera', 'near', 0.51);
 
-       avatarEl.appendChild(controlEl);
-       aScene.appendChild(avatarEl);
-
         let cursorEl = document.createElement('a-cursor');
         cursorEl.setAttribute('id', 'cursor-' + avatarName);
         cursorEl.setAttribute('raycaster', {});
         cursorEl.setAttribute('raycaster', 'objects', '.intersectable');
         cursorEl.setAttribute('raycaster', 'showLine', false);
 
+        if (AFRAME.utils.device.isGearVR()) {}
+
         // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});
         // cursorEl.setAttribute('raycaster', 'showLine', true);
         controlEl.appendChild(cursorEl);
 
+        avatarEl.appendChild(controlEl);
+        aScene.appendChild(avatarEl);
+
         // let gearVRControlsEl = document.createElement('a-entity');
         // gearVRControlsEl.setAttribute('id', 'gearvr-'+avatarName);
         // gearVRControlsEl.setAttribute('gearvr-controls', {});
@@ -625,6 +624,9 @@ define(["module", "vwf/view"], function (module, view) {
     function createGearVRControls() {
 
         let sceneEl = document.querySelector('a-scene');
+
+        //let avatarControl = document.querySelector('#avatarControlParent');
+
         let gearvr = document.createElement('a-entity');
         gearvr.setAttribute('id', 'gearvrcontrol');
         gearvr.setAttribute('gearvr-controls', '');
@@ -646,5 +648,4 @@ define(["module", "vwf/view"], function (module, view) {
     }
 
 
-
 });

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

@@ -1065,3 +1065,10 @@ this.deleteNode = function(nodeName){
 
 }
 
+this.enterVR = function(){
+    console.log("ENTER VR");
+}
+
+this.exitVR = function(){
+    console.log("EXIT VR");
+}

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

@@ -78,5 +78,7 @@ methods:
   deleteNode:
     parameters:
       - nodeName
+  enterVR:
+  exitVR:
 scripts:
 - source: "http://vwf.example.com/aframe/ascene.js"

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

@@ -39,12 +39,7 @@ this.modelBodyDef = {
 
 this.createAvatarBody = function (modelSrc) {
 
-
-    let avatarControl = document.querySelector('#avatarControl');
-
-
-    //let userHeight = avatarControl.getAttribute('camera').userHeight;
-    var userHeight = avatarControl.getAttribute('look-controls').userHeight; //avatarControl.getAttribute('position').y;
+    var userHeight = 0;
 
     // if (AFRAME.utils.device.isGearVR()) {
     //     userHeight = 0
@@ -59,7 +54,7 @@ this.createAvatarBody = function (modelSrc) {
     var newNode = {
         "extends": "http://vwf.example.com/aframe/aentity.vwf",
         "properties": {
-            "position": [0, -userHeight, 0] //-userHeight
+            "position": [0, userHeight, 0] //-userHeight
         },
         children: {
            

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

@@ -1,31 +1,39 @@
 this.simpleDef = {
     "extends": "http://vwf.example.com/aframe/abox.vwf",
+    children: {
+        "material": {
+            "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+            "type": "component",
+            "properties":{
+                "color": "white"
+            }
+        }
+    },
     "properties": {
-        "color": "white",
         "position": "0 0 0",
         "height": 0.01,
         "width": 0.01,
-        "depth": 1,
+        "depth": 1
     },
     children: {
         "pointer": {
             "extends": "http://vwf.example.com/aframe/abox.vwf",
             "properties": {
-                "color": "green",
                 "position": "0 0 -0.8",
                 "height": 0.1,
                 "width": 0.1,
                 "depth": 0.1
-            }
-        },
-        "interpolation":
-            {
-                "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
-                "type": "component",
-                "properties": {
-                    "enabled": true
+            },
+            children: {
+                "material": {
+                    "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                    "type": "component",
+                    "properties":{
+                        "color": "green"
+                    }
                 }
             }
+        }
     }
 }
 
@@ -74,6 +82,7 @@ this.createController = function (modelSrc) {
         "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
         "type": "component",
         "properties": {
+            "enabled": true
    }
     }
 
@@ -121,9 +130,9 @@ this.initialize = function() {
 }
 
 this.triggerdown = function() {
-    this.handVRNode.controller.pointer.color = 'red'
+    this.handVRNode.controller.pointer.material.color = 'red'
  }
 
  this.triggerup = function() {
-    this.handVRNode.controller.pointer.color = 'green'
- }
+    this.handVRNode.controller.pointer.material.color = 'green'
+ }

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

@@ -1,23 +1,38 @@
 this.simpleDef = {
     "extends": "http://vwf.example.com/aframe/abox.vwf",
+    children: {
+        "material": {
+            "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+            "type": "component",
+            "properties":{
+                "color": "white"
+            }
+        }
+    },
     "properties": {
-        "color": "white",
         "position": "0 0 0",
         "height": 0.01,
         "width": 0.01,
-        "depth": 1,
+        "depth": 1
     },
     children: {
         "pointer": {
             "extends": "http://vwf.example.com/aframe/abox.vwf",
             "properties": {
-                "color": "green",
                 "position": "0 0 -0.8",
                 "height": 0.1,
                 "width": 0.1,
                 "depth": 0.1
+            },
+            children: {
+                "material": {
+                    "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                    "type": "component",
+                    "properties":{
+                        "color": "green"
+                    }
+                }
             }
-
         },
         "interpolation":
             {
@@ -123,9 +138,9 @@ this.initialize = function() {
 }
 
 this.triggerdown = function() {
-    this.handVRNode.controller.pointer.color = 'red'
+    this.handVRNode.controller.pointer.material.color = 'red'
  }
 
  this.triggerup = function() {
-    this.handVRNode.controller.pointer.color = 'green'
+    this.handVRNode.controller.pointer.material.color = 'green'
  }