make camera

public/aframe2/assets.json

@@ -7,10 +7,6 @@
         "tag": "img",
         "src": "/../assets/skyes/sky3.jpg"
     },
-    "plane":{
-        "tag": "a-asset-item",
-        "src": "/../assets/test.dae"
-    },
     "plane-obj":{
         "tag": "a-asset-item",
         "src": "/../assets/models/plane/PUSHILIN_Plane.obj"
@@ -22,13 +18,5 @@
      "bg2":{
         "tag": "img",
         "src": "/../assets/checker.jpg"
-    },
-    "maleAvatar":{
-        "tag": "a-asset-item",
-        "src": "/../assets/avatars/male/avatar1.gltf"
-    },
-    "femaleAvatar":{
-        "tag": "a-asset-item",
-        "src": "/../assets/avatars/female/avatar1.gltf"
     }
 }

public/multicamera/appui.js

@@ -0,0 +1,5 @@
+//-----App ui-----
+
+// function createApp() {
+//     return {}
+// }

public/multicamera/assets.json

@@ -0,0 +1,10 @@
+{
+    "bg2":{
+        "tag": "img",
+        "src": "/../assets/checker.jpg"
+    },
+    "sky":{
+        "tag": "img",
+        "src": "/../assets/skyes/sky3.jpg"
+    }
+}

public/multicamera/index.vwf.config.yaml

@@ -0,0 +1,8 @@
+---
+info:
+  title: "VWF & AFrame Example App"
+model:
+  vwf/model/aframe:
+view:
+  vwf/view/aframe:
+  vwf/view/editor-new:

public/multicamera/index.vwf.yaml

@@ -0,0 +1,66 @@
+# A-Frame & VWF simple scene
+# Copyright 2017 Krestianstvo.org project
+---
+extends: http://vwf.example.com/aframe/ascene.vwf
+properties:
+  transparent: true
+  assets: "assets.json"
+children:
+  sky:
+    extends: http://vwf.example.com/aframe/asky.vwf
+    properties:
+      color: "#ECECEC"
+      side: "back"
+      fog: false
+  spaceText:
+    extends: http://vwf.example.com/aframe/atext.vwf
+    properties:
+      value: "Virtual World Framework & A-Frame"
+      color: "#b74217"
+      position: "-2 2.5 -2"
+  spaceText2:
+    extends: http://vwf.example.com/aframe/atext.vwf
+    properties:
+      value: "Project by Krestianstvo.org"
+      color: "#305b32"
+      position: "1 3 -4"
+  box:
+    extends: http://vwf.example.com/aframe/abox.vwf
+    properties:
+      position: "-1 0.5 -3"
+      rotation: "0 -30 0"
+      color: "#3c7249"
+      depth: 2
+      height: 1
+      width: 1
+  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"
+  camera1:
+    extends: http://vwf.example.com/aframe/abox.vwf
+    properties:
+      position: "2 1.6 -2"
+      depth: 0.2
+      height: 0.2
+      width: 0.2
+      color: "red"
+    children:
+      cam:
+        extends: http://vwf.example.com/aframe/acamera.vwf
+        properties:
+          look-controls-enabled: false
+          wasd-controls-enabled: false
+          user-height: 0
+        children:
+          viewoffset:
+            extends: http://vwf.example.com/aframe/viewOffsetCamera-component.vwf
+            properties:
+              xoffset: 0
+              yoffset: 0

public/webapps.json

@@ -43,5 +43,11 @@
         "imgUrl": "./gearvr/webimg.jpg",
         "text": "VR controler example",
         "featured": false
+    },
+    "multicamera":{
+        "title":"Multi-Camera",
+        "imgUrl": "./multicamera/webimg.jpg",
+        "text": "Multi-camera example",
+        "featured": false
     }
 }

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

@@ -495,4 +495,43 @@ AFRAME.registerComponent('gearvrcontrol', {
 
             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;
+            
+                },
+            
+                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);
+                },
+            
+                tick: function (t) {
+                }
             })

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

@@ -226,6 +226,19 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
+                if (value === undefined && isAViewOffsetCameraDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
+
+                        value = propertyValue;
+                        let parentNodeAF = aframeObject.el;
+                        let defs = ['fullWidth', 'fullHeight', 'xoffset', 'yoffset', 'width', 'height'];
+
+                        defs.forEach(element => {
+                            element == propertyName ? parentNodeAF.setAttribute('viewoffset', element, propertyValue) :
+                                value = undefined;
+                        })
+                    }
+                }
 
                 if (value === undefined && isARayCasterDefinition(node.prototypes)) {
                     if (aframeObject.el.getAttribute(aframeObject.compName)) {
@@ -604,6 +617,41 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 }
 
+                if (value === undefined && isAViewOffsetCameraDefinition(node.prototypes)) {
+                    value = propertyValue;
+
+                    // let parentNodeAF = self.state.nodes[node.parentID].aframeObj;
+                    let parentNodeAF = aframeObject.el;
+
+                    switch (propertyName) {
+
+                        case "fullWidth":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).fullWidth;
+                            break;
+
+                        case "fullHeight":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).fullHeight;
+                            break;
+
+                        case "width":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).width;
+                            break;
+
+                        case "height":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).height;
+                            break;
+
+                        case "xoffset":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).xoffset;
+                            break;
+                        
+                        case "yoffset":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).yoffset;
+                            break;
+                    }
+
+                }
+
 
                 if (value === undefined && isAInterpolationDefinition(node.prototypes)) {
                     value = propertyValue;
@@ -705,6 +753,17 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         return found;
     }
 
+    function isAViewOffsetCameraDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/viewOffsetCamera-component.vwf");
+            }
+        }
+        return found;
+    }
+
+
     function isAGizmoDefinition(prototypes) {
         var found = false;
         if (prototypes) {
@@ -808,6 +867,14 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
         }
 
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/viewOffsetCamera-component.vwf")) {
+            
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "viewoffset";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/streamSoundComponent.vwf")) {
             
             

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

@@ -228,6 +228,26 @@ define(["module", "vwf/view"], function (module, view) {
 
            // console.log(vwfTime);
             //lerpTick ();
+        },
+
+        calledMethod: function( nodeID, methodName, methodParameters, methodValue ) {
+    
+            var node = this.state.nodes[nodeID];
+
+            if (!(node && node.aframeObj)) {
+                return;
+            }
+
+       
+            if (this.nodes[nodeID].extends == "http://vwf.example.com/aframe/acamera.vwf"){
+                if (methodName == "setCameraToActive"){
+                    if (methodParameters[0] == vwf.moniker_){
+                    console.log("set active");
+                    node.aframeObj.setAttribute('camera', 'active', true)
+                }
+            }
+        }
+            
         }
 
 

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

@@ -1444,8 +1444,9 @@ define([
                                                         class: "mdc-button mdc-button--raised",
                                                         $text: "Active",
                                                         onclick: function (e) {
-                                                            let camera = document.querySelector('#' + this._currentNode);
-                                                            camera.setAttribute('camera', 'active', true);
+                                                            //let camera = document.querySelector('#' + this._currentNode);
+                                                            vwf_view.kernel.callMethod(this._currentNode, "setCameraToActive", [vwf.moniker_]);
+                                                            //camera.setAttribute('camera', 'active', true);
                                                         }
 
                                                     }

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

@@ -9,3 +9,9 @@ properties:
   look-controls-enabled:
   near:
   wasd-controls-enabled:
+methods:
+  setCameraToActive:
+    parameters:
+      - moniker
+    body: |
+          console.log("set to active call from - ", moniker);

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

@@ -0,0 +1,11 @@
+# https://threejs.org/docs/#api/cameras/PerspectiveCamera.setViewOffset
+---
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties:
+  fullWidth:
+  fullHeight:
+  xoffset:
+  yoffset:
+  width:
+  height: