add scale animation

public/defaults/proxy/vwf.example.com/aframe/aentity.vwf.yaml

@@ -29,6 +29,16 @@ properties:
     get: |
       return this.rotation || goog.vec.Vec3.create();
   scale:
+    set: |
+      var scale = this.translationFromValue( value ); // parse incoming value
+      if(!scale || !this.scale){
+        this.scale = goog.vec.Vec3.create();
+      } else if ( ! goog.vec.Vec3.equals( this.scale || goog.vec.Vec3.create(), scale ) ) {
+        this.scale = scale;
+        this.scaleChanged( scale);
+      }  
+    get: |
+      return this.scale || goog.vec.Vec3.create();
   clickable:
   displayName:
   visible:
@@ -36,7 +46,8 @@ properties:
   osc:
 events:
   positionChanged:
-  rotationChanged:  
+  rotationChanged:
+  scaleChanged:
 methods:
   setGizmoMode:
     parameters:

public/defaults/proxy/vwf.example.com/aframe/interpolation-component.vwf.yaml

@@ -5,4 +5,5 @@ type: "component"
 properties:
   enabled:
   deltaPos:
-  deltaRot:
+  deltaRot:
+  deltaScale:

public/defaults/proxy/vwf.example.com/animation/animationNode.vwf.yaml

@@ -242,7 +242,7 @@ methods:
       - duration
     body: |
       this.startScaleSIM = this.scale || goog.vec.Vec3.createFromValues( 1, 1, 1 );
-      var deltaScale = this.scaleFromValue( scale );
+      var deltaScale = this.translationFromValue( scale );
       this.stopScaleSIM = goog.vec.Vec3.createFromValues(
         this.startScaleSIM[0] * deltaScale[0],
         this.startScaleSIM[1] * deltaScale[1],
@@ -278,7 +278,7 @@ methods:
       - duration
     body: |
       this.startScaleSIM = this.scale || goog.vec.Vec3.createFromValues( 1, 1, 1 );
-      this.stopScaleSIM = this.scaleFromValue( scale );
+      this.stopScaleSIM = this.translationFromValue( scale );
       if(duration > 0) {
         this.animationDuration = duration;
         this.animationUpdate = function(time, duration) {

public/defaults/worlds/aframe2/index.vwf.yaml

@@ -50,7 +50,7 @@ children:
       mtl: "#plane-mtl"
       position: "-1.2 1.7 -2.5"
       rotation: "0 -45 0"
-      scale: "0.5 0.5 0.5"
+      scale: [0.5, 0.5, 0.5]
     children:
       shadow:
         extends: http://vwf.example.com/aframe/shadowComponent.vwf

public/vwf/model/aframe.js

@@ -199,6 +199,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                     //updateStoredTransform( node );
                     updateStoredTransformFor(node,'position');
                     updateStoredTransformFor(node,'rotation');
+                    updateStoredTransformFor(node,'scale');
                 }
 
                 //notifyDriverOfPrototypeAndBehaviorProps();
@@ -363,7 +364,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         var position = setFromValue(propertyValue || []); //goog.vec.Vec3.createFromArray( propertyValue || [] );
                             node.transform.position = goog.vec.Vec3.clone(position);
                             //value = propertyValue;
-                            node.transform.storedPositionDirty = true; 
+                            node.transform.storedpositionDirty = true; 
                             //setTransformsDirty( threeObject );
                             //this.state.setAFrameProperty('position', propertyValue, aframeObject);
                             break;
@@ -373,20 +374,29 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             var rotation = setFromValue(propertyValue || []); //goog.vec.Vec3.createFromArray( propertyValue || [] );
                             node.transform.rotation = goog.vec.Vec3.clone(rotation);
                             //value = propertyValue;
-                            node.transform.storedRotationDirty = true; 
+                            node.transform.storedrotationDirty = true; 
 
                             //this.state.setAFrameProperty('rotation', propertyValue, aframeObject);
                             break;
 
                         case "scale":
-                        this.state.setAFrameProperty('scale', propertyValue, aframeObject);
+
+                        var scale = setFromValue(propertyValue || []); //goog.vec.Vec3.createFromArray( propertyValue || [] );
+                        node.transform.scale = goog.vec.Vec3.clone(scale);
+                        //value = propertyValue;
+                        node.transform.storedscaleDirty = true; 
+                        //setTransformsDirty( threeObject );
+                        //this.state.setAFrameProperty('position', propertyValue, aframeObject);
+
+                        //this.state.setAFrameProperty('scale', propertyValue, aframeObject);
                             break;
 
 
                         case "animationTimeUpdated":
                                 if (node.transform) {
-                                    node.transform.storedPositionDirty = true; 
-                                    node.transform.storedRotationDirty = true;
+                                    node.transform.storedpositionDirty = true; 
+                                    node.transform.storedrotationDirty = true;
+                                    node.transform.storedscaleDirty = true;
                                 }
                                 
                         break;
@@ -854,7 +864,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                             if (node.transform.position) {
 
-                            if ( node.transform.storedPositionDirty ) {
+                            if ( node.transform.storedpositionDirty ) {
                                 updateStoredTransformFor( node, 'position' );
                             }
 
@@ -867,7 +877,7 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
                         if (node.transform.rotation) {
 
-                            if ( node.transform.storedRotationDirty ) {
+                            if ( node.transform.storedrotationDirty ) {
                                 updateStoredTransformFor( node, 'rotation' );
                             }
 
@@ -883,10 +893,19 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
 
 
                         case "scale":
-                            var scale = aframeObject.getAttribute('scale');
-                            if (scale !== undefined) {
-                                value = scale//AFRAME.utils.coordinates.stringify(scale);
+
+                        if (node.transform.scale) {
+
+                            if ( node.transform.storedscaleDirty ) {
+                                updateStoredTransformFor( node, 'scale' );
                             }
+
+                            value = goog.vec.Vec3.clone(node.transform.scale);
+                            // var scale = aframeObject.getAttribute('scale');
+                            // if (scale !== undefined) {
+                            //     value = scale//AFRAME.utils.coordinates.stringify(scale);
+                            // }
+                        }
                             break;
 
                       
@@ -1403,6 +1422,28 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
     }    
 
 
+    // function updateStoredTransformFor( node, propertyName ) { 
+
+    //     if ( node && node.aframeObj) {
+    //         // Add a local model-side transform that can stay pure even if the view changes the
+    //         // transform on the threeObject - this already happened in creatingNode for those nodes that
+    //         // didn't need to load a model
+    //         if(!node.transform)
+    //             node.transform = {};
+
+    //         if (propertyName == 'position' || propertyName == 'rotation' || propertyName == 'scale') {
+
+    //             let data = (new THREE.Vector3()).copy(node.aframeObj.object3D[propertyName]);
+    //             node.transform[propertyName] = goog.vec.Vec3.createFromValues(data.x, data.y, data.z);
+    //             node.transform['stored' + propertyName + 'Dirty'] = false; 
+    //             //node.transform.storedPositionDirty = false;
+    //         }
+
+    //     }
+
+
+   // }
+
     function updateStoredTransformFor( node, propertyName ) {
         
         if ( node && node.aframeObj) {
@@ -1425,6 +1466,12 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                 node.transform.storedRotationDirty = false;   
             }
 
+            if (propertyName == 'scale'){
+                let scale = (new THREE.Vector3()).copy(node.aframeObj.object3D.scale);
+                node.transform.scale = goog.vec.Vec3.createFromValues(scale.x, scale.y, scale.z);
+                node.transform.storedPositionDirty = false; 
+            }
+
             //node.transform.position = AFRAME.utils.coordinates.stringify(node.aframeObj.object3D.position);
 
             // node.transform.rotation = AFRAME.utils.coordinates.stringify(node.aframeObj.object3D.rotation);

public/vwf/model/aframe/addon/aframe-interpolation.js

@@ -12,6 +12,7 @@ AFRAME.registerComponent('interpolation', {
   schema: {
     enabled: { default: true },
     deltaPos: { default: 0.001 },
+    deltaScale: { default: 0.001 },
     deltaRot: { default: 0.1 }
   },
 
@@ -25,6 +26,7 @@ AFRAME.registerComponent('interpolation', {
 
     if (!this.interpolation) {
       this.deltaPos = parseFloat(this.data.deltaPos);
+      this.deltaScale = parseFloat(this.data.deltaScale);
       this.deltaRot = THREE.Math.degToRad(parseFloat(this.data.deltaRot));
 
       this.enabled = JSON.parse(this.data.enabled);
@@ -103,6 +105,13 @@ AFRAME.registerComponent('interpolation', {
 
   restoreTransforms: function () {
 
+      this.restorePositionTransforms();
+      this.restoreRotationTransforms();
+      this.restoreScaleTransforms();
+  },
+
+  restorePositionTransforms: function () {
+
     var now = this.node.interpolate.position.selfTick;
 
     if (now && this.node.needPositionRestore) {
@@ -111,38 +120,34 @@ AFRAME.registerComponent('interpolation', {
       this.node.needPositionRestore = false;
     }
 
-    var rNow = this.node.interpolate.rotation.selfTick;
+  },
+
+  restoreRotationTransforms: function () {
 
-    if(rNow && this.node.needRotationRestore) {
+    var now = this.node.interpolate.rotation.selfTick;
+
+    if(now && this.node.needRotationRestore) {
       let r = new THREE.Euler();
-      let rot = r.copy(rNow);
+      let rot = r.copy(now);
 
       this.el.object3D.rotation.set(rot.x, rot.y, rot.z)
       this.node.needRotationRestore = false;
 
     }
+  },
 
+    restoreScaleTransforms: function () {
 
-
-
-    // let r = new THREE.Vector3();
-    // let rot = r.copy(this.node.interpolate.position.selfTick);
-
-    // if (rot && this.node.needTransformRestore) {
-    //   this.el.object3D.position.set(rot.x, rot.y, rot.z)
-    //   this.node.needTransformRestore = false;
-    // }
-
-
-    // let r = new THREE.Euler();
-    // let rot = r.copy(this.node.interpolate.rotation.selfTick);
-
-    // if (rot && this.node.needTransformRestore) {
-    //   this.el.object3D.rotation.set(rot.x, rot.y, rot.z)
-    //   this.node.needTransformRestore = false;
-    // }
-
-  },
+      var now = this.node.interpolate.scale.selfTick;
+  
+      if (now && this.node.needScaleRestore) {
+        let pos = goog.vec.Vec3.clone(now);
+        this.el.object3D.scale.set(pos[0], pos[1], pos[2]);
+        this.node.needScaleRestore = false;
+      }
+  
+    },
+  
 
   setInterpolatedTransforms: function (deltaTime) {
 
@@ -155,6 +160,7 @@ AFRAME.registerComponent('interpolation', {
     
     this.interpolatePosition(step);
     this.interpolateRotation(step);
+    this.interpolateScale(step);
 
     // if (this.node.tickTime == 0){
     //   this.restoreTransforms();
@@ -220,21 +226,32 @@ AFRAME.registerComponent('interpolation', {
           step || 0,
           goog.vec.Vec3.create()
         );
+       
+        this.setPosition(interp);
+        this.node.needPositionRestore = true;
+      }
+    }
+  },
+
+  interpolateScale: function (step) {
 
-       // console.log(this.node.id);
-        //console.log(step + ' : ' + interp);
+    var last = this.node.interpolate.scale.lastTick; //this.node.lastTickTransform;
+    var now = this.node.interpolate.scale.selfTick; //Transform;
 
-        // var lastV = (new THREE.Vector3()).copy(last);
-        // var nowV = (new THREE.Vector3()).copy(now);
+    if (last && now) {
 
-        // var interp = lastV.lerp(nowV, step || 0);
+      let comp = this.vecCmp(last, now, this.deltaScale);
 
-        //this.el.setAttribute('position',interp);
+      if (!comp) {
 
-        //this.el.object3D.position.set(interp.x, interp.y, interp.z);
+       var interp = goog.vec.Vec3.lerp(
+          last, now,
+          step || 0,
+          goog.vec.Vec3.create()
+        );
        
-        this.setPosition(interp);
-        this.node.needPositionRestore = true;
+        this.setScale(interp);
+        this.node.needScaleRestore = true;
       }
     }
   },
@@ -249,6 +266,11 @@ setRotation: function (interp) {
   this.el.object3D.rotation.set(vec.x, vec.y, vec.z);
 },
 
+setScale: function (interp) {
+  let vec = goog.vec.Vec3.clone(interp);
+  this.el.object3D.scale.set(vec[0], vec[1], vec[2]);
+},
+
 
   pause: function () { },
   play: function () { }

public/vwf/model/aframeComponent.js

@@ -557,6 +557,10 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                             case "deltaRot":
                                 parentNodeAF.setAttribute(aframeObject.compName, 'deltaRot', propertyValue);
                                 break;
+                            
+                            case "deltaScale":
+                                parentNodeAF.setAttribute(aframeObject.compName, 'deltaScale', propertyValue);
+                                break;
 
                             default:
                                 value = undefined;
@@ -871,6 +875,10 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         case "deltaRot":
                             value = parentNodeAF.getAttribute(aframeObject.compName).deltaRot;
                             break;
+                        
+                        case "deltaScale":
+                            value = parentNodeAF.getAttribute(aframeObject.compName).deltaScale;
+                            break;
 
                     }
 

public/vwf/view/aframe.js

@@ -165,6 +165,11 @@ define(["module", "vwf/view"], function (module, view) {
                 receiveModelTransformChanges( nodeId, 'rotation', propertyValue );
                }
 
+               if (propertyName == 'scale')
+               {
+                receiveModelTransformChanges( nodeId, 'scale', propertyValue );
+               }
+
             // if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {
 
             //     //console.log("sat new item");
@@ -514,8 +519,10 @@ define(["module", "vwf/view"], function (module, view) {
                 THREE.Math.degToRad(rot[2])
             )
             //node.aframeObj.object3D.rotation.set(rot[0], rot[1], rot[2]);
+           } else if (propertyName == 'scale') {
+            let scale = goog.vec.Vec3.clone( propertyValue );
+            node.aframeObj.object3D.scale.set(scale[0], scale[1], scale[2]);
            }
-
           
            
            //setAFrameProperty ('position', propertyValue, node.aframeObj)

public/vwf/view/aframeComponent.js

@@ -246,35 +246,6 @@ define(["module", "vwf/view"], function (module, view) {
 
     });
 
-    function lerpTock () {
-
-       let interNodes = Object.entries(self.nodes).filter(node => 
-        node[1].extends == 'http://vwf.example.com/aframe/interpolation-component.vwf');
-
-       interNodes.forEach(node => {
-           let nodeID = node[0];
-        if ( self.state.nodes[nodeID] ) {    
-
-            if(self.nodes[nodeID].interpolate)
-            {
-                let positionModel = self.nodes[nodeID].interpolate.positionModel;
-
-                if (positionModel) {
-                    let currentPosition = getPosition(nodeID);
-                    if ( !goog.vec.Vec3.equals( currentPosition, positionModel) ){
-                        self.state.nodes[nodeID].aframeObj.el.object3D.position.set(positionModel[0], positionModel[1], positionModel[2]);
-                        
-                    }
-                }
-               
-            }
-
-        }
-       })
-
-    }
-
-
     function lerpTick () {
         // var now = performance.now();
         // self.realTickDif = now - self.lastRealTick;
@@ -305,7 +276,8 @@ define(["module", "vwf/view"], function (module, view) {
             {
                 self.nodes[nodeID].interpolate = {
                     'position': {},
-                    'rotation': {}
+                    'rotation': {},
+                    'scale': {}
                 }
             }
 
@@ -314,6 +286,9 @@ define(["module", "vwf/view"], function (module, view) {
 
             self.nodes[nodeID].interpolate.rotation.lastTick = (self.nodes[nodeID].interpolate.rotation.selfTick);
             self.nodes[nodeID].interpolate.rotation.selfTick = getRotation(nodeID);
+
+            self.nodes[nodeID].interpolate.scale.lastTick = (self.nodes[nodeID].interpolate.scale.selfTick);
+            self.nodes[nodeID].interpolate.scale.selfTick = getScale(nodeID);
             //console.log(self.nodes[nodeID].interpolate.rotation.selfTick);
             //self.nodes[nodeID].lastTickTransform = self.nodes[nodeID].selfTickTransform;
             //self.nodes[nodeID].selfTickTransform = getTransform(nodeID);
@@ -354,4 +329,17 @@ define(["module", "vwf/view"], function (module, view) {
         return pos;
     }
 
+    function getScale(id) {
+        // let p = new THREE.Vector3();
+        // let pos = p.copy(self.state.nodes[id].aframeObj.el.object3D.position);
+        let p = (new THREE.Vector3()).copy(self.state.nodes[id].aframeObj.el.object3D.scale);
+        let data =  goog.vec.Vec3.createFromValues(p.x, p.y, p.z)
+
+
+        //let pos = self.state.nodes[id].aframeObj.el.getAttribute('position');
+        //let interp = (new THREE.Vector3()).fromArray(Object.values(pos))//goog.vec.Mat4.clone(self.state.nodes[id].threeObject.matrix.elements);
+        
+        return data;
+    }
+
 });