add more aframe objects support

public/aframe/index.vwf.yaml

@@ -3,9 +3,16 @@
 ---
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
-  fog: "type: linear; color: #ECECEC; far: 9; near: 0"
   transparent: true
 children:
+  fog:
+    extends: http://vwf.example.com/aframe/aSceneFogComponent.vwf
+    type: "component"
+    properties:
+      fogType: "linear"
+      fogColor: "#ECECEC"
+      far: 9
+      near: 0
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:

public/aframe2/assets.json

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

public/aframe2/index.vwf.yaml

@@ -3,10 +3,24 @@
 ---
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
-  fog: "type: linear; color: #ECECEC; far: 30; near: 0"
   transparent: true
   assets: "assets.json"
 children:
+  assetBG:
+    extends: http://vwf.example.com/aframe/a-asset-image-item.vwf
+    properties:
+      itemID: "bg"
+      itemSrc: "/assets/bg.jpg"
+  assetSky:
+    extends: http://vwf.example.com/aframe/a-asset-image-item.vwf
+    properties:
+      itemID: "sky"
+      itemSrc: "/assets/skyes/sky3.jpg"
+  assetBG2:
+    extends: http://vwf.example.com/aframe/a-asset-image-item.vwf
+    properties:
+      itemID: "bg2"
+      itemSrc: "/assets/checker.jpg"
   assetPlaneObj:
     extends: http://vwf.example.com/aframe/a-asset-item.vwf
     properties:
@@ -20,10 +34,15 @@ children:
   myLight:
     extends: http://vwf.example.com/aframe/alight.vwf
     properties:
-      type: "point"
-      color: "white"
-      position: "0 10 5"
-      rotation: "0 0 0"
+      type: "directional"
+      intensity: 0.5
+      position: "0.5 2.0 1.0"
+      castShadow: true
+  myLight2:
+    extends: http://vwf.example.com/aframe/alight.vwf
+    properties:
+      type: "ambient"
+      intensity: 0.5
   model:
     extends: http://vwf.example.com/aframe/aobjmodel.vwf
     properties:
@@ -32,6 +51,11 @@ children:
       position: "-1.2 1.7 -2.5"
       rotation: "0 -45 0"
       scale: "0.5 0.5 0.5"
+    children:
+      shadow:
+        extends: http://vwf.example.com/aframe/shadowComponent.vwf
+        properties:
+          cast: true
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -70,6 +94,11 @@ children:
       cursor-listener:
         extends: http://vwf.example.com/aframe/app-cursor-listener-component.vwf
         type: "component"
+      shadow:
+        extends: http://vwf.example.com/aframe/shadowComponent.vwf
+        properties:
+          cast: true
+          receive: true
     events:
       clickEvent:
       intersectEvent:
@@ -118,18 +147,25 @@ children:
       wireframe: true
     children:
       box2:
-        extends: http://vwf.example.com/aframe/abox.vwf
+        extends: http://vwf.example.com/aframe/aentity.vwf
         properties:
-          src: "#bg"
           position: "2 -0.75 0"
-          color: "#2167a5"
-          depth: 1
         children:
+          cube:
+            extends: http://vwf.example.com/aframe/abox.vwf
+            properties:
+              src: "#bg"
+              color: "#2167a5"
+              depth: 1
+            children:
+              shadow:
+                extends: http://vwf.example.com/aframe/shadowComponent.vwf
+                properties:
+                  cast: true
           interpolation:
             extends: http://vwf.example.com/aframe/interpolation-component.vwf
             properties:
               enabled: true
-              duration: 50
               deltaPos: 0.001
               deltaRot: 0.1
         methods:
@@ -153,8 +189,12 @@ children:
       repeat: "10 10"
       rotation: "-90 0 0"
       color: "white"
-      wireframe: false
       src: "#bg2"
+    children:
+      shadow:
+        extends: http://vwf.example.com/aframe/shadowComponent.vwf
+        properties:
+          receive: true
 methods:
   initialize:
     body: |

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

@@ -92,6 +92,86 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
             };
 
             this.state.kernel = this.kernel.kernel.kernel;
+
+            this.aframeDef = {
+                'A-BOX':    [
+                    'ambient-occlusion-map', 'ambient-occlusion-map-intensity',
+                    'ambient-occlusion-texture-offset', 'ambient-occlusion-texture-repeat',
+                    'color',  'depth', 'displacement-bias', 'displacement-map',
+                    'displacement-scale', 'displacement-texture-offset',
+                    'displacement-texture-repeat', 'env-map',
+                    'fog', 'height', 'metalness',
+                    'normal-map', 'normal-scale',
+                    'normal-texture-offset', 'normal-texture-repeat',
+                    'repeat', 'roughness', 'segments-depth',
+                    'segments-height', 'segments-width',
+                    'spherical-env-map', 'src', 'width',
+                    'wireframe', 'wireframe-linewidth'],
+
+                'A-SPHERE': [
+                    'ambient-occlusion-map', 'ambient-occlusion-map-intensity',
+                    'ambient-occlusion-texture-offset', 'ambient-occlusion-texture-repeat',
+                    'color', 'displacement-bias', 'displacement-map',
+                    'displacement-scale', 'displacement-texture-offset',
+                    'displacement-texture-repeat', 'env-map',
+                    'fog', 'height', 'metalness',
+                    'normal-map', 'normal-scale',
+                    'normal-texture-offset', 'normal-texture-repeat',
+                    'phi-length', 'phi-start', 'radius', 
+                    'repeat', 'roughness', 'segments-depth',
+                    'segments-height', 'segments-width',
+                    'spherical-env-map', 'src', 
+                    'theta-length', 'theta-start',
+                    'width',  'wireframe', 'wireframe-linewidth'
+                ],
+
+                'A-PLANE': [
+                    'ambient-occlusion-map', 'ambient-occlusion-map-intensity',
+                    'ambient-occlusion-texture-offset', 'ambient-occlusion-texture-repeat',
+                    'color', 'displacement-bias', 'displacement-map',
+                    'displacement-scale', 'displacement-texture-offset',
+                    'displacement-texture-repeat', 'env-map',
+                    'fog', 'height', 'metalness',
+                    'normal-map', 'normal-scale',
+                    'normal-texture-offset', 'normal-texture-repeat',
+                    'repeat', 'roughness',
+                    'segments-height', 'segments-width',
+                    'spherical-env-map', 'src', 'width',
+                    'wireframe', 'wireframe-linewidth'
+                ],
+
+                'A-TEXT': [
+                        'align', 'alpha-test', 'anchor',
+                        'baseline', 'color', 'font',
+                        'font-image', 'height',
+                        'letter-spacing', 'line-height',
+                        'opacity', 'shader',
+                        'side', 'tab-size',
+                        'transparent', 'value',
+                        'white-space', 'width',
+                        'wrap-count', 'wrap-pixels',
+                        'z-offset'
+                    ],
+
+                'A-SKY': [
+                    'color', 'metalness', 'opacity',
+                    'phi-length', 'phi-start', 'radius',
+                    'repeat', 'roughness', 'segments-height',
+                    'segments-width', 'shader',
+                    'side', 'src',
+                    'theta-length', 'theta-start',
+                    'transparent'
+                    ],
+
+                'A-LIGHT': [
+                    'angle', 'color', 'decay', 'distance',
+                    'ground-color', 'intensity', 'penumbra',
+                    'type', 'target'
+                    ]
+            }
+           
+            
+
         },
 
         // == Model API ============================================================================
@@ -249,65 +329,19 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                     switch (propertyName) {
 
-                        // case "interpolation":
-                        //     aframeObject.setAttribute('interpolation', { duration: propertyValue});
-                        //         break;
-
                         case "worldPosition":
-                       
-                        break;
+                            break;
 
                         case "position":
-
-                        this.state.setAFrameProperty('position', propertyValue, aframeObject);
-                            // if (propertyValue.hasOwnProperty('x')) {
-                            //     aframeObject.setAttribute('position', propertyValue)
-                            // } else
-                            //     if (Array.isArray(propertyValue)) {
-                            //         aframeObject.setAttribute('position', { x: propertyValue[0], y: propertyValue[1], z: propertyValue[2] })
-                            //     } else if (typeof propertyValue === 'string') {
-                            //         aframeObject.setAttribute('position', AFRAME.utils.coordinates.parse(propertyValue))
-                            //     }
-
+                            this.state.setAFrameProperty('position', propertyValue, aframeObject);
                             break;
+
                         case "rotation":
-                        this.state.setAFrameProperty('rotation', propertyValue, aframeObject);
-                            // if (Array.isArray(propertyValue)) {
-                            //     aframeObject.setAttribute('rotation', { x: propertyValue[0], y: propertyValue[1], z: propertyValue[2] });
-                            // } else {
-                            //     aframeObject.setAttribute('rotation', AFRAME.utils.coordinates.parse(propertyValue));
-                            // }
+                            this.state.setAFrameProperty('rotation', propertyValue, aframeObject);
                             break;
+
                         case "scale":
                         this.state.setAFrameProperty('scale', propertyValue, aframeObject);
-                            // if (Array.isArray(propertyValue)) {
-                            //     aframeObject.setAttribute('scale', { x: propertyValue[0], y: propertyValue[1], z: propertyValue[2] });
-                            // } else {
-                            //     aframeObject.setAttribute('scale', AFRAME.utils.coordinates.parse(propertyValue));
-                            // }
-                            break;
-
-                        // case "color":
-                        //     aframeObject.setAttribute('color', propertyValue);
-                        //     break;
-
-                        // case "transparent":
-                        //     aframeObject.setAttribute('material', 'transparent', propertyValue);
-                        //     break;
-
-                        // case "opacity":
-                        //     aframeObject.setAttribute('material', 'opacity', propertyValue);
-                        //     break;
-
-                        case "fog":
-                            aframeObject.setAttribute('material', 'fog', propertyValue);
-                            break;
-
-                        case "wireframe":
-                            aframeObject.setAttribute('wireframe', propertyValue);
-                            break;
-                        case "wireframe-linewidth":
-                            aframeObject.setAttribute('wireframeLinewidth', propertyValue);
                             break;
 
                         case "clickable":
@@ -338,17 +372,6 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         //     break;
 
 
-                        case "src":
-                            aframeObject.setAttribute('src', propertyValue);
-                            break;
-                        case "repeat":
-                            aframeObject.setAttribute('repeat', propertyValue);
-                            break;
-
-                        case "side":
-                            aframeObject.setAttribute('material', {'side': propertyValue});
-                            break;
-
                         // case "look-controls-enabled":
                         //     aframeObject.setAttribute('look-controls', 'enabled', propertyValue);
                         //     break;
@@ -382,22 +405,18 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
-                if (value === undefined && aframeObject.nodeName == "A-SKY") {
+                if (value === undefined && aframeObject.nodeName == "IMG") {
                     value = propertyValue;
 
                     switch (propertyName) {
 
-                        case "color":
-                            aframeObject.setAttribute('color',propertyValue);
-                            break;
-
-                        case "side":
-                            aframeObject.setAttribute('side',propertyValue);
-                            break;
+                        case "itemID":
+                            aframeObject.setAttribute('id', propertyValue);
+                        break;
 
-                        case "src":
-                            aframeObject.setAttribute('src',propertyValue);
-                            break;
+                        case "itemSrc":
+                            aframeObject.setAttribute('src', propertyValue);
+                        break;
 
                         default:
                             value = undefined;
@@ -405,25 +424,18 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
-                if (value === undefined && aframeObject.nodeName == "A-TEXT") {
+                if (value === undefined && aframeObject.nodeName == "AUDIO") {
                     value = propertyValue;
 
                     switch (propertyName) {
 
-                        case "value":
-                            aframeObject.setAttribute('value', propertyValue);
-                            break;
-
-                        case "color":
-                            aframeObject.setAttribute('color', propertyValue);
-                            break;
-                        case "side":
-                            aframeObject.setAttribute('side', propertyValue);
-                            break;
+                        case "itemID":
+                            aframeObject.setAttribute('id', propertyValue);
+                        break;
 
-                        case "font":
-                            aframeObject.setAttribute('font', propertyValue);
-                            break;
+                        case "itemSrc":
+                            aframeObject.setAttribute('src', propertyValue);
+                        break;
 
                         default:
                             value = undefined;
@@ -431,6 +443,25 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
+                if (value === undefined && aframeObject.nodeName == "A-SKY") {
+                    value = propertyValue;
+
+                    self.aframeDef['A-SKY'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
+                            value = undefined;
+                    })
+                }
+
+                if (value === undefined && aframeObject.nodeName == "A-TEXT") {
+                    value = propertyValue;
+
+                    self.aframeDef['A-TEXT'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
+                            value = undefined;
+                    })
+                   
+                }
+
                 if (value === undefined && aframeObject.nodeName == "A-SCENE") {
                     value = propertyValue;
 
@@ -444,9 +475,9 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         aframeObject.setAttribute('background', {'transparent': propertyValue} );
                         break;
 
-                        case "fog":
-                            aframeObject.setAttribute('fog', propertyValue);
-                            break;
+                        // case "fog":
+                        //     aframeObject.setAttribute('fog', propertyValue);
+                        //     break;
                         case "assets":
                             let assetsEl = document.querySelector('a-assets');
                             if (!assetsEl) {
@@ -481,66 +512,43 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
-                if (value === undefined && aframeObject.nodeName == "A-BOX") {
-                    value = propertyValue;
-
-                    switch (propertyName) {
+   
+   
+                
 
-                        case "depth":
-                            aframeObject.setAttribute('depth', propertyValue);
-                            break;
-                        case "height":
-                            aframeObject.setAttribute('height', propertyValue);
-                            break;
-                        case "width":
-                            aframeObject.setAttribute('width', propertyValue);
-                            break;
-
-                        case "color":
-                           
-                            // let materialName = '/' + node.name + '/material';
-                            // let materialID = vwf.find('', materialName)[0];
-                            // if (materialID) {
-                            //     //self.kernel.setProperty(materialID, 'color', propertyValue)
-                            // }   else {
-                            //     aframeObject.setAttribute('color', propertyValue);
-                            // }
-                            
-                            aframeObject.setAttribute('color', propertyValue);
-
-                            break;
 
+                if (value === undefined && aframeObject.nodeName == "A-BOX") {
+                    value = propertyValue;
 
-                        default:
+                    self.aframeDef['A-BOX'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
                             value = undefined;
-                            break;
-                    }
+                    })
                 }
 
                 if (value === undefined && aframeObject.nodeName == "A-LIGHT") {
                     value = propertyValue;
 
-                    switch (propertyName) {
+                    self.aframeDef['A-LIGHT'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
+                            value = undefined;
+                    })
 
-                        //"angle", "color", "decay", "distance", "ground-color", "intensity", "penumbra", "type", "target"
-                        case "color":
-                            aframeObject.setAttribute('color', propertyValue);
-                            break;
-                        case "type":
-                            aframeObject.setAttribute('type', propertyValue);
-                            break;
-                        case "intensity":
-                            aframeObject.setAttribute('intensity', propertyValue);
-                            break;
-                        case "distance":
-                            aframeObject.setAttribute('distance', propertyValue);
+                    switch (propertyName) {
+                        case "castShadow":
+                            aframeObject.setAttribute('light', 'castShadow', propertyValue);
                             break;
 
+                        case "shadowCameraVisible":
+                            aframeObject.setAttribute('light', 'shadowCameraVisible', propertyValue);
+                            break;
 
                         default:
                             value = undefined;
-                            break;
+                            break; 
+
                     }
+
                 }
 
                 if (value === undefined && aframeObject.nodeName == "A-GLTF-MODEL") {
@@ -620,34 +628,20 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                 if (value === undefined && aframeObject.nodeName == "A-PLANE") {
                     value = propertyValue;
 
-                    switch (propertyName) {
-
-                        case "height":
-                            aframeObject.setAttribute('height', propertyValue);
-                            break;
-                        case "width":
-                            aframeObject.setAttribute('width', propertyValue);
-                            break;
-
-
-                        default:
+                    self.aframeDef['A-PLANE'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
                             value = undefined;
-                            break;
-                    }
+                    })
+
                 }
 
                 if (value === undefined && aframeObject.nodeName == "A-SPHERE") {
                     value = propertyValue;
 
-                    switch (propertyName) {
-                        case "radius":
-                            aframeObject.setAttribute('radius', propertyValue);
-                            break;
-
-                        default:
+                    self.aframeDef['A-SPHERE'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
                             value = undefined;
-                            break;
-                    }
+                    })
                 }
 
 
@@ -760,13 +754,6 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                     switch (propertyName) {
 
-                        // case "interpolation":
-                        //     var interpolation = aframeObject.getAttribute('interpolation');
-                        //     if (interpolation !== null && interpolation !== undefined) {
-                        //         value = interpolation.duration;
-                        //     }
-                        //     break;
-
                         case "worldPosition":
                         var pos = aframeObject.object3D.getWorldPosition();
                         if (pos !== undefined) {
@@ -794,55 +781,10 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             }
                             break;
 
-                       
-
-                        case "side":
-                        if (aframeObject.getAttribute('material')) {
-                            value = aframeObject.getAttribute('material').side;
-                        }
-                            break;
-
-                        case "fog":
-                            if (aframeObject.getAttribute('material')) {
-                                value = aframeObject.getAttribute('material').fog;
-                            }
-                            break;
-
-                         // case "color":
-                        //     value = aframeObject.getAttribute('color');
-                        //     break;
-
-
-                        // case "opacity":
-                        //     if (aframeObject.getAttribute('material')) {
-                        //         value = aframeObject.getAttribute('material').opacity;
-                        //     }
-                        //     break;
-
-                        // case "transparent":
-                        //     if (aframeObject.getAttribute('material')) {
-                        //         value = aframeObject.getAttribute('material').transparent;
-                        //     }
-                        //     break;
-
-                        case "wireframe":
-                            value = aframeObject.getAttribute('wireframe');
-                            break;
-
-                        case "wireframe-linewidth":
-                            value = aframeObject.getAttribute('wireframeLinewidth');
-                            break;
-
                         case "clickable":
                             value = node.events.clickable;
                             break;
 
-                        case "src":
-                            value = aframeObject.getAttribute('src');
-                            break;
-                        case "repeat":
-                            value = aframeObject.getAttribute('repeat');
-
                         // case "look-controls-enabled":
                         //     var look = aframeObject.getAttribute('look-controls-enabled');
                         //     if (look !== null && look !== undefined) {
@@ -881,12 +823,44 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
+                if (value === undefined && aframeObject.nodeName == "IMG") {
+
+                    switch (propertyName) {
+                        
+                        case "itemID":
+                            value = aframeObject.getAttribute('id');
+                        break;
+                    
+                        case "itemSrc":
+                            value = aframeObject.getAttribute('src');
+                        break;
+
+                      
+                    }
+                }
+
+                if (value === undefined && aframeObject.nodeName == "AUDIO") {
+
+                    switch (propertyName) {
+                        
+                        case "itemID":
+                            value = aframeObject.getAttribute('id');
+                        break;
+                    
+                        case "itemSrc":
+                            value = aframeObject.getAttribute('src');
+                        break;
+
+                      
+                    }
+                }
+
                 if (value === undefined && aframeObject.nodeName == "A-SCENE") {
 
                     switch (propertyName) {
-                        case "fog":
-                            value = aframeObject.getAttribute('fog');
-                            break;
+                        // case "fog":
+                        //     value = aframeObject.getAttribute('fog');
+                        //     break;
                         
                         case "color":
                         if (aframeObject.getAttribute('background')) {
@@ -904,97 +878,71 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 if (value === undefined && aframeObject.nodeName == "A-SKY") {
                     
-                                        switch (propertyName) {
-                                            case "color":
-                                                value = aframeObject.getAttribute('color');
-                                                break;
-                                            case "side":
-                                                value = aframeObject.getAttribute('side');
-                                                break;
-                                            case "src":
-                                                value = aframeObject.getAttribute('src');
-                                                break;
-                                        }
-                                    }
-
-                if (value === undefined && aframeObject.nodeName == "A-BOX") {
-
-                    switch (propertyName) {
-                        case "depth":
-                            value = aframeObject.getAttribute('depth');
-                            break;
-                        case "height":
-                            value = aframeObject.getAttribute('height');
-                            break;
-                        case "width":
-                            value = aframeObject.getAttribute('width');
-                            break;
-                        case "color":
-                            value = aframeObject.getAttribute('color');
-
-
+                    self.aframeDef['A-SKY'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
 
-                            break;
-                    }
                 }
 
+               
+
                 if (value === undefined && aframeObject.nodeName == "A-LIGHT") {
 
-                    //"angle", "color", "decay", "distance", "ground-color", "intensity", "penumbra", "type", "target"
+                    self.aframeDef['A-LIGHT'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
+
                     switch (propertyName) {
-                        case "color":
-                            value = aframeObject.getAttribute('color');
+                        case "castShadow":
+                        value = aframeObject.getAttribute('light').castShadow;
                             break;
-                        case "type":
-                            value = aframeObject.getAttribute('type');
-                            break;
-                        case "distance":
-                            value = aframeObject.getAttribute('distance');
-                            break;
-                        case "intensity":
-                            value = aframeObject.getAttribute('intensity');
+
+                        case "shadowCameraVisible":
+                        value = aframeObject.getAttribute('light').shadowCameraVisible;
                             break;
+
                     }
+
                 }
 
+                if (value === undefined && aframeObject.nodeName == "A-BOX") {
+    
+                    self.aframeDef['A-BOX'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
+            }
+
                 if (value === undefined && aframeObject.nodeName == "A-PLANE") {
 
-                    switch (propertyName) {
-                        case "height":
-                            value = aframeObject.getAttribute('height');
-                            break;
-                        case "width":
-                            value = aframeObject.getAttribute('width');
-                            break;
-                    }
+                   self.aframeDef['A-PLANE'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
                 }
 
                 if (value === undefined && aframeObject.nodeName == "A-SPHERE") {
 
-                    switch (propertyName) {
-                        case "radius":
-                            value = aframeObject.getAttribute('radius');
-                            break;
-                    }
+                    self.aframeDef['A-SPHERE'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
                 }
 
                 if (value === undefined && aframeObject.nodeName == "A-TEXT") {
 
-                    switch (propertyName) {
-                        case "value":
-                            value = aframeObject.getAttribute('value');
-                            break;
-
-                        case "color":
-                            value = aframeObject.getAttribute('color');
-                            break;
-                        case "side":
-                            value = aframeObject.getAttribute('side');
-                            break;
-                        case "font":
-                            value = aframeObject.getAttribute('font');
-                            break;
-                    }
+                    self.aframeDef['A-TEXT'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
                 }
 
 
@@ -1155,6 +1103,29 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                 aframeObj.setAttribute('src', "");
                 assets.appendChild(aframeObj);
             }
+        
+        } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-image-item.vwf")) {
+
+            let assets = document.querySelector('a-assets');
+            if (assets){
+
+                aframeObj = document.createElement('img');
+                aframeObj.setAttribute('id', "item-"+GUID());
+                aframeObj.setAttribute('src', "");
+                assets.appendChild(aframeObj);
+            }
+
+        } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/a-asset-audio-item.vwf")) {
+
+            let assets = document.querySelector('a-assets');
+            if (assets){
+
+                aframeObj = document.createElement('audio');
+                aframeObj.setAttribute('id', "item-"+GUID());
+                aframeObj.setAttribute('src', "");
+                assets.appendChild(aframeObj);
+            }
+
 
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/asky.vwf")) {
             aframeObj = document.createElement('a-sky');
@@ -1190,7 +1161,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
             aframeObj = document.createElement('a-entity');
         }
 
-        if (aframeObj.nodeName !== "A-ASSET-ITEM"){
+        if (aframeObj.nodeName !== "A-ASSET-ITEM" && aframeObj.nodeName !== "IMG" && aframeObj.nodeName !== "AUIDO"){
             aframeObj.setAttribute('id', node.ID);
         }
 
@@ -1210,7 +1181,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                     parent.children.push(node.ID);
                     //console.info( "Adding child: " + childID + " to " + nodeID );
-                    if (node.aframeObj.nodeName !== "A-ASSET-ITEM"){
+                    if (node.aframeObj.nodeName !== "A-ASSET-ITEM" && node.aframeObj.nodeName !== "IMG" && node.aframeObj.nodeName !== "AUIDO"){
                     parent.aframeObj.appendChild(node.aframeObj);
                     }
                 }

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

@@ -274,6 +274,33 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
+                if (value === undefined && isAShadowDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
+
+                        value = propertyValue;
+                        let parentNodeAF = aframeObject.el;
+
+
+                        switch (propertyName) {
+
+                            case "cast":
+                                parentNodeAF.setAttribute('shadow', 'cast', propertyValue);
+                                break;
+    
+                            case "receive":
+                                parentNodeAF.setAttribute('shadow', 'receive', propertyValue);
+                                break;
+
+                            default:
+                                value = undefined;
+                                break;
+                        }
+
+
+                    }
+                }
+
+
                 if (value === undefined && isAMaterialDefinition(node.prototypes)) {
                     if (aframeObject.el.getAttribute(aframeObject.compName)) {
 
@@ -285,14 +312,45 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             element == propertyName ? parentNodeAF.setAttribute('material', element, propertyValue) :
                                 value = undefined;
                         })
+                    }
+                }
 
+                if (value === undefined && isAFogDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
                     
+                        value = propertyValue;
+                        let parentNodeAF = aframeObject.el;
+                        let defs = ['fogType', 'fogColor', 'density', 'near', 'far'];
+
+                        defs.forEach(element => {
+                            if (element == propertyName){
+
+                                switch (element) {
+                    
+                                    case 'fogType':
+                                    parentNodeAF.setAttribute('fog', 'type', propertyValue);
+                                        break;
 
+                                    case 'fogColor':
+                                        parentNodeAF.setAttribute('fog', 'color', propertyValue);
+                                            break;
 
+                                    default:
+                                            value = parentNodeAF.setAttribute('fog', element, propertyValue);
+                                            break;
+                                }
+
+
+                                
+                            } else {
+                                value = undefined
+                            }
+                            // element == propertyName ? parentNodeAF.setAttribute('fog', element, propertyValue) :
+                            //     value = undefined;
+                        })
                     }
                 }
 
-
                 if (value === undefined && isARayCasterDefinition(node.prototypes)) {
                     if (aframeObject.el.getAttribute(aframeObject.compName)) {
 
@@ -579,6 +637,59 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     })
                 }
 
+                
+                if (value === undefined && isAFogDefinition(node.prototypes)) {
+                    value = propertyValue;
+
+                    let parentNodeAF = aframeObject.el;
+                    let defs = ['fogType', 'color', 'density', 'near', 'far'];
+
+                    defs.forEach(element => {
+                        if (element == propertyName) {
+
+
+                            switch (element) {
+
+                                case 'fogType':
+        
+                                    value = parentNodeAF.getAttribute('fog').type;
+                                    break;
+                                
+                                case 'fogColor':
+        
+                                    value = parentNodeAF.getAttribute('fog').color;
+                                    break;
+                                
+                                default:
+                                    value = parentNodeAF.getAttribute('fog').element; 
+                                    break;
+
+                            }
+
+                        }
+                    })
+                }
+
+                if (value === undefined && isAShadowDefinition(node.prototypes)) {
+                    value = propertyValue;
+
+                    // let parentNodeAF = self.state.nodes[node.parentID].aframeObj;
+                    let parentNodeAF = aframeObject.el;
+
+                    switch (propertyName) {
+
+                        case "cast":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).cast;
+                            break;
+
+                        case "receive":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).receive;
+                            break;
+
+
+                    }
+                }
+
 
                 if (value === undefined && isALineDefinition(node.prototypes)) {
                     value = propertyValue;
@@ -862,6 +973,26 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         return found;
     }
 
+    function isAFogDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/aSceneFogComponent.vwf");
+            }
+        }
+        return found;
+    }
+
+    function isAShadowDefinition(prototypes) {
+        var found = false;
+        if (prototypes) {
+            for (var i = 0; i < prototypes.length && !found; i++) {
+                found = (prototypes[i] == "http://vwf.example.com/aframe/shadowComponent.vwf");
+            }
+        }
+        return found;
+    }
+
     function isARayCasterDefinition(prototypes) {
         var found = false;
         if (prototypes) {
@@ -919,7 +1050,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         var sceneEl = document.querySelector('a-scene');
 
         aframeObj.id = node.parentID;
-        aframeObj.el = sceneEl.children[node.parentID];
+       // aframeObj.el = sceneEl.children[node.parentID];
         aframeObj.el = Array.from(sceneEl.querySelectorAll('*')).filter(item => { return item.id == aframeObj.id })[0];
 
 
@@ -946,6 +1077,21 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
             
                     }
 
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/aSceneFogComponent.vwf")) {
+
+            // aframeObj.el.setAttribute(node.type, {});
+
+            aframeObj = {};
+            //var sceneEl = document.querySelector('a-scene');
+    
+            aframeObj.id = node.parentID;
+            aframeObj.el = document.querySelector('a-scene');
+
+            aframeObj.compName = "fog";
+            aframeObj.el.setAttribute('fog', {});
+
+        }
+
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/raycasterComponent.vwf")) {
 
 
@@ -955,6 +1101,16 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
         }
 
+        
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/shadowComponent.vwf")) {
+            
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "shadow";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/viewOffsetCamera-component.vwf")) {
             
             // aframeObj.el.setAttribute(node.type, {});

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

@@ -163,21 +163,50 @@ define(["module", "vwf/view"], function (module, view) {
                 return;
             }
 
+            if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {
+
+                //console.log("sat new item");
+                let elID = '#' + node.aframeObj.getAttribute('id');
+                Object.entries(this.state.nodes).forEach(el => {
+                    let src = el[1].aframeObj.getAttribute('src');
+                    if (src){
+                       // console.log("my: " + src);
+                        if (src == elID)
+                        self.kernel.callMethod(el[0], "updateSrc", [elID])
+                    }
+                })
+
+            }
+
+            if (node.aframeObj.nodeName == "IMG" && propertyName == 'itemSrc') {
+
+                //console.log("sat new item");
+                let elID = '#' + node.aframeObj.getAttribute('id');
+                Object.entries(this.state.nodes).forEach(el => {
+                    let src = el[1].aframeObj.getAttribute('src');
+                    if (src){
+                       // console.log("my: " + src);
+                        if (src == elID)
+                        self.kernel.callMethod(el[0], "updateSrc", [elID])
+                    }
+                })
+
+            }
 
             if (node.aframeObj.nodeName == "A-ASSET-ITEM" && propertyName == 'itemSrc') {
 
-                console.log("sat new item");
+                //console.log("sat new item");
                 let elID = '#' + node.aframeObj.getAttribute('id');
                 Object.entries(this.state.nodes).forEach(el => {
                     let src = el[1].aframeObj.getAttribute('src');
                     let mtl = el[1].aframeObj.getAttribute('mtl');
                     if (src){
-                        console.log("my: " + src);
+                       // console.log("my: " + src);
                         if (src == elID)
-                        self.kernel.callMethod(el[0], "updateModelObj", [elID])
+                        self.kernel.callMethod(el[0], "updateModel", [elID])
                     }
                     if (mtl){
-                        console.log("my: " + mtl);
+                       // console.log("my: " + mtl);
                         if (mtl == elID)
                         self.kernel.callMethod(el[0], "updateModelMtl", [elID])
                     }

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

@@ -401,10 +401,10 @@ define([
                                                             $type: "div",
                                                             class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                             $components: [
-                                                                self.avatarCardDef("/../assets/avatars/ico/female.jpg", { title: "Human", subtitle: "Female" },
+                                                                self.avatarCardDef("/assets/avatars/ico/female.jpg", { title: "Human", subtitle: "Female" },
                                                                     function (e) {
                                                                         let avatarID = 'avatar-' + self.kernel.moniker();
-                                                                        vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/../assets/avatars/female/avatar1.gltf"]);
+                                                                        vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/assets/avatars/female/avatar1.gltf"]);
                                                                     }
                                                                 )]
                                                         },
@@ -413,10 +413,10 @@ define([
                                                             $type: "div",
                                                             class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
                                                             $components: [
-                                                                self.avatarCardDef("/../assets/avatars/ico/male.jpg", { title: "Human", subtitle: "Male" },
+                                                                self.avatarCardDef("/assets/avatars/ico/male.jpg", { title: "Human", subtitle: "Male" },
                                                                     function (e) {
                                                                         let avatarID = 'avatar-' + self.kernel.moniker();
-                                                                        vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/../assets/avatars/male/avatar1.gltf"]);
+                                                                        vwf_view.kernel.callMethod(avatarID, "createAvatarFromGLTF", ["/assets/avatars/male/avatar1.gltf"]);
                                                                     }
                                                                 )]
                                                         }
@@ -962,7 +962,7 @@ define([
                                             $cell: true,
                                             $type: "input",
                                             type: "text",
-                                            value: this._prop.value,
+                                            value: this._prop.getValue(),
                                             onchange: function (e) {
                                                 let propValue = this.value;
                                                 try {
@@ -1587,7 +1587,6 @@ define([
                         return (!this._displayedProperties[prop[1].prop.name]) ? (this._displayedProperties[prop[1].prop.name] = prop[1].prototype, true) : (false);
                     };
                     let props = Object.entries(getProperties.call(self, self.kernel, node.extendsID)).filter(filterFunction.bind(this));
-
                     return props
                 },
                 $update: function () {
@@ -1866,14 +1865,14 @@ define([
                                 document.getElementById('picker-indicator'),
                                 mouseSlide, mousePicker
                             );
-                            if (myEl._propName == 'color') {
-
+                            if (myEl._propName.toLowerCase().includes('color')) {
+                               
                                 // console.log(hex);    
                                 document.querySelector('#propAceEditor').env.editor.setValue(JSON.stringify(hex));
                                 self.kernel.setProperty(myEl._editorNode, myEl._propName, hex);
                             }
                         });
-                    if (myEl._propName == 'color') {
+                    if (myEl._propName.toLowerCase().includes('color')) {
                         cp.setHex(JSON.parse(myEl._prop.body));
                     }
                 },
@@ -1957,7 +1956,7 @@ define([
                     var livePropertyComponent = {}
 
                     if (this._prop.type == 'simple') {
-                        if (this._propName == 'color') {
+                        if (this._propName.toLowerCase().includes('color')) {
                             livePropertyComponent = colorPickerComponent
                         }
                         

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

@@ -0,0 +1,10 @@
+#https://aframe.io/docs/0.6.0/components/line.html#properties_visible
+---
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties:
+  fogType:
+  fogColor:
+  density:
+  near:
+  far:

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

@@ -3,10 +3,32 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-box"
 properties:
+  ambient-occlusion-map:
+  ambient-occlusion-map-intensity:
+  ambient-occlusion-texture-offset:
+  ambient-occlusion-texture-repeat:
+  color:
   depth:
+  displacement-bias:
+  displacement-map:
+  displacement-scale:
+  displacement-texture-offset:
+  displacement-texture-repeat:
+  env-map:
+  fog:
   height:
-  width:
+  metalness:
+  normal-map:
+  normal-scale:
+  normal-texture-offset:
+  normal-texture-repeat:
+  repeat: 
+  roughness:
   segments-depth:
   segments-height:
   segments-width:
-  color:
+  spherical-env-map:
+  src:
+  width:
+  wireframe:
+  wireframe-linewidth:

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

@@ -0,0 +1,10 @@
+this.updateModel = function(srcID){
+
+    if (srcID) {
+        this.src = "";
+        this.src = srcID;
+    }
+    
+
+}
+

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

@@ -3,4 +3,10 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-collada-model"
 properties:
-  src:
+  src:
+methods:
+  updateModel:
+    parameters:
+      - obj
+scripts:
+  - source: "http://vwf.example.com/aframe/acolladamodel.js"

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

@@ -22,3 +22,12 @@ this.showCloseGizmo = function () {
         }
     }
 }
+
+this.updateSrc = function(srcID){
+
+    if (srcID) {
+        this.src = "";
+        this.src = srcID;
+    }
+    
+}

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

@@ -6,22 +6,19 @@ properties:
   position:
   rotation:
   scale:
-  wireframe:
-  wireframe-linewidth:
   clickable:
-  src:
-  repeat:
-  fog:
   displayName:
   visible:
   edit:
   worldPosition:
-  side:
   osc:
 methods:
   setGizmoMode:
     parameters:
       - mode
   showCloseGizmo:
+  updateSrc:
+    parameters:
+      - src
 scripts:
   - source: "http://vwf.example.com/aframe/aentity.js"

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

@@ -0,0 +1,10 @@
+this.updateModel = function(srcID){
+
+    if (srcID) {
+        this.src = "";
+        this.src = srcID;
+    }
+    
+
+}
+

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

@@ -3,4 +3,10 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-gltf-model"
 properties:
-  src:
+  src:
+methods:
+  updateModel:
+    parameters:
+      - obj
+scripts:
+  - source: "http://vwf.example.com/aframe/agltfmodel.js"

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

@@ -11,4 +11,6 @@ properties:
   intensity:
   penumbra:
   type:
-  target:
+  target:
+  castShadow:
+  shadowCameraVisible:

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

@@ -1,4 +1,4 @@
-this.updateModelObj = function(srcID){
+this.updateModel = function(srcID){
 
     if (srcID) {
         this.src = "";

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

@@ -6,7 +6,7 @@ properties:
   src:
   mtl:
 methods:
-  updateModelObj:
+  updateModel:
     parameters:
       - obj
   updateModelMtl:

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

@@ -3,7 +3,30 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-plane"
 properties:
+  ambient-occlusion-map:
+  ambient-occlusion-map-intensity:
+  ambient-occlusion-texture-offset:
+  ambient-occlusion-texture-repeat:
+  color:
+  displacement-bias:
+  displacement-map:
+  displacement-scale:
+  displacement-texture-offset:
+  displacement-texture-repeat:
+  env-map:
+  fog:
   height:
-  width:
+  metalness:
+  normal-map:
+  normal-scale:
+  normal-texture-offset:
+  normal-texture-repeat:
+  repeat: 
+  roughness:
+  segments-height:
+  segments-width:
+  spherical-env-map:
   src:
-  repeat:
+  width:
+  wireframe:
+  wireframe-linewidth:

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

@@ -3,7 +3,6 @@
 extends: http://vwf.example.com/aframe/node.vwf
 type: "a-scene"
 properties:
-  fog:
   assets:
   color:
   transparent:

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

@@ -4,5 +4,18 @@ extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-sky"
 properties:
   color:
+  metalness:
+  opacity:
+  phi-length:
+  phi-start:
+  radius:
+  repeat:
+  roughness:
+  segments-height:
+  segments-width:
+  shader:
   side:
-  src:
+  src:
+  theta-length:
+  theta-start:
+  transparent:

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

@@ -3,4 +3,36 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-sphere"
 properties:
-  radius:
+  ambient-occlusion-map:
+  ambient-occlusion-map-intensity:
+  ambient-occlusion-texture-offset:
+  ambient-occlusion-texture-repeat:
+  color:
+  displacement-bias:
+  displacement-map:
+  displacement-scale:
+  displacement-texture-offset:
+  displacement-texture-repeat:
+  env-map:
+  fog:
+  height:
+  metalness:
+  normal-map:
+  normal-scale:
+  normal-texture-offset:
+  normal-texture-repeat:
+  phi-length:
+  phi-start:
+  radius: 
+  repeat:
+  roughness:
+  segments-depth:
+  segments-height:
+  segments-width:
+  spherical-env-map:
+  src: 
+  theta-length:
+  theta-start:
+  width:
+  wireframe:
+  wireframe-linewidth:

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

@@ -3,7 +3,24 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-text"
 properties:
-  value:
+  align:
+  alpha-test:
+  anchor:
+  baseline:
   color:
+  font:
+  font-image:
+  height:
+  letter-spacing:
+  line-height:
+  opacity:
+  shader:
   side:
-  font:
+  tab-size:
+  transparent:
+  value:
+  white-space:
+  width:
+  wrap-count:
+  wrap-pixels:
+  z-offset:

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

@@ -0,0 +1,7 @@
+#https://aframe.io/docs/0.6.0/components/line.html#properties_visible
+---
+extends: http://vwf.example.com/aframe/aentityComponent.vwf
+type: "component"
+properties:
+  cast:
+  receive: