Merge remote-tracking branch 'upstream/update2017'

public/aframe/index.vwf.yaml

@@ -16,9 +16,13 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      color: "#ECECEC"
-      side: "back"
-      fog: false
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#ECECEC"
+          side: "back"
+          fog: false
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -36,12 +40,15 @@ children:
     properties:
       position: "-1 0.5 -3"
       rotation: "0 -30 0"
-      color: "#3c7249"
       depth: 2
       height: 1
       width: 1
       clickable: true
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
       raycaster-listener:
         extends: http://vwf.example.com/aframe/app-raycaster-listener-component.vwf
         type: "component"
@@ -57,7 +64,7 @@ children:
         body: |
           if (this.clickable) {
           let genColor = this.generateColor();
-          this.color = genColor 
+          this.material.color = genColor 
             }
       intersectEventMethod:
         body: |
@@ -91,17 +98,23 @@ children:
     extends: http://vwf.example.com/aframe/asphere.vwf
     properties:
       position: "1 1.25 -4"
-      color: "#e0e014"
       radius: 1
-      wireframe: true
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#e0e014"
+          wireframe: true
       box2:
         extends: http://vwf.example.com/aframe/abox.vwf
         properties:
           position: "2 -0.75 0"
-          color: "#2167a5"
           depth: 1
         children:
+          material:
+            extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+            properties:
+              color: "#2167a5"
           interpolation:
             extends: http://vwf.example.com/aframe/interpolation-component.vwf
             properties:

public/aframe2/index.vwf.yaml

@@ -73,21 +73,28 @@ children:
     properties:
       position: "0 0 -3"
       rotation: "0 0 0"
-      color: "#3c7249"
       depth: 2
       height: 1
       width: 1
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
   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
       clickable: true
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
       raycaster-listener:
         extends: http://vwf.example.com/aframe/app-raycaster-listener-component.vwf
         type: "component"
@@ -108,7 +115,7 @@ children:
         body: |
           if (this.clickable) {
           let genColor = this.generateColor();
-          this.color = genColor 
+          this.material.color = genColor 
             }
       intersectEventMethod:
         body: |
@@ -142,26 +149,28 @@ children:
     extends: http://vwf.example.com/aframe/asphere.vwf
     properties:
       position: "1 1.25 -4"
-      color: "#e0e014"
       radius: 1
-      wireframe: true
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#e0e014"
+          wireframe: true
       box2:
-        extends: http://vwf.example.com/aframe/aentity.vwf
+        extends: http://vwf.example.com/aframe/abox.vwf
         properties:
           position: "2 -0.75 0"
+          depth: 1
         children:
-          cube:
-            extends: http://vwf.example.com/aframe/abox.vwf
+          material:
+            extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
             properties:
-              src: "#bg"
               color: "#2167a5"
-              depth: 1
-            children:
-              shadow:
-                extends: http://vwf.example.com/aframe/shadowComponent.vwf
-                properties:
-                  cast: true
+              src: "#bg"
+          shadow:
+            extends: http://vwf.example.com/aframe/shadowComponent.vwf
+            properties:
+              cast: true
           interpolation:
             extends: http://vwf.example.com/aframe/interpolation-component.vwf
             properties:
@@ -178,19 +187,26 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      src: "#sky"
-      side: "back"
-      fog: false
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          src: "#sky"
+          side: "back"
+          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"
-      src: "#bg2"
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          repeat: "10 10"
+          color: "white"
+          src: "#bg2"
       shadow:
         extends: http://vwf.example.com/aframe/shadowComponent.vwf
         properties:

public/gearvr/index.vwf.yaml

@@ -18,10 +18,14 @@ children:
     properties:
         height: 50
         width: 50
-        repeat: "10 10"
         rotation: [-90, 0, 0]
-        wireframe: false
-        src: "#bg2"
+    children:    
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          wireframe: false
+          src: "#bg2"
+          repeat: "10 10"
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -33,10 +37,14 @@ children:
     properties:
       position: "0 1 -3"
       rotation: "0 0 0"
-      color: "#3c7249"
       depth: 1
       height: 1
       width: 1
+    children:    
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
   newSky:
     extends: http://vwf.example.com/aframe/aentity.vwf
     children:

public/index.html

@@ -12,7 +12,8 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
   <script src="./web/lib/socketio/socket.io.js"></script>
   <link rel="stylesheet" href="./web/lib/app.css">
-  <script src="./web/lib/app.js"></script>
+  <!--<script src="./web/lib/polyglot-lang.js" type="module"></script> -->
+ <!-- <script src="./web/lib/app.js" type="module"></script> -->
 
   <!-- Global Site Tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-11815598-9"></script>
@@ -24,48 +25,143 @@
     gtag('config', 'UA-11815598-9');
 
   </script>
-
+  <!-- <script src="./web/lib/polyglot/polyglot.min.js"></script> -->
+  <script type="module">
+    import {getAppDetails} from '/web/lib/app.js';
+    //var socket = initWebSocket();
+    window.onload = getAppDetails('webapps.json');
+  </script>
 
 </head>
 
 <body class="mdc-typography">
 
-  <a href="https://github.com/NikolaySuslov/livecodingspace"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
+  <a href="https://github.com/NikolaySuslov/livecodingspace">
+    <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
+      alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png">
+  </a>
 
   <div id="header" class="mdc-layout-grid mdc-layout-grid--align-left">
     <div class="mdc-layout-grid__inner">
-      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
+      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10">
         <h1 class="mdc-typography--display3 mdc-theme--text-secondary-on-background mdc-typography">
-          <strong>LiveCoding</strong>.space
+            <a class="mdc-typography link-in-text" style="cursor: pointer;" onclick="window.location.reload(true)"><strong>LiveCoding</strong>.space</a>
+          <!--<strong>LiveCoding</strong>.space -->
         </h1>
       </div>
+      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
+          <span class="mdc-typography--subheading2 mdc-theme--text-secondary-on-background mdc-typography">
+              <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="#">RU</a>
+            <!--<strong>LiveCoding</strong>.space -->
+          </span>
+          <span class="mdc-typography--subheading2 mdc-theme--text-secondary-on-background mdc-typography">
+              <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="#">EN</a>
+            <!--<strong>LiveCoding</strong>.space -->
+          </span>
+        </div>
       <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
         <h1 class="mdc-typography mdc-typography--headline mdc-typography--adjust-margin mdc-theme--text-hint-on-background">
-          Collaborative Live Coding Space with support of user-defined languages and WebVR ready 3D graphics. <br> Based on: <strong>Virtual World Framework | A-Frame | Ohm language | OSC.js | and more... </strong> by Krestianstvo.org
+          Collaborative Live Coding Space with support of user-defined languages and WebVR ready 3D graphics.
+          <br> Based on:
+          <strong>Virtual World Framework | A-Frame | Ohm language | OSC.js | and more... </strong> by
+          <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background"
+            href="https://www.krestianstvo.org"><strong>Krestianstvo.org</strong></a>
         </h1>
       </div>
-      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
-        <iframe src="https://player.vimeo.com/video/239924195?title=0&byline=0&portrait=0" width="600" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+    </div>
+  </div>
+  <div id="about" class="mdc-layout-grid">
+    <div class="mdc-layout-grid__inner">
+      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
+        <h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Features</h1>
+
+        <ul class="featureList mdc-typography mdc-typography--title mdc-theme--text-hint-on-background">
+          <li>
+            <strong>Decentralized network model</strong> for
+            <strong>A-Frame</strong> components and entities based on
+            <strong>VWF</strong> replicated computation architecture</li>
+          <li>
+            <strong>Ohm</strong> language driver for sharing user-defined grammars, parsers, tokenisers inside virtual space</li>
+          <li>In browser
+            <strong>Code and Properties editor</strong> based on Cell.js</li>
+          <li>
+            <strong>OSC </strong>messaging through
+            <a class="mdc-typography link-in-text mdc-theme--text-hint-on-background" href="https://github.com/NikolaySuslov/osc-relay-lcs">OSC relay</a> on the client</li>
+          <li>
+            <strong>Avatars</strong> (Simple and GLTF models with animation)</li>
+          <li>
+            <strong>Multi-window</strong> or multi-monitor/multi-machine setups with view
+            <strong>offset cameras</strong>
+          </li>
+          <li>
+            <strong>WebRTC</strong> for video/audio streaming,
+            <strong>3D positional audio</strong> support</li>
+          <li>
+            <strong>GearVR, Windows MixedReality</strong> motion controllers</li>
+        </ul>
+      </div>
+
+      <div class="mdc-layout-grid__cell mdc-layout-grid__cell">
+        <iframe src="https://player.vimeo.com/video/239924195?title=0&byline=0&portrait=0" width="600" height="338" frameborder="0"
+          webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+
       </div>
-      <hr class="mdc-list-divider"/>
+
+    </div>
+  </div>
+  <hr class="mdc-list-divider mdc-theme--text-hint-on-background divider" />
+
+  <div id="info" class="mdc-layout-grid">
+    <div class="mdc-layout-grid__inner">
       <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
+        <h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Virtual Worlds</h1>
         <h1 class="mdc-typography mdc-typography--headline mdc-theme--text-hint-on-background">
-          To begin collaborative coding in virtual space, just start one of the listed prototypes and connect to it from another browser window using the generated link. The link will apper near the <strong>Start new</strong> button.
+          To begin collaborative coding in virtual space, just start one of the listed prototypes and connect to it from another browser
+          window using the generated link. The link will apper near the
+          <strong>Start new</strong> button.
         </h1>
       </div>
     </div>
   </div>
 
-  
-
   <div id="main">
   </div>
+  <hr class="mdc-list-divider mdc-theme--text-hint-on-background divider" />
 
+  <div id="videoList">
+    <div id="about" class="mdc-layout-grid">
+      <div class="mdc-layout-grid__inner">
+        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
+          <h1 class="mdc-typography--display1 mdc-theme--text-hint-on-background">Demo videos</h1>
 
-  <script>
-    //var socket = initWebSocket();
-    window.onload = getAppDetails('webapps.json');
-  </script>
+          <iframe src="https://player.vimeo.com/video/243291223?title=0&byline=0&portrait=0" width="600" height="337" frameborder="0"
+            webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+
+
+          <iframe src="https://player.vimeo.com/video/251057056?title=0&byline=0&portrait=0" width="600" height="338" frameborder="0"
+            webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+        </div>
+      </div>
+    </div>
+  </div>
+  <hr class="mdc-list-divider mdc-theme--text-hint-on-background divider" /> 
+
+  <div id="footer">
+<div id="about" class="mdc-layout-grid">
+      <div class="mdc-layout-grid__inner">
+          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-10">
+
+            </div>
+        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
+          <h3 class="mdc-typography--subheading2 mdc-theme--text-hint-on-background"><a class="mdc-typography link-in-text mdc-theme--text-hint-on-background"
+            href="https://www.krestianstvo.org">Krestianstvo.org</a> 2018</h3>
+        </div>
+      </div>
+    </div>
+   
+  </div>
+ 
+  
 
   <script>
     mdc.autoInit()

public/multipixel/index.vwf.yaml

@@ -10,9 +10,13 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      color: "#ECECEC"
-      side: "back"
-      fog: false
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#ECECEC"
+          side: "back"
+          fog: false
   myLightSG:
     extends: http://vwf.example.com/aframe/alight.vwf
     properties:
@@ -74,36 +78,52 @@ children:
     properties:
       position: "10 0.5 0"
       rotation: "0 -30 0"
-      color: "#3c7249"
       depth: 2
       height: 5
       width: 2
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
   sphere:
     extends: http://vwf.example.com/aframe/asphere.vwf
     properties:
       position: "7 15 -25"
-      color: "#e0e014"
       radius: 5
-      wireframe: true
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#e0e014"
+          wireframe: true
   box2:
     extends: http://vwf.example.com/aframe/abox.vwf
     properties:
       position: "0 0 -35"
       rotation: "0 0 0"
-      color: "white"
       depth: 1
       height: 50
       width: 50
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "white"
   groundPlane:
     extends: http://vwf.example.com/aframe/aplane.vwf
     properties:
       height: 100
       width: 100
-      repeat: "10 10"
       rotation: "-90 0 0"
-      color: "white"
-      wireframe: false
-      src: "#bg2"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "white"
+          wireframe: false
+          src: "#bg2"
+          repeat: "10 10"
   multicam:
       extends: http://vwf.example.com/aframe/abox.vwf
       properties:
@@ -112,10 +132,13 @@ children:
         depth: 0.5
         height: 0.5
         width: 0.5
-        opacity: 0.5
-        transparent: true
-        color: "green"
       children:
+        material:
+          extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+          properties:
+            opacity: 0.5
+            transparent: true
+            color: "green"
         interpolation:
           extends: http://vwf.example.com/aframe/interpolation-component.vwf
           properties:

public/ohmlang-calc/index.vwf.yaml

@@ -16,10 +16,14 @@ children:
     properties:
       height: 50
       width: 50
-      repeat: "10 10"
       rotation: [-90, 0, 0]
-      wireframe: false
-      src: "#bg2"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          wireframe: false
+          src: "#bg2"
+          repeat: "10 10"
   calcResult:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -131,5 +135,9 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      color: "#ECECEC"
-      side: "back"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#ECECEC"
+          side: "back"

public/ohmlang-lsys/index.vwf.yaml

@@ -20,17 +20,19 @@ children:
         properties:
             height: 50
             width: 50
-            repeat: "10 10"
             rotation: [-90, 0, 0]
-            wireframe: false
-            src: "#bg2"
+        children:
+            material:
+                extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+                properties:
+                    wireframe: false
+                    src: "#bg2"
+                    repeat: "10 10"
     turtle:
         extends: http://vwf.example.com/aframe/asphere.vwf
         properties:
             position: [1, 1.25, -4]
-            color: "#e0e014"
             radius: 0.2
-            wireframe: true
             angleInRadians: 0
             iteration: 3
             angle: 60  
@@ -41,6 +43,11 @@ children:
             lsys: ''
             readyForDraw: true
         children:
+            material:
+                extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+                properties:
+                    wireframe: true
+                    color: "#e0e014"
             drawNode:
                 extends: http://vwf.example.com/aframe/aentity.vwf
                 children:

public/osc-example/index.vwf.yaml

@@ -3,9 +3,16 @@
 ---
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
-  fog: "type: linear; color: #ECECEC; far: 20; near: 0"
   assets: "assets.json"
 children:
+  fog:
+    extends: http://vwf.example.com/aframe/aSceneFogComponent.vwf
+    type: "component"
+    properties:
+      fogType: "linear"
+      fogColor: "#ECECEC"
+      far: 20
+      near: 0
   myLight:
     extends: http://vwf.example.com/aframe/alight.vwf
     properties:
@@ -18,10 +25,14 @@ children:
     properties:
         height: 50
         width: 50
-        repeat: "10 10"
         rotation: [-90, 0, 0]
-        wireframe: false
-        src: "#bg2"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          wireframe: false
+          src: "#bg2"
+          repeat: "10 10"
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -33,18 +44,25 @@ children:
     properties:
       position: "0 1 -3"
       rotation: "0 0 0"
-      color: "#3c7249"
       depth: 1
       height: 1
       width: 1
     children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"
       sphere:
         extends: http://vwf.example.com/aframe/asphere.vwf
         properties:
           position: "0 2 0"
           rotation: "0 0 0"
-          color: "#3c7249"
           radius: 0.4
+        children:
+          material:
+            extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+            properties:
+              color: "#3c7249"
   newSky:
     extends: http://vwf.example.com/aframe/aentity.vwf
     children:

public/web/lib/app.css

@@ -30,3 +30,50 @@ background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(
   background: #E7E7E7;
 }
 
+
+a.link-in-text {
+  outline: none;
+  text-decoration: none;
+  color: inherit;
+  border-bottom: 1px solid;
+}
+
+
+a.link-in-text:link {
+  border-bottom: 1px solid;
+}
+
+
+
+a.link-in-text:visited {
+  border-bottom: 1px solid;
+}
+
+
+a.link-in-text:focus {
+  border-bottom: 2px solid; 
+  
+}
+
+a.link-in-text:hover {   
+  border-bottom: 2px solid; 
+}
+
+a.link-in-text:active {
+  
+  border-bottom: 1px solid; 
+}
+
+/* 
+border-bottom: 1px solid; 
+background: rgb(237, 237, 237);
+background: rgb(217, 217, 217);
+*/
+
+.featureList {
+  list-style: square;
+}
+
+.divider {
+  border-bottom-width: thin;
+}

public/web/lib/app.js

@@ -1,3 +1,5 @@
+import { Lang } from '/web/lib/polyglot-lang.js';
+
 var options = {
     
         query: 'pathname=' + window.location.pathname.slice(1,
@@ -64,6 +66,38 @@ var options = {
             });
     }
     
+    function getSiteHeader(){
+        return  {
+            $type: "div",
+            class: "mdc-layout-grid",
+            $components: [
+                {
+                    $type: "div",
+                    class: "mdc-layout-grid__inner",
+                    $components: [
+                        {
+                            $cell: true,
+                            $type: "div",
+                            class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                            $components: [
+                                
+                        {
+                            $cell: true,
+                            $type: "h1",
+                            class: "mdc-typography--display1 mdc-theme--text-hint-on-background",
+                            $text: "Virtual Worlds"
+                        }
+                    ]
+                }
+                    ]
+                }
+            ]
+
+        }
+        
+        
+    }
+
     function parseWebAppDataForCell(data) {
     
         document.querySelector("#main").$cell({
@@ -93,7 +127,7 @@ var options = {
             },
             $update: function () {
                 this.$components = [
-                    // siteHeader,
+                   //getSiteHeader(),// siteHeader,
                     {
                         $type: "div",
                         class: "mdc-layout-grid",
@@ -148,7 +182,7 @@ var options = {
                             $components: [
                                 {
                                     $type: "a",
-                                    class: "mdc-button mdc-button--compact mdc-card__action mdc-button--raised",
+                                    class: "mdc-button mdc-button--compact mdc-card__action mdc-button--stroked",
                                     $text: "Start new",
                                     target: "_blank",
                                     href: "/" + desc[0],
@@ -289,5 +323,4 @@ var options = {
         }
     }
     
-    
-    
+    export {getAppDetails};

public/web/lib/polyglot-lang.js

@@ -0,0 +1,38 @@
+class Lang {
+    constructor() {
+        console.log("lang constructor");
+        this.polyglot = Polyglot;
+
+        if (localStorage.getItem('krestianstvo_locale')) {
+        } else {
+            localStorage.setItem('krestianstvo_locale', 'en');
+        }
+        this.locale = localStorage.getItem('krestianstvo_locale');
+    }
+
+    async getLang(langID) {
+        let response = await fetch("/web/locale/" + langID + ".json");
+        let data = await response.json();
+        return data
+    }
+
+    setLanguage(langID) {
+        var self = this;
+        return this.getLang(langID).then(phrases => {
+            this.language = new Polyglot({ phrases });
+        });
+    }
+
+    setLocale(langID){
+        localStorage.setItem('krestianstvo_locale', langID);
+        this.locale = langID;
+    }
+
+    changeLanguageTo(langID){
+        this.setLocale(langID);
+        this.setLanguage(langID);
+    }
+
+}
+
+  export {Lang};

public/web/lib/polyglot/polyglot.js

@@ -0,0 +1,301 @@
+//     (c) 2012 Airbnb, Inc.
+//
+//     polyglot.js may be freely distributed under the terms of the BSD
+//     license. For all licensing information, details, and documention:
+//     http://airbnb.github.com/polyglot.js
+//
+//
+// Polyglot.js is an I18n helper library written in JavaScript, made to
+// work both in the browser and in Node. It provides a simple solution for
+// interpolation and pluralization, based off of Airbnb's
+// experience adding I18n functionality to its Backbone.js and Node apps.
+//
+// Polylglot is agnostic to your translation backend. It doesn't perform any
+// translation; it simply gives you a way to manage translated phrases from
+// your client- or server-side JavaScript application.
+//
+
+
+(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], function() {
+      return factory(root);
+    });
+  } else if (typeof exports === 'object') {
+    module.exports = factory(root);
+  } else {
+    root.Polyglot = factory(root);
+  }
+}(this, function(root) {
+  'use strict';
+
+  // ### Polyglot class constructor
+  function Polyglot(options) {
+    options = options || {};
+    this.phrases = {};
+    this.extend(options.phrases || {});
+    this.currentLocale = options.locale || 'en';
+    this.allowMissing = !!options.allowMissing;
+    this.warn = options.warn || warn;
+  }
+
+  // ### Version
+  Polyglot.VERSION = '0.4.3';
+
+  // ### polyglot.locale([locale])
+  //
+  // Get or set locale. Internally, Polyglot only uses locale for pluralization.
+  Polyglot.prototype.locale = function(newLocale) {
+    if (newLocale) this.currentLocale = newLocale;
+    return this.currentLocale;
+  };
+
+  // ### polyglot.extend(phrases)
+  //
+  // Use `extend` to tell Polyglot how to translate a given key.
+  //
+  //     polyglot.extend({
+  //       "hello": "Hello",
+  //       "hello_name": "Hello, %{name}"
+  //     });
+  //
+  // The key can be any string.  Feel free to call `extend` multiple times;
+  // it will override any phrases with the same key, but leave existing phrases
+  // untouched.
+  //
+  // It is also possible to pass nested phrase objects, which get flattened
+  // into an object with the nested keys concatenated using dot notation.
+  //
+  //     polyglot.extend({
+  //       "nav": {
+  //         "hello": "Hello",
+  //         "hello_name": "Hello, %{name}",
+  //         "sidebar": {
+  //           "welcome": "Welcome"
+  //         }
+  //       }
+  //     });
+  //
+  //     console.log(polyglot.phrases);
+  //     // {
+  //     //   'nav.hello': 'Hello',
+  //     //   'nav.hello_name': 'Hello, %{name}',
+  //     //   'nav.sidebar.welcome': 'Welcome'
+  //     // }
+  //
+  // `extend` accepts an optional second argument, `prefix`, which can be used
+  // to prefix every key in the phrases object with some string, using dot
+  // notation.
+  //
+  //     polyglot.extend({
+  //       "hello": "Hello",
+  //       "hello_name": "Hello, %{name}"
+  //     }, "nav");
+  //
+  //     console.log(polyglot.phrases);
+  //     // {
+  //     //   'nav.hello': 'Hello',
+  //     //   'nav.hello_name': 'Hello, %{name}'
+  //     // }
+  //
+  // This feature is used internally to support nested phrase objects.
+  Polyglot.prototype.extend = function(morePhrases, prefix) {
+    var phrase;
+
+    for (var key in morePhrases) {
+      if (morePhrases.hasOwnProperty(key)) {
+        phrase = morePhrases[key];
+        if (prefix) key = prefix + '.' + key;
+        if (typeof phrase === 'object') {
+          this.extend(phrase, key);
+        } else {
+          this.phrases[key] = phrase;
+        }
+      }
+    }
+  };
+
+  // ### polyglot.clear()
+  //
+  // Clears all phrases. Useful for special cases, such as freeing
+  // up memory if you have lots of phrases but no longer need to
+  // perform any translation. Also used internally by `replace`.
+  Polyglot.prototype.clear = function() {
+    this.phrases = {};
+  };
+
+  // ### polyglot.replace(phrases)
+  //
+  // Completely replace the existing phrases with a new set of phrases.
+  // Normally, just use `extend` to add more phrases, but under certain
+  // circumstances, you may want to make sure no old phrases are lying around.
+  Polyglot.prototype.replace = function(newPhrases) {
+    this.clear();
+    this.extend(newPhrases);
+  };
+
+
+  // ### polyglot.t(key, options)
+  //
+  // The most-used method. Provide a key, and `t` will return the
+  // phrase.
+  //
+  //     polyglot.t("hello");
+  //     => "Hello"
+  //
+  // The phrase value is provided first by a call to `polyglot.extend()` or
+  // `polyglot.replace()`.
+  //
+  // Pass in an object as the second argument to perform interpolation.
+  //
+  //     polyglot.t("hello_name", {name: "Spike"});
+  //     => "Hello, Spike"
+  //
+  // If you like, you can provide a default value in case the phrase is missing.
+  // Use the special option key "_" to specify a default.
+  //
+  //     polyglot.t("i_like_to_write_in_language", {
+  //       _: "I like to write in %{language}.",
+  //       language: "JavaScript"
+  //     });
+  //     => "I like to write in JavaScript."
+  //
+  Polyglot.prototype.t = function(key, options) {
+    var phrase, result;
+    options = options == null ? {} : options;
+    // allow number as a pluralization shortcut
+    if (typeof options === 'number') {
+      options = {smart_count: options};
+    }
+    if (typeof this.phrases[key] === 'string') {
+      phrase = this.phrases[key];
+    } else if (typeof options._ === 'string') {
+      phrase = options._;
+    } else if (this.allowMissing) {
+      phrase = key;
+    } else {
+      this.warn('Missing translation for key: "'+key+'"');
+      result = key;
+    }
+    if (typeof phrase === 'string') {
+      options = clone(options);
+      result = choosePluralForm(phrase, this.currentLocale, options.smart_count);
+      result = interpolate(result, options);
+    }
+    return result;
+  };
+
+
+  // ### polyglot.has(key)
+  //
+  // Check if polyglot has a translation for given key
+  Polyglot.prototype.has = function(key) {
+    return key in this.phrases;
+  };
+
+
+  // #### Pluralization methods
+  // The string that separates the different phrase possibilities.
+  var delimeter = '||||';
+
+  // Mapping from pluralization group plural logic.
+  var pluralTypes = {
+    chinese:   function(n) { return 0; },
+    german:    function(n) { return n !== 1 ? 1 : 0; },
+    french:    function(n) { return n > 1 ? 1 : 0; },
+    russian:   function(n) { return n % 10 === 1 && n % 100 !== 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2; },
+    czech:     function(n) { return (n === 1) ? 0 : (n >= 2 && n <= 4) ? 1 : 2; },
+    polish:    function(n) { return (n === 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2); },
+    icelandic: function(n) { return (n % 10 !== 1 || n % 100 === 11) ? 1 : 0; }
+  };
+
+  // Mapping from pluralization group to individual locales.
+  var pluralTypeToLanguages = {
+    chinese:   ['fa', 'id', 'ja', 'ko', 'lo', 'ms', 'th', 'tr', 'zh'],
+    german:    ['da', 'de', 'en', 'es', 'fi', 'el', 'he', 'hu', 'it', 'nl', 'no', 'pt', 'sv'],
+    french:    ['fr', 'tl', 'pt-br'],
+    russian:   ['hr', 'ru'],
+    czech:     ['cs'],
+    polish:    ['pl'],
+    icelandic: ['is']
+  };
+
+  function langToTypeMap(mapping) {
+    var type, langs, l, ret = {};
+    for (type in mapping) {
+      if (mapping.hasOwnProperty(type)) {
+        langs = mapping[type];
+        for (l in langs) {
+          ret[langs[l]] = type;
+        }
+      }
+    }
+    return ret;
+  }
+
+  // Trim a string.
+  function trim(str){
+    var trimRe = /^\s+|\s+$/g;
+    return str.replace(trimRe, '');
+  }
+
+  // Based on a phrase text that contains `n` plural forms separated
+  // by `delimeter`, a `locale`, and a `count`, choose the correct
+  // plural form, or none if `count` is `null`.
+  function choosePluralForm(text, locale, count){
+    var ret, texts, chosenText;
+    if (count != null && text) {
+      texts = text.split(delimeter);
+      chosenText = texts[pluralTypeIndex(locale, count)] || texts[0];
+      ret = trim(chosenText);
+    } else {
+      ret = text;
+    }
+    return ret;
+  }
+
+  function pluralTypeName(locale) {
+    var langToPluralType = langToTypeMap(pluralTypeToLanguages);
+    return langToPluralType[locale] || langToPluralType.en;
+  }
+
+  function pluralTypeIndex(locale, count) {
+    return pluralTypes[pluralTypeName(locale)](count);
+  }
+
+  // ### interpolate
+  //
+  // Does the dirty work. Creates a `RegExp` object for each
+  // interpolation placeholder.
+  function interpolate(phrase, options) {
+    for (var arg in options) {
+      if (arg !== '_' && options.hasOwnProperty(arg)) {
+        // We create a new `RegExp` each time instead of using a more-efficient
+        // string replace so that the same argument can be replaced multiple times
+        // in the same phrase.
+        phrase = phrase.replace(new RegExp('%\\{'+arg+'\\}', 'g'), options[arg]);
+      }
+    }
+    return phrase;
+  }
+
+  // ### warn
+  //
+  // Provides a warning in the console if a phrase key is missing.
+  function warn(message) {
+    root.console && root.console.warn && root.console.warn('WARNING: ' + message);
+  }
+
+  // ### clone
+  //
+  // Clone an object.
+  function clone(source) {
+    var ret = {};
+    for (var prop in source) {
+      ret[prop] = source[prop];
+    }
+    return ret;
+  }
+
+  return Polyglot;
+}));

public/web/locale/en.json

@@ -0,0 +1,4 @@
+{
+    "home": "Home",
+    "App": "App"
+}

public/web/locale/ru.json

@@ -0,0 +1,4 @@
+{
+    "home": "Дом",
+    "App": "Программа"
+}

public/webrtc/index.vwf.yaml

@@ -3,19 +3,29 @@
 ---
 extends: http://vwf.example.com/aframe/ascene.vwf
 properties:
-  fog: "type: linear; color: #ECECEC; far: 20; near: 0"
   assets: "assets.json"
 children:
+  fog:
+    extends: http://vwf.example.com/aframe/aSceneFogComponent.vwf
+    type: "component"
+    properties:
+      fogType: "linear"
+      fogColor: "#ECECEC"
+      far: 20
+      near: 0
   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"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          wireframe: false
+          src: "#bg2"
+          repeat: "10 10"
   myLight:
     extends: http://vwf.example.com/aframe/alight.vwf
     properties:
@@ -26,10 +36,14 @@ children:
   sky:
     extends: http://vwf.example.com/aframe/asky.vwf
     properties:
-      color: "#ECECEC"
-      src: "#sky"
-      fog: false
-      side: "back"
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#ECECEC"
+          src: "#sky"
+          fog: false
+          side: "back"
   spaceText:
     extends: http://vwf.example.com/aframe/atext.vwf
     properties:
@@ -41,7 +55,11 @@ children:
     properties:
       position: "0 0 -3"
       rotation: "0 0 0"
-      color: "#3c7249"
       depth: 3
       height: 0.2
-      width: 3
+      width: 3
+    children:
+      material:
+        extends: http://vwf.example.com/aframe/aMaterialComponent.vwf
+        properties:
+          color: "#3c7249"

support/client/lib/index.css

@@ -256,8 +256,10 @@ input {
   /*visibility: hidden;*/
 }
 
+/* 
 .loadText {
 }
+*/
 
 
 .requirements {

support/client/lib/index.html

@@ -38,6 +38,7 @@
     <script type="text/javascript" src="vwf/view/lib/he.js"></script>
     <script type="text/javascript" src="vwf/view/lib/draggabilly.pkgd.js"></script>
     <script type="text/javascript" src="js/screenfull.min.js"></script>
+   <!-- <script type="text/javascript" src="vwf/view/lib/polyglot/polyglot.min.js"></script> -->
     
 
     <link rel="stylesheet" href="vwf/view/lib/mdc/dist/material-components-web.css">

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

@@ -95,49 +95,33 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
             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',
+                    'depth', 'height', 'segments-depth',
                     'segments-height', 'segments-width',
-                    'spherical-env-map', 'src', 'width',
-                    'wireframe', 'wireframe-linewidth'],
+                    'width'],
 
                 '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-depth',
                     'segments-height', 'segments-width',
-                    'spherical-env-map', 'src', 
-                    'theta-length', 'theta-start',
-                    'width',  'wireframe', 'wireframe-linewidth'
+                    'theta-length', 'theta-start'
+                ],
+
+                'A-CYLINDER': [
+                   'height', 'radius',
+                    'open-ended', 'radius-bottom', 'radius-top',
+                    'segments-height', 'segments-radial',
+                    'theta-length', 'theta-start'
+                ],
+
+                'A-CONE': [
+                    'height',
+                    'open-ended', 'radius-bottom', 'radius-top',
+                    'segments-height', 'segments-radial',
+                    'theta-length', 'theta-start'
                 ],
 
                 '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'
+                    'height', 'segments-height', 'segments-width','width'
                 ],
 
                 'A-TEXT': [
@@ -154,13 +138,9 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     ],
 
                 'A-SKY': [
-                    'color', 'metalness', 'opacity',
-                    'phi-length', 'phi-start', 'radius',
-                    'repeat', 'roughness', 'segments-height',
-                    'segments-width', 'shader',
-                    'side', 'src',
+                    'phi-length', 'phi-start', 'radius','segments-height',
+                    'segments-width',
                     'theta-length', 'theta-start',
-                    'transparent'
                     ],
 
                 'A-LIGHT': [
@@ -268,6 +248,27 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         },
 
 
+        // -- callingMethod ------------------------------------------------------------------------
+
+        callingMethod: function( nodeID, methodName, methodParameters ) {
+
+            var node = this.state.nodes[nodeID];
+
+            if(!node) return;
+
+            if (node && node.aframeObj ) {
+                if (methodName == 'lookAt') {
+                    console.log('lookAt: ' +  methodParameters[0]);
+                    let target = methodParameters[0];
+                    node.aframeObj.object3D.lookAt(new THREE.Vector3(target.x, target.y, target.z));
+                    let newRotation = node.aframeObj.getAttribute('rotation');
+                    self.kernel.setProperty(nodeID, "rotation", {x: 0, y: newRotation.y, z: 0});
+                }
+            }
+
+           
+        },
+
 
         // -- deletingNode -------------------------------------------------------------------------
 
@@ -656,6 +657,24 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     })
                 }
 
+                if (value === undefined && aframeObject.nodeName == "A-CYLINDER") {
+                    value = propertyValue;
+
+                    self.aframeDef['A-CYLINDER'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
+                            value = undefined;
+                    })
+                }
+
+                if (value === undefined && aframeObject.nodeName == "A-CONE") {
+                    value = propertyValue;
+
+                    self.aframeDef['A-CONE'].forEach(element => {
+                        element == propertyName ? aframeObject.setAttribute(element, propertyValue) :
+                            value = undefined;
+                    })
+                }
+
 
                 if (value === undefined && aframeObject.nodeName == "A-ANIMATION") {
                     value = propertyValue;
@@ -948,6 +967,24 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     })
                 }
 
+                if (value === undefined && aframeObject.nodeName == "A-CYLINDER") {
+
+                    self.aframeDef['A-CYLINDER'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
+                }
+
+                if (value === undefined && aframeObject.nodeName == "A-CONE") {
+
+                    self.aframeDef['A-CONE'].forEach(element => {
+                        if (element == propertyName) {
+                            value = aframeObject.getAttribute(element);
+                        }
+                    })
+                }
+
                 if (value === undefined && aframeObject.nodeName == "A-TEXT") {
 
                     self.aframeDef['A-TEXT'].forEach(element => {
@@ -1158,6 +1195,10 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
             aframeObj = document.createElement('a-box');
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/aplane.vwf")) {
             aframeObj = document.createElement('a-plane');
+        } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acylinder.vwf")) {
+            aframeObj = document.createElement('a-cylinder');
+        } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acone.vwf")) {
+            aframeObj = document.createElement('a-cone');
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/atext.vwf")) {
             aframeObj = document.createElement('a-text');
         } else if (self.state.isAFrameClass(protos, "http://vwf.example.com/aframe/acolladamodel.vwf")) {

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

@@ -65,7 +65,9 @@ AFRAME.registerComponent('interpolation', {
   tick: function (t, dt) {
 
     if (!this.node) {
-      let interNode = Object.entries(this.driver.state.nodes).find(el => el[1].parentID == this.el.id);
+      let interNode = Object.entries(this.driver.state.nodes).find(el => 
+        el[1].parentID == this.el.id && el[1].extendsID == "http://vwf.example.com/aframe/interpolation-component.vwf"
+      );
       this.node = this.driver.nodes[interNode[0]];
       this.nodeState = interNode[1];
     }

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

@@ -83,6 +83,49 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
             this.state.kernel = this.kernel.kernel.kernel;
 
+            this.aframeComponentDef = {
+                'A-MATERIAL': [
+                    "alphaTest",
+                    "depthTest",
+                    "flatShading",
+                    "npot",
+                    "offset",
+                    "opacity",
+                    "remain",
+                    "repeat",
+                    "shader",
+                    "side",
+                    "transparent",
+                    "vertexColors",
+                    "visible",
+                    "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",
+                    "emissive",
+                    "emissiveIntensity",
+                    "height",
+                    "envMap",
+                    "fog",
+                    "metalness",
+                    "normal-map",
+                    "normal-scale",
+                    "normal-texture-offset",
+                    "normal-texture-repeat",
+                    "roughness",
+                    "sphericalEnvMap",
+                    "width",
+                    "wireframe",
+                    "wireframe-linewidth",
+                    "src"]
+            }
+
             //this.state.kernel = this.kernel.kernel.kernel;
 
         },
@@ -239,28 +282,28 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         // })
 
                         switch (propertyName) {
-                    
+
                             case "fullWidth":
-                            parentNodeAF.setAttribute('viewoffset', 'fullWidth', propertyValue);
-                            break;
+                                parentNodeAF.setAttribute('viewoffset', 'fullWidth', propertyValue);
+                                break;
 
                             case "fullHeight":
-                            parentNodeAF.setAttribute('viewoffset', 'fullHeight', propertyValue);
-                            break;
+                                parentNodeAF.setAttribute('viewoffset', 'fullHeight', propertyValue);
+                                break;
 
                             case "yoffset":
-                            parentNodeAF.setAttribute('viewoffset', 'yoffset', propertyValue);
-                            break;
+                                parentNodeAF.setAttribute('viewoffset', 'yoffset', propertyValue);
+                                break;
 
                             case "xoffset":
-                            parentNodeAF.setAttribute('viewoffset', 'xoffset', propertyValue);
-                            break;
+                                parentNodeAF.setAttribute('viewoffset', 'xoffset', propertyValue);
+                                break;
+
 
-                            
                             case "subcamWidth":
                                 parentNodeAF.setAttribute('viewoffset', 'width', propertyValue);
                                 break;
-    
+
                             case "subcamHeight":
                                 parentNodeAF.setAttribute('viewoffset', 'height', propertyValue);
                                 break;
@@ -286,7 +329,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             case "cast":
                                 parentNodeAF.setAttribute('shadow', 'cast', propertyValue);
                                 break;
-    
+
                             case "receive":
                                 parentNodeAF.setAttribute('shadow', 'receive', propertyValue);
                                 break;
@@ -306,9 +349,9 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                         value = propertyValue;
                         let parentNodeAF = aframeObject.el;
-                        let defs = ['color', 'transparent', 'opacity', 'side'];
+                        //let defs = ['color', 'transparent', 'opacity', 'side'];
 
-                        defs.forEach(element => {
+                        self.aframeComponentDef['A-MATERIAL'].forEach(element => {
                             element == propertyName ? parentNodeAF.setAttribute('material', element, propertyValue) :
                                 value = undefined;
                         })
@@ -317,31 +360,31 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 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){
+                            if (element == propertyName) {
 
                                 switch (element) {
-                    
+
                                     case 'fogType':
-                                    parentNodeAF.setAttribute('fog', 'type', propertyValue);
+                                        parentNodeAF.setAttribute('fog', 'type', propertyValue);
                                         break;
 
                                     case 'fogColor':
                                         parentNodeAF.setAttribute('fog', 'color', propertyValue);
-                                            break;
+                                        break;
 
                                     default:
-                                            value = parentNodeAF.setAttribute('fog', element, propertyValue);
-                                            break;
+                                        value = parentNodeAF.setAttribute('fog', element, propertyValue);
+                                        break;
                                 }
 
 
-                                
+
                             } else {
                                 value = undefined
                             }
@@ -365,37 +408,38 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
-                    
-                                        value = propertyValue;
-                    
-                    
-                                        let parentNodeAF = aframeObject.el;
-                    
-                                        switch (propertyName) {
-                    
-                                            case "color":
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'color', propertyValue);
-                                                break;
-                    
-                                            case "path":
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'path', propertyValue);
-                                                break;
-                    
-                                                case "width":
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'width', propertyValue);
-                                                break;
-
-                                            default:
-                                                value = undefined;
-                                                break;
-                    
-                    
-                                        }
-                    
-                                    }
+                if (value === undefined && isALinePathDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
+
+                        value = propertyValue;
 
 
+                        let parentNodeAF = aframeObject.el;
+
+                        switch (propertyName) {
+
+                            case "color":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'color', propertyValue);
+                                break;
+
+                            case "path":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'path', propertyValue);
+                                break;
+
+                            case "width":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'width', propertyValue);
+                                break;
+
+                            default:
+                                value = undefined;
+                                break;
+
+
+                        }
+
+                    }
+                }
+
                 //isALineDefinition(node.prototypes)
                 //if (value === undefined && node.componentName == 'line') { //isALineDefinition( node.prototypes )
                 if (node.extendsID == "http://vwf.example.com/aframe/lineComponent.vwf") {
@@ -442,152 +486,105 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     }
                 }
 
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
+                if (value === undefined && isAAnimMixerDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
+                        value = propertyValue;
 
-                    value = propertyValue;
 
+                        let parentNodeAF = aframeObject.el;
 
-                    let parentNodeAF = aframeObject.el;
+                        switch (propertyName) {
 
-                    switch (propertyName) {
+                            case "clip":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'clip', propertyValue);
+                                break;
 
-                        case "clip":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'clip', propertyValue);
-                            break;
+                            case "duration":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'duration', propertyValue);
+                                break;
 
-                        case "duration":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'duration', propertyValue);
-                            break;
+                            case "crossFadeDuration":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'crossFadeDuration', propertyValue);
+                                break;
 
-                        case "crossFadeDuration":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'crossFadeDuration', propertyValue);
-                            break;
+                            case "loop":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'loop', propertyValue);
+                                break;
 
-                        case "loop":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'loop', propertyValue);
-                            break;
+                            case "repetitions":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'repetitions', propertyValue);
+                                break;
 
-                        case "repetitions":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'repetitions', propertyValue);
-                            break;
+                            default:
+                                value = undefined;
+                                break;
 
-                        default:
-                            value = undefined;
-                            break;
 
+                        }
 
                     }
-
                 }
 
+                if (value === undefined && isAInterpolationDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
 
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
+                        value = propertyValue;
 
-                    value = propertyValue;
 
+                        let parentNodeAF = aframeObject.el;
 
-                    let parentNodeAF = aframeObject.el;
+                        switch (propertyName) {
 
-                    switch (propertyName) {
+                            case "enabled":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'enabled', propertyValue);
+                                break;
 
-                        case "enabled":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'enabled', propertyValue);
-                            break;
+                            case "deltaPos":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'deltaPos', propertyValue);
+                                break;
 
-                        case "deltaPos":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'deltaPos', propertyValue);
-                            break;
+                            case "deltaRot":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'deltaRot', propertyValue);
+                                break;
 
-                        case "deltaRot":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'deltaRot', propertyValue);
-                            break;
+                            default:
+                                value = undefined;
+                                break;
 
-                        default:
-                            value = undefined;
-                            break;
 
+                        }
 
                     }
-
                 }
 
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
-                    
-                                        value = propertyValue;
-                    
-                    
-                                        let parentNodeAF = aframeObject.el;
-                    
-                                        switch (propertyName) {
-                    
-                                            case "mode":
-                                                parentNodeAF.setAttribute(aframeObject.compName, 'mode', propertyValue);
-                                                break;
-                    
-                                            default:
-                                                value = undefined;
-                                                break;
-                    
-                    
-                                        }
-                    
-                                    }
-
-                if (value === undefined && aframeObject.el.getAttribute(aframeObject.compName)) {
-
-                    value = propertyValue;
-
-                    //let parentNodeAF = self.state.kernel.find(node.parentID);
-
-                    // aframeObject.el.setAttribute('line', 'color')
-                    let parentNodeAF = aframeObject.el;
-
-                    switch (propertyName) {
-
-                        case "armModel":
-
-                            parentNodeAF.setAttribute(aframeObject.compName, { armModel: propertyValue });
-                            break;
-
-                        case "buttonColor":
-
-                            parentNodeAF.setAttribute(aframeObject.compName, { buttonColor: propertyValue });
-                            break;
-
-                        case "buttonTouchedColor":
+                if (value === undefined && isAGizmoDefinition(node.prototypes)) {
+                    if (aframeObject.el.getAttribute(aframeObject.compName)) {
 
-                            parentNodeAF.setAttribute(aframeObject.compName, 'buttonTouchedColor', propertyValue);
-                            break;
+                        value = propertyValue;
 
-                        case "buttonHighlightColor":
-                            parentNodeAF.setAttribute(aframeObject.compName, 'buttonHighlightColor', propertyValue);
-                            break;
 
-                        case "hand":
+                        let parentNodeAF = aframeObject.el;
 
-                            parentNodeAF.setAttribute(aframeObject.compName, 'hand', propertyValue);
-                            break;
+                        switch (propertyName) {
 
-                        case "model":
+                            case "mode":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'mode', propertyValue);
+                                break;
 
-                            parentNodeAF.setAttribute(aframeObject.compName, 'model', propertyValue);
-                            break;
+                            default:
+                                value = undefined;
+                                break;
 
-                        case "rotationOffset":
 
-                            parentNodeAF.setAttribute(aframeObject.compName, 'rotationOffset', propertyValue);
-                            break;
+                        }
 
-                        default:
-                            value = undefined;
-                            break;
                     }
-
                 }
 
 
 
 
+
             }
 
             return value;
@@ -637,7 +634,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     })
                 }
 
-                
+
                 if (value === undefined && isAFogDefinition(node.prototypes)) {
                     value = propertyValue;
 
@@ -651,17 +648,17 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             switch (element) {
 
                                 case 'fogType':
-        
+
                                     value = parentNodeAF.getAttribute('fog').type;
                                     break;
-                                
+
                                 case 'fogColor':
-        
+
                                     value = parentNodeAF.getAttribute('fog').color;
                                     break;
-                                
+
                                 default:
-                                    value = parentNodeAF.getAttribute('fog').element; 
+                                    value = parentNodeAF.getAttribute('fog').element;
                                     break;
 
                             }
@@ -762,26 +759,33 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     // let parentNodeAF = self.state.nodes[node.parentID].aframeObj;
                     let parentNodeAF = aframeObject.el;
 
-                    switch (propertyName) {
+                    self.aframeComponentDef['A-MATERIAL'].forEach(element => {
+                        if (element == propertyName) {
+                            value = parentNodeAF.getAttribute('material').element;
+                        }
 
-                        case "color":
-                            value = parentNodeAF.getAttribute('material').color;
-                            break;
+                    })
 
-                        case "opacity":
-                            value = parentNodeAF.getAttribute('material').opacity;
-                            break;
+                    // switch (propertyName) {
 
-                        case "side":
-                            value = parentNodeAF.getAttribute('material').side;
-                            break;
+                    //     case "color":
+                    //         value = parentNodeAF.getAttribute('material').color;
+                    //         break;
 
-                        case "transparent":
-                            value = parentNodeAF.getAttribute('material').transparent;
-                            break;
-                        
+                    //     case "opacity":
+                    //         value = parentNodeAF.getAttribute('material').opacity;
+                    //         break;
+
+                    //     case "side":
+                    //         value = parentNodeAF.getAttribute('material').side;
+                    //         break;
+
+                    //     case "transparent":
+                    //         value = parentNodeAF.getAttribute('material').transparent;
+                    //         break;
 
-                    }
+
+                    // }
 
                 }
 
@@ -801,10 +805,10 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             value = parentNodeAF.getAttribute(aframeObject.compName).path;
                             break;
 
-                            case "width":
+                        case "width":
                             value = parentNodeAF.getAttribute(aframeObject.compName).width;
                             break;
-                        
+
 
                     }
 
@@ -837,7 +841,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         case "xoffset":
                             value = parentNodeAF.getAttribute(aframeObject.compName).xoffset;
                             break;
-                        
+
                         case "yoffset":
                             value = parentNodeAF.getAttribute(aframeObject.compName).yoffset;
                             break;
@@ -845,7 +849,6 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                 }
 
-
                 if (value === undefined && isAInterpolationDefinition(node.prototypes)) {
                     value = propertyValue;
 
@@ -882,7 +885,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             value = parentNodeAF.getAttribute(aframeObject.compName).mode;
                             break;
 
-                       
+
 
                     }
 
@@ -1054,7 +1057,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];
 
 
@@ -1073,13 +1076,13 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/gizmoComponent.vwf")) {
-            
-            
-                        // aframeObj.el.setAttribute(node.type, {});
-                        aframeObj.compName = "gizmo";
-                        aframeObj.el.setAttribute(aframeObj.compName, {});
-            
-                    }
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "gizmo";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/aSceneFogComponent.vwf")) {
 
@@ -1087,7 +1090,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
             aframeObj = {};
             //var sceneEl = document.querySelector('a-scene');
-    
+
             aframeObj.id = node.parentID;
             aframeObj.el = document.querySelector('a-scene');
 
@@ -1105,10 +1108,10 @@ 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, {});
@@ -1116,7 +1119,7 @@ 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, {});
@@ -1124,8 +1127,8 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/streamSoundComponent.vwf")) {
-            
-            
+
+
             // aframeObj.el.setAttribute(node.type, {});
             aframeObj.compName = "streamsound";
             aframeObj.el.setAttribute(aframeObj.compName, {});
@@ -1133,13 +1136,13 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/linepath.vwf")) {
-            
-            
-                        // aframeObj.el.setAttribute(node.type, {});
-                        aframeObj.compName = "linepath";
-                        aframeObj.el.setAttribute(aframeObj.compName, {});
-            
-                    }
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "linepath";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/aMaterialComponent.vwf")) {
 
@@ -1187,23 +1190,23 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
         }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-sun-component.vwf")) {
-            
- 
-                // aframeObj.el.setAttribute(node.type, {});
-             aframeObj.compName = "sun";
-             aframeObj.el.setAttribute('id', "sun");
-             aframeObj.el.setAttribute(aframeObj.compName, {});
- 
-         }
-
-         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-skyshader-component.vwf")) {
-            
- 
-                // aframeObj.el.setAttribute(node.type, {});
-             aframeObj.compName = "skyshader";
-             aframeObj.el.setAttribute(aframeObj.compName, {});
- 
-         }
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "sun";
+            aframeObj.el.setAttribute('id', "sun");
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
+
+        if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-skyshader-component.vwf")) {
+
+
+            // aframeObj.el.setAttribute(node.type, {});
+            aframeObj.compName = "skyshader";
+            aframeObj.el.setAttribute(aframeObj.compName, {});
+
+        }
 
         if (self.state.isComponentClass(protos, "http://vwf.example.com/aframe/app-raycaster-listener-component.vwf")) {
 

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

@@ -183,12 +183,20 @@ define(["module", "vwf/view"], function (module, view) {
                 //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){
+                    let material = el[1].aframeObj.getAttribute('material');
+                    if(material) {
+                   
+                    if (material.src !== ""){
                        // console.log("my: " + src);
-                        if (src == elID)
-                        self.kernel.callMethod(el[0], "updateSrc", [elID])
+                        let src = '#' + material.src.id;
+                        if (src == elID){
+                            let materialID = vwf.find(el[0], 'material');
+                            self.kernel.callMethod(materialID, "updateSrc", [elID])
+                        }
+                        
                     }
+                }
+
                 })
 
             }

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

@@ -103,7 +103,13 @@ define(["module", "vwf/view"], function (module, view) {
                             return;
                         }
 
-                    
+                        if (node.name == "material" && propertyName == 'repeat') {
+
+                           let srcID = node.aframeObj.el.getAttribute('material').src.id;
+                           let elID = '#'+ srcID;
+                           if(srcID) self.kernel.callMethod(nodeId, "updateSrc", [elID])
+
+                        }
             // if (node.name == "material" && propertyName == 'color') {
     
             //     console.log("sat color on material");

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

@@ -27,8 +27,9 @@ define([
     "vwf/utility",
     "vwf/view/lib/ace/ace",
     "vwf/view/lib/colorpicker/colorpicker.min",
+    "vwf/view/polyglot-editor",
     "vwf/view/widgets"
-], function (module, version, view, utility, ace, colorpicker, widgets) {
+], function (module, version, view, utility, ace, colorpicker, lang, widgets) {
 
     var self;
 
@@ -40,12 +41,13 @@ define([
             self = this;
             this.ace = window.ace;
             this.widgets = widgets;
+            this.lang = lang.language;
 
             this.nodes = {};
             this.scenes = {};
             this.allScripts = {};
 
-
+         
 
             //$(document.head).append('<style type="text/css" media="screen"> #editorlive { height: 500px; width: 800px; } </style>');
             document.querySelector('head').innerHTML += '<style type="text/css" media="screen"> #editorlive { height: 500px; width: 800px; } </style>';
@@ -125,6 +127,7 @@ define([
                 return root
             };
 
+
             this.getRandomInt = function (min, max) {
                 min = Math.ceil(min);
                 max = Math.floor(max);
@@ -195,7 +198,7 @@ define([
                             {
                                 $cell: true,
                                 $type: "h3",
-                                class: "mdc-typography--subheading2",
+                                class: "mdc-typography--title",
                                 $text:"Primitives"
                             },
                             {
@@ -211,12 +214,12 @@ define([
                                     }
                                 ]
                             },
-                            widgets.divider,
+                            //widgets.divider,
                             {
                                 $cell: true,
                                 $type: "h3",
                                 $text:"Lights",
-                                class: "mdc-typography--subheading2"
+                                class: "mdc-typography--title"
                             },
                             {
                                 $cell: true,
@@ -231,45 +234,141 @@ define([
                                     }
                                 ]
                             },
-                            // widgets.divider,
-                            // {
-                            //     $cell: true,
-                            //     $type: "h3",
-                            //     class: "mdc-typography--subheading2",
-                            //     $text:"Objects"
-                            // },
-                            // {
-                            //     $cell: true,
-                            //     $type: "div",
-                            //     class: "mdc-grid-list",
-                            //     $components: [
-                            //         {
-                            //             $cell: true,
-                            //             $type: "ul",
-                            //             class: "mdc-grid-list__tiles",
-                            //             $components: [  
-                            //                 self.widgets.gridListItem({
-                            //                     imgSrc: "vwf/view/lib/images/ui/icons/floor.png",
-                            //                     title: 'Floor',
-                            //                     styleClass: "createListItem",
-                            //                     onclickfunc: function(){
-                            //                         //let cubeName = self.GUID();
-                            //                        // vwf_view.kernel.callMethod(vwf.application(), "createFloor")
-                            //                     }
-                            //                 })
+                            //widgets.divider,
+                            {
+                                $cell: true,
+                                $type: "h3",
+                                class: "mdc-typography--title",
+                                $text:"Objects"
+                            },
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-grid-list",
+                                $components: [
+                                    {
+                                        $cell: true,
+                                        $type: "ul",
+                                        class: "mdc-grid-list__tiles",
+                                        $components: [  
+                                            self.widgets.gridListItem({
+                                                imgSrc: "vwf/view/lib/images/ui/icons/camera.png",
+                                                title: 'Camera',
+                                                styleClass: "createListItem",
+                                                onclickfunc: function(){
+                                                    //let cubeName = self.GUID();
+                                                   // vwf_view.kernel.callMethod(vwf.application(), "createFloor")
+                                                }
+                                            }),
+                                            self.widgets.gridListItem({
+                                                imgSrc: "vwf/view/lib/images/ui/icons/camera_offset.png",
+                                                title: 'Camera with view offset',
+                                                styleClass: "createListItem",
+                                                onclickfunc: function(){
+                                                    //let cubeName = self.GUID();
+                                                   // vwf_view.kernel.callMethod(vwf.application(), "createFloor")
+                                                }
+                                            })
                                         
                                         
-                            //             ]
-                            //         }
-                            //     ]
-                            // }, 
-                            widgets.divider,
+                                        ]
+                                    }
+                                ]
+                            }, 
+                            //widgets.divider,
                             {
                                 $cell: true,
                                 $type: "h3",
-                                class: "mdc-typography--subheading2",
+                                class: "mdc-typography--title",
                                 $text:"Assets" 
                              
+                            },
+                            widgets.textField({
+                                id:"asset3dsrc",
+                                value:"Enter URL to asset source",
+                                funconchange: function(e){
+                                    console.log(this.value)
+                                }
+                            }),
+                            {
+                                $cell: true,
+                                $type: "div",
+                                class: "mdc-grid-list",
+                                $components: [
+                                    {
+                                        $cell: true,
+                                        $type: "ul",
+                                        class: "mdc-grid-list__tiles",
+                                        $components: [
+                                            widgets.buttonSimple(
+                                                {
+                                                    label: "Image",
+                                                    onclick: function(e){
+                                                    }
+                                                }
+                                            ),
+                                            widgets.buttonSimple(
+                                                {
+                                                    label: "Sound",
+                                                    onclick: function(e){
+                                                    }
+                                                }
+                                            ),
+                                            widgets.buttonSimple(
+                                                {
+                                                    label: "Video",
+                                                    onclick: function(e){
+                                                    }
+                                                }
+                                            ),
+                                            widgets.buttonSimple(
+                                                {
+                                                    label: "MTL",
+                                                    onclick: function(e){
+                                                    }
+                                                }
+                                            ),
+                                            widgets.buttonSimple(
+                                                {
+                                                    label: "GLTF",
+                                                    onclick: function(e){
+                                                    }
+                                                }
+                                            ),
+                                            widgets.buttonSimple(
+                                                {
+                                                    label: "DAE",
+                                                    onclick: function(e){
+                                                        let srcEl = document.querySelector('#asset3dsrc');
+                                                        let avatarID = 'avatar-' + vwf.moniker_;
+                                                        if(srcEl.value.includes('.dae'))
+                                                        vwf_view.kernel.callMethod(vwf.application(), "createModelDAE", [srcEl.value, avatarID])
+
+                                                    }
+                                                }
+                                            ),
+                                            widgets.buttonSimple(
+                                                {
+                                                    label: "OBJ",
+                                                    onclick: function(e){
+                                                    }
+                                                }
+                                            )
+                                           
+                                            
+                                        
+                                        ]
+                                    }
+                                ]
+                            }, 
+
+                             //widgets.divider,
+                            {
+                                $cell: true,
+                                $type: "h3",
+                                class: "mdc-typography--title",
+                                $text:"Resources" 
+                             
                             },
                             {
                                 $cell: true,
@@ -283,7 +382,7 @@ define([
                                         $components: [
                                             self.widgets.gridListItem({
                                                 imgSrc: "vwf/view/lib/images/ui/icons/3ditem.png",
-                                                title: '3D Model',
+                                                title: 'Asset item',
                                                 styleClass: "createListItem"
                                             }),
                                             self.widgets.gridListItem({
@@ -2785,7 +2884,7 @@ define([
                                 $cell: true,
                                 $type: "div",
                                 class: "mdc-temporary-drawer__header-content mdc-theme--primary-bg mdc-theme--text-primary-on-primary",
-                                $text: "Home"
+                                $text: self.lang.t("home")
                             }
                         ]
                     },
@@ -2825,7 +2924,7 @@ define([
                                             $text: "play_arrow"
                                         },
                                         {
-                                            $text: "App"
+                                            $text: self.lang.t("App")
                                         }]
 
                                     },
@@ -3170,6 +3269,28 @@ define([
                     $type: "section",
                     class: "mdc-toolbar__section mdc-toolbar__section--align-end",
                     $components: [
+                        {
+                            $type: "a",
+                            href: "#",
+                            class: "mdc-toolbar__icon",
+                            $text: "EN",
+                            onclick: function(){
+                                //self.lang.changeLanguageTo('en')
+                                localStorage.setItem('krestianstvo_locale', 'en');
+                                window.location.reload(true);
+                        }
+                        },
+                        {
+                            $type: "a",
+                            href: "#",
+                            class: "mdc-toolbar__icon",
+                            $text: "RU",
+                            onclick: function(){
+                                //self.lang.changeLanguageTo('ru')
+                                localStorage.setItem('krestianstvo_locale', 'ru');
+                                window.location.reload(true);
+                        }
+                        },
                         {
                             $type: "a",
                             href: "#",
@@ -3179,6 +3300,7 @@ define([
 
 
                         }
+                        
                     ]
                 }
             ]

support/client/lib/vwf/view/lib/editorLive.css

@@ -178,12 +178,12 @@
 
       }
 
-      .prop-mdc-text-field {
-         /*
+     /*  .prop-mdc-text-field {
+        
         height: 56px;
-        */
+       
       }
-
+ */
 
       .mdc-list-item__graphic {
         margin-left: 0;

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

@@ -0,0 +1,301 @@
+//     (c) 2012 Airbnb, Inc.
+//
+//     polyglot.js may be freely distributed under the terms of the BSD
+//     license. For all licensing information, details, and documention:
+//     http://airbnb.github.com/polyglot.js
+//
+//
+// Polyglot.js is an I18n helper library written in JavaScript, made to
+// work both in the browser and in Node. It provides a simple solution for
+// interpolation and pluralization, based off of Airbnb's
+// experience adding I18n functionality to its Backbone.js and Node apps.
+//
+// Polylglot is agnostic to your translation backend. It doesn't perform any
+// translation; it simply gives you a way to manage translated phrases from
+// your client- or server-side JavaScript application.
+//
+
+
+(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define([], function() {
+      return factory(root);
+    });
+  } else if (typeof exports === 'object') {
+    module.exports = factory(root);
+  } else {
+    root.Polyglot = factory(root);
+  }
+}(this, function(root) {
+  'use strict';
+
+  // ### Polyglot class constructor
+  function Polyglot(options) {
+    options = options || {};
+    this.phrases = {};
+    this.extend(options.phrases || {});
+    this.currentLocale = options.locale || 'en';
+    this.allowMissing = !!options.allowMissing;
+    this.warn = options.warn || warn;
+  }
+
+  // ### Version
+  Polyglot.VERSION = '0.4.3';
+
+  // ### polyglot.locale([locale])
+  //
+  // Get or set locale. Internally, Polyglot only uses locale for pluralization.
+  Polyglot.prototype.locale = function(newLocale) {
+    if (newLocale) this.currentLocale = newLocale;
+    return this.currentLocale;
+  };
+
+  // ### polyglot.extend(phrases)
+  //
+  // Use `extend` to tell Polyglot how to translate a given key.
+  //
+  //     polyglot.extend({
+  //       "hello": "Hello",
+  //       "hello_name": "Hello, %{name}"
+  //     });
+  //
+  // The key can be any string.  Feel free to call `extend` multiple times;
+  // it will override any phrases with the same key, but leave existing phrases
+  // untouched.
+  //
+  // It is also possible to pass nested phrase objects, which get flattened
+  // into an object with the nested keys concatenated using dot notation.
+  //
+  //     polyglot.extend({
+  //       "nav": {
+  //         "hello": "Hello",
+  //         "hello_name": "Hello, %{name}",
+  //         "sidebar": {
+  //           "welcome": "Welcome"
+  //         }
+  //       }
+  //     });
+  //
+  //     console.log(polyglot.phrases);
+  //     // {
+  //     //   'nav.hello': 'Hello',
+  //     //   'nav.hello_name': 'Hello, %{name}',
+  //     //   'nav.sidebar.welcome': 'Welcome'
+  //     // }
+  //
+  // `extend` accepts an optional second argument, `prefix`, which can be used
+  // to prefix every key in the phrases object with some string, using dot
+  // notation.
+  //
+  //     polyglot.extend({
+  //       "hello": "Hello",
+  //       "hello_name": "Hello, %{name}"
+  //     }, "nav");
+  //
+  //     console.log(polyglot.phrases);
+  //     // {
+  //     //   'nav.hello': 'Hello',
+  //     //   'nav.hello_name': 'Hello, %{name}'
+  //     // }
+  //
+  // This feature is used internally to support nested phrase objects.
+  Polyglot.prototype.extend = function(morePhrases, prefix) {
+    var phrase;
+
+    for (var key in morePhrases) {
+      if (morePhrases.hasOwnProperty(key)) {
+        phrase = morePhrases[key];
+        if (prefix) key = prefix + '.' + key;
+        if (typeof phrase === 'object') {
+          this.extend(phrase, key);
+        } else {
+          this.phrases[key] = phrase;
+        }
+      }
+    }
+  };
+
+  // ### polyglot.clear()
+  //
+  // Clears all phrases. Useful for special cases, such as freeing
+  // up memory if you have lots of phrases but no longer need to
+  // perform any translation. Also used internally by `replace`.
+  Polyglot.prototype.clear = function() {
+    this.phrases = {};
+  };
+
+  // ### polyglot.replace(phrases)
+  //
+  // Completely replace the existing phrases with a new set of phrases.
+  // Normally, just use `extend` to add more phrases, but under certain
+  // circumstances, you may want to make sure no old phrases are lying around.
+  Polyglot.prototype.replace = function(newPhrases) {
+    this.clear();
+    this.extend(newPhrases);
+  };
+
+
+  // ### polyglot.t(key, options)
+  //
+  // The most-used method. Provide a key, and `t` will return the
+  // phrase.
+  //
+  //     polyglot.t("hello");
+  //     => "Hello"
+  //
+  // The phrase value is provided first by a call to `polyglot.extend()` or
+  // `polyglot.replace()`.
+  //
+  // Pass in an object as the second argument to perform interpolation.
+  //
+  //     polyglot.t("hello_name", {name: "Spike"});
+  //     => "Hello, Spike"
+  //
+  // If you like, you can provide a default value in case the phrase is missing.
+  // Use the special option key "_" to specify a default.
+  //
+  //     polyglot.t("i_like_to_write_in_language", {
+  //       _: "I like to write in %{language}.",
+  //       language: "JavaScript"
+  //     });
+  //     => "I like to write in JavaScript."
+  //
+  Polyglot.prototype.t = function(key, options) {
+    var phrase, result;
+    options = options == null ? {} : options;
+    // allow number as a pluralization shortcut
+    if (typeof options === 'number') {
+      options = {smart_count: options};
+    }
+    if (typeof this.phrases[key] === 'string') {
+      phrase = this.phrases[key];
+    } else if (typeof options._ === 'string') {
+      phrase = options._;
+    } else if (this.allowMissing) {
+      phrase = key;
+    } else {
+      this.warn('Missing translation for key: "'+key+'"');
+      result = key;
+    }
+    if (typeof phrase === 'string') {
+      options = clone(options);
+      result = choosePluralForm(phrase, this.currentLocale, options.smart_count);
+      result = interpolate(result, options);
+    }
+    return result;
+  };
+
+
+  // ### polyglot.has(key)
+  //
+  // Check if polyglot has a translation for given key
+  Polyglot.prototype.has = function(key) {
+    return key in this.phrases;
+  };
+
+
+  // #### Pluralization methods
+  // The string that separates the different phrase possibilities.
+  var delimeter = '||||';
+
+  // Mapping from pluralization group plural logic.
+  var pluralTypes = {
+    chinese:   function(n) { return 0; },
+    german:    function(n) { return n !== 1 ? 1 : 0; },
+    french:    function(n) { return n > 1 ? 1 : 0; },
+    russian:   function(n) { return n % 10 === 1 && n % 100 !== 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2; },
+    czech:     function(n) { return (n === 1) ? 0 : (n >= 2 && n <= 4) ? 1 : 2; },
+    polish:    function(n) { return (n === 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2); },
+    icelandic: function(n) { return (n % 10 !== 1 || n % 100 === 11) ? 1 : 0; }
+  };
+
+  // Mapping from pluralization group to individual locales.
+  var pluralTypeToLanguages = {
+    chinese:   ['fa', 'id', 'ja', 'ko', 'lo', 'ms', 'th', 'tr', 'zh'],
+    german:    ['da', 'de', 'en', 'es', 'fi', 'el', 'he', 'hu', 'it', 'nl', 'no', 'pt', 'sv'],
+    french:    ['fr', 'tl', 'pt-br'],
+    russian:   ['hr', 'ru'],
+    czech:     ['cs'],
+    polish:    ['pl'],
+    icelandic: ['is']
+  };
+
+  function langToTypeMap(mapping) {
+    var type, langs, l, ret = {};
+    for (type in mapping) {
+      if (mapping.hasOwnProperty(type)) {
+        langs = mapping[type];
+        for (l in langs) {
+          ret[langs[l]] = type;
+        }
+      }
+    }
+    return ret;
+  }
+
+  // Trim a string.
+  function trim(str){
+    var trimRe = /^\s+|\s+$/g;
+    return str.replace(trimRe, '');
+  }
+
+  // Based on a phrase text that contains `n` plural forms separated
+  // by `delimeter`, a `locale`, and a `count`, choose the correct
+  // plural form, or none if `count` is `null`.
+  function choosePluralForm(text, locale, count){
+    var ret, texts, chosenText;
+    if (count != null && text) {
+      texts = text.split(delimeter);
+      chosenText = texts[pluralTypeIndex(locale, count)] || texts[0];
+      ret = trim(chosenText);
+    } else {
+      ret = text;
+    }
+    return ret;
+  }
+
+  function pluralTypeName(locale) {
+    var langToPluralType = langToTypeMap(pluralTypeToLanguages);
+    return langToPluralType[locale] || langToPluralType.en;
+  }
+
+  function pluralTypeIndex(locale, count) {
+    return pluralTypes[pluralTypeName(locale)](count);
+  }
+
+  // ### interpolate
+  //
+  // Does the dirty work. Creates a `RegExp` object for each
+  // interpolation placeholder.
+  function interpolate(phrase, options) {
+    for (var arg in options) {
+      if (arg !== '_' && options.hasOwnProperty(arg)) {
+        // We create a new `RegExp` each time instead of using a more-efficient
+        // string replace so that the same argument can be replaced multiple times
+        // in the same phrase.
+        phrase = phrase.replace(new RegExp('%\\{'+arg+'\\}', 'g'), options[arg]);
+      }
+    }
+    return phrase;
+  }
+
+  // ### warn
+  //
+  // Provides a warning in the console if a phrase key is missing.
+  function warn(message) {
+    root.console && root.console.warn && root.console.warn('WARNING: ' + message);
+  }
+
+  // ### clone
+  //
+  // Clone an object.
+  function clone(source) {
+    var ret = {};
+    for (var prop in source) {
+      ret[prop] = source[prop];
+    }
+    return ret;
+  }
+
+  return Polyglot;
+}));

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

@@ -0,0 +1,48 @@
+'use strict';
+
+define([
+    "vwf/view/lib/polyglot/polyglot.min",
+], function (polyglot) {
+
+    var self;
+
+    class Lang {
+        constructor() {
+            console.log("lang constructor");
+            this.polyglot = polyglot;
+
+            if (localStorage.getItem('krestianstvo_locale')) {
+            } else {
+                localStorage.setItem('krestianstvo_locale', 'en');
+            }
+            this.locale = localStorage.getItem('krestianstvo_locale');
+            this.setLanguage(this.locale);
+
+        }
+
+        async getLang(langID) {
+            let response = await fetch("/web/locale/" + langID + ".json");
+            let data = await response.json();
+            return data
+        }
+
+        setLanguage(langID) {
+            this.getLang(langID).then(phrases => {
+                this.language = new polyglot({ phrases });
+            });
+        }
+
+        setLocale(langID){
+            localStorage.setItem('krestianstvo_locale', langID);
+            this.locale = langID;
+        }
+
+        changeLanguageTo(langID){
+            this.setLocale(langID);
+            this.setLanguage(langID);
+        }
+
+    }
+
+    return new Lang;
+})

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

@@ -186,6 +186,16 @@ define(function () {
             }
         }
 
+        buttonSimple(obj){
+            return {
+                $cell: true,
+                $type: "button",
+                class: "mdc-button mdc-ripple-upgraded",
+                $text: obj.label,
+                onclick: obj.onclick
+            }
+        }
+
         sliderDiscrete(obj) {
             return {
                 $cell: true,
@@ -315,6 +325,27 @@ define(function () {
             }
         }
 
+        textField(obj) {
+            return {
+                class: "mdc-text-field",
+                style: "width: 100%",
+                $cell: true,
+                $type: "div",
+                $components: [
+                    {
+                        class: "mdc-text-field__input prop-text-field-input",
+                        id: obj.id,
+                        $cell: true,
+                        $type: "input",
+                        type: "text",
+                        value: obj.value,
+                        onchange: obj.funconchange
+                    }
+
+                ]
+            }
+        }
+
         icontoggle(obj) {
             return {
                 $cell: true,

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

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

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

@@ -3,7 +3,48 @@
 extends: http://vwf.example.com/aframe/aentityComponent.vwf
 type: "component"
 properties:
+  alphaTest:
+  depthTest:
+  flatShading:
+  npot:
+  offset:
   opacity:
+  remain:
+  repeat:
+  shader:
+  side:
   transparent:
+  vertexColors:
+  visible:
+  ambient-occlusion-map:
+  ambient-occlusion-map-intensity:
+  ambient-occlusion-texture-offset:
+  ambient-occlusion-texture-repeat:
   color:
-  side:
+  displacement-bias:
+  displacement-map:
+  displacement-scale:
+  displacement-texture-offset:
+  displacement-texture-repeat:
+  emissive:
+  emissiveIntensity:
+  height:
+  envMap:
+  fog:
+  metalness:
+  normal-map:
+  normal-scale:
+  normal-texture-offset:
+  normal-texture-repeat:
+  roughness:
+  sphericalEnvMap:
+  width:
+  wireframe:
+  wireframe-linewidth:
+  src:
+methods:
+  updateSrc:
+    parameters:
+      - srcID
+scripts:
+  - source: "http://vwf.example.com/aframe/aMaterialComponent.js"

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

@@ -3,32 +3,9 @@
 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:
-  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:
+  width:

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

@@ -0,0 +1,13 @@
+# https://aframe.io/docs/0.5.0/primitives/a-sphere.html
+--- 
+extends: http://vwf.example.com/aframe/aentity.vwf
+type: "a-cone"
+properties:
+  height:
+  open-ended:
+  radius-bottom:
+  radius-top:
+  segments-height:
+  segments-radial: 
+  theta-length:
+  theta-start:

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

@@ -0,0 +1,14 @@
+# https://aframe.io/docs/0.5.0/primitives/a-sphere.html
+--- 
+extends: http://vwf.example.com/aframe/aentity.vwf
+type: "a-cylinder"
+properties:
+  height:
+  radius:
+  open-ended:
+  radius-bottom:
+  radius-top:
+  segments-height:
+  segments-radial:
+  theta-length:
+  theta-start:

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

@@ -20,5 +20,8 @@ methods:
   updateSrc:
     parameters:
       - src
+  lookAt:
+    parameters:
+      - nodeID
 scripts:
   - source: "http://vwf.example.com/aframe/aentity.js"

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

@@ -0,0 +1,17 @@
+--- 
+extends: http://vwf.example.com/aframe/node.vwf
+type: "a-image"
+properties:
+  color:
+  height:
+  metalness:
+  opacity:
+  repeat:
+  roughness:
+  segments-height:
+  segments-width:
+  shader:
+  side:
+  src:
+  transparent:
+  width:

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

@@ -3,30 +3,7 @@
 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:
-  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:
+  width:

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

@@ -57,14 +57,99 @@ this.sphereProto = function () {
         "extends": "http://vwf.example.com/aframe/asphere.vwf",
         "properties": {
             "displayName": "sphere",
-            "color": "white",
             "radius": 1,
             "clickable": true
         },
         children: {
             "material": {
                 "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                "type": "component",
+                "properties":{
+                    "color": "white"
+                }
+            },
+            "interpolation":
+                {
+                    "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
+                    "type": "component",
+                    "properties": {
+                        "enabled": true
+                    }
+                },
+            "cursor-listener": {
+                "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
                 "type": "component"
+            }
+        },
+        events: {
+            "clickEvent": {
+                "body": ""
+            }
+        }
+    }
+
+    return node
+}
+
+this.cylinderProto = function () {
+
+    let node = {
+        "extends": "http://vwf.example.com/aframe/acylinder.vwf",
+        "properties": {
+            "displayName": "cylinder",
+            "radius": 1,
+            "height": 1,
+            "clickable": true
+        },
+        children: {
+            "material": {
+                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                "type": "component",
+                "properties":{
+                    "color": "white"
+                }
+            },
+            "interpolation":
+                {
+                    "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
+                    "type": "component",
+                    "properties": {
+                        "enabled": true
+                    }
+                },
+            "cursor-listener": {
+                "extends": "http://vwf.example.com/aframe/app-cursor-listener-component.vwf",
+                "type": "component"
+            }
+        },
+        events: {
+            "clickEvent": {
+                "body": ""
+            }
+        }
+    }
+
+    return node
+}
+
+this.coneProto = function () {
+
+    let node = {
+        "extends": "http://vwf.example.com/aframe/acone.vwf",
+        "properties": {
+            "displayName": "cone",
+            "radius-bottom": 1,
+            "radius-top": 0.01,
+            "height": 1,
+            "clickable": true
+        },
+        children: {
+            "material": {
+                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                "type": "component",
+                "properties":{
+                    "color": "white"
+                }
             },
             "interpolation":
                 {
@@ -101,10 +186,6 @@ this.textProto = function () {
             "clickable": true
         },
         children: {
-            "material": {
-                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
-                "type": "component"
-            },
             "interpolation":
                 {
                     "extends": "http://vwf.example.com/aframe/interpolation-component.vwf",
@@ -134,7 +215,6 @@ this.cubeProto = function () {
         "extends": "http://vwf.example.com/aframe/abox.vwf",
         "properties": {
             "displayName": "cube",
-            "color": "white",
             "height": 1,
             "width": 1,
             "depth": 1,
@@ -155,7 +235,10 @@ this.cubeProto = function () {
             },
             "material": {
                 "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
-                "type": "component"
+                "type": "component",
+                "properties":{
+                    "color": "white"
+                }
             }
         },
         events: {
@@ -213,7 +296,6 @@ this.planeProto = function () {
         "extends": "http://vwf.example.com/aframe/aplane.vwf",
         "properties": {
             "displayName": "plane",
-            "color": "white",
             "height": 1,
             "width": 1,
             "clickable": true
@@ -223,7 +305,8 @@ this.planeProto = function () {
                 "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
                 "type": "component",
                 "properties": {
-                    "side": "double"
+                    "side": "double",
+                    "color": "white"
                 }
             },
             "interpolation":
@@ -249,6 +332,47 @@ this.planeProto = function () {
     return node
 }
 
+this.createModelDAE = function (daeSrc, avatar) {
+
+    var self = this;
+
+    let daeTagName = 'DAE-ASSET-'+this.GUID();
+    let daeTagNode = {
+        "extends": "http://vwf.example.com/aframe/a-asset-item.vwf",
+        "properties": {
+            "itemID": daeTagName,
+            "itemSrc": daeSrc,
+        },
+    }
+
+    this.children.create(daeTagName, daeTagNode, function( child ) {
+        let daeNodeName = 'DAE-MODEL-'+self.GUID();
+
+        var position = "0 0 0";
+        let myAvatar = self.children[avatar];
+        let cursorNode = myAvatar.avatarNode.myHead.myCursor.vis;
+    
+        if (cursorNode) {
+             position = cursorNode.worldPosition;
+            //console.log(position);
+        }
+
+        let daeNode = {
+            "extends": "http://vwf.example.com/aframe/acolladamodel.vwf",
+            "properties": {
+                "src": '#' + child.itemID,
+                "position": position
+            }
+        }
+
+        self.children.create(daeNodeName, daeNode, function( child ) {
+            if (avatar) child.lookAt(self.children[avatar].worldPosition)
+           });
+
+       });
+}
+
+
 this.createPrimitive = function (type, avatar, params, name, node) {
 
     var position = "0 0 0";
@@ -291,14 +415,26 @@ this.createPrimitive = function (type, avatar, params, name, node) {
             newNode = this.textProto(params);
             break;
 
+        case "cylinder":
+            newNode = this.cylinderProto();
+            break;
+        
+        case "cone":
+            newNode = this.coneProto();
+            break;
+
         default:
             newNode = undefined;
             break;
     }
 
+    var self = this;
+
     if (newNode) {
         newNode.properties.position = position;
-        this.children.create(nodeName, newNode);
+        this.children.create(nodeName, newNode, function( child ) {
+           child.lookAt(self.children[avatar].worldPosition)
+          });
     }
 
 }
@@ -359,4 +495,5 @@ this.deleteNode = function(nodeName){
       let node = this.children[nodeName];
     if (node) this.children.delete(node);
 
-}
+}
+

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

@@ -19,10 +19,16 @@ methods:
   planeProto:
   cubeProto:
   sphereProto:
+  cylinderProto:
+  coneProto:
   textProto:
   lightProto:
      parameters:
       - lightType
+  createModelDAE:
+    parameters:
+      - src
+      - avatar
   deleteNode:
     parameters:
       - nodeName

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

@@ -3,19 +3,10 @@
 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:
   theta-length:
-  theta-start:
-  transparent:
+  theta-start:

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

@@ -3,36 +3,11 @@
 extends: http://vwf.example.com/aframe/aentity.vwf
 type: "a-sphere"
 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:
-  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:
+  theta-start:

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

@@ -1,11 +1,19 @@
 this.simpleBodyDef = {
     "extends": "http://vwf.example.com/aframe/abox.vwf",
     "properties": {
-        "color": "white",
         "position": "0 0.66 0.7",
         "height": 1.3,
         "width": 0.65,
         "depth": 0.1,
+    },
+    "children": {
+        "material": {
+            "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+            "type": "component",
+            "properties":{
+                "color": "white"
+            }
+        }
     }
 }
 
@@ -46,7 +54,7 @@ this.createAvatarBody = function (modelSrc) {
     let myBodyDef = this.simpleBodyDef;
     //let myHandDef = this.simpleVrControllerDef;
 
-    myBodyDef.properties.color = myColor;
+    myBodyDef.children.material.properties.color = myColor;
 
     var newNode = {
         "extends": "http://vwf.example.com/aframe/aentity.vwf",
@@ -75,11 +83,19 @@ this.createAvatarBody = function (modelSrc) {
                     "visual": {
                         "extends": "http://vwf.example.com/aframe/abox.vwf",
                         "properties": {
-                            "color": myColor,
                             "height": 0.5,
                             "width": 0.5,
                             "depth": 0.1,
                             "visible": true
+                        },
+                        "children": {
+                            "material": {
+                                "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                                "type": "component",
+                                "properties":{
+                                    "color": myColor
+                                }
+                            }
                         }
                     },
                     
@@ -103,13 +119,22 @@ this.createAvatarBody = function (modelSrc) {
                             "vis": {
                                 "extends": "http://vwf.example.com/aframe/abox.vwf",
                                 "properties": {
-                                    "color": myColor,
                                     "position": "0 0 -3",
                                     "height": 0.05,
                                     "width": 0.05,
                                     "depth": 0.01,
                                     "visible": true
+                                },
+                                "children": {
+                                    "material": {
+                                        "extends": "http://vwf.example.com/aframe/aMaterialComponent.vwf",
+                                        "type": "component",
+                                        "properties":{
+                                            "color": myColor
+                                        }
+                                    }
                                 }
+                                
                             },
                             "line": {
                                 "extends": "http://vwf.example.com/aframe/lineComponent.vwf",
@@ -268,10 +293,10 @@ this.createSimpleAvatar = function(){
         this.avatarNode.children.delete(this.avatarNode.myBody);
         var myColor = this.getRandomColor();
         if (this.avatarNode.myHead){
-            myColor = this.avatarNode.myHead.visual.properties.color;
+            myColor = this.avatarNode.myHead.visual.material.color;
         }
         let myBodyDef = this.simpleBodyDef;
-        myBodyDef.properties.color = myColor;
+        myBodyDef.material.color = myColor;
 
         this.avatarNode.children.create("myBody", myBodyDef);
         this.avatarNode.myHead.visual.properties.visible = true;
@@ -319,15 +344,15 @@ this.setSmallVideoHead = function(val){
 this.setVideoTexture = function(val){
     console.log(val);
    // this.setSmallVideoHead();
-    this.avatarNode.myHead.visual.color = "white";
-    this.avatarNode.myHead.visual.src = '#temp';
-    this.avatarNode.myHead.visual.src = '#'+val;
+    this.avatarNode.myHead.visual.material.color = "white";
+    this.avatarNode.myHead.visual.material.src = '#temp';
+    this.avatarNode.myHead.visual.material.src = '#'+val;
 }
 
 this.removeVideoTexture = function(){
    // this.setSmallVideoHead();
-    this.avatarNode.myHead.visual.color = this.avatarNode.myBody.color;
-    this.avatarNode.myHead.visual.src = "";
+    this.avatarNode.myHead.visual.material.color = this.avatarNode.myBody.material.color;
+    this.avatarNode.myHead.visual.material.src = "";
     // this.avatarNode.myHead.visual.src = '#'+val;
 }