speed vectors move with aagent

app/helpers/helpers3D.module.js

@@ -180,24 +180,30 @@ app.helpers.helpers3D = {
         return obj
     },
 
-    createArrow(origin, vector, name='', color = 0xffaa00, headLength = 0.25, headWidth = 0.1) {
+    createArrow(origin, vector, options){
+        options.name = options.name || ''
+        options.color = options.color || 0xffaa00
+        options.headLength = options.headLength || 0.25
+        options.headWidth = options.headWidth || 0.1
+        options.scale = options.scale || 1
         //const from = new THREE.Vector3(origin.x, origin.y, origin.z)
         const dir = new THREE.Vector3(vector.x, vector.y, vector.z).normalize()
-        const length = Math.sqrt(vector.x**2 + vector.y**2 + vector.z**2)
+        let length = Math.sqrt(vector.x**2 + vector.y**2 + vector.z**2)
         if(length==0) return(null)
-        const arrow = new THREE.ArrowHelper(dir, origin, length, color, headLength, headWidth)
+        length *= options.scale
+        const arrow = new THREE.ArrowHelper(dir, origin, length, options.color, options.headLength, options.headWidth)
         
         // Optional: add a subtle tube body for style
-        const shaftGeo = new THREE.CylinderGeometry(0.02, 0.02, length - headLength, 16)
+        const shaftGeo = new THREE.CylinderGeometry(0.02, 0.02, length - options.headLength, 16)
-        const shaftMat = new THREE.MeshStandardMaterial({ color, metalness: 0.3, roughness: 0.2 })
+        const shaftMat = new THREE.MeshStandardMaterial({ color: options.color, metalness: 0.3, roughness: 0.2 })
         const shaft = new THREE.Mesh(shaftGeo, shaftMat)
-        shaft.position.copy(origin.clone().add(dir.clone().multiplyScalar((length - headLength) / 2)))
+        shaft.position.copy(origin.clone().add(dir.clone().multiplyScalar((length - options.headLength) / 2)))
         shaft.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir)
         
         const group = new THREE.Group()
         group.add(arrow)
         group.add(shaft)
-        if(name) group.name = name
+        if(options.name) group.name = options.name
         this.scene.add(group)
         return group
     },

app/views/editors/KeyframeView.js

@@ -125,7 +125,6 @@ class KeyframeView extends WindozDomContent {
     }
 
     onPropsChanged(evt, comp){
-        console.log('onPropsChanged', comp.name, comp.value)
         if(this.currentlySelectedAid && this.kfArena.agents[this.currentlySelectedAid]){
             const AgentValues = this.getFieldsValues('div[data-output="agentProperties"]')
             this.kfArena.agents[this.currentlySelectedAid].values = AgentValues

app/views/editors/modules/kfArena.module.js

@@ -143,9 +143,10 @@ export class kfArena{
             x: values.speed.x, 
             y: values.speed.z, 
             z:values.speed.y },
-            `_speed_${aid}`,
+            {   name: `_speed_${aid}`,
-            0xff0055) 
+                color: 0xff0055,
-
+                scale: 0.5,
+            }) 
 
         this.agents[aid] = {
             type: typeId,
@@ -161,7 +162,10 @@ export class kfArena{
     }
     
     moveAgent(aid, position){
-        const obj3d = this.scene.getObjectByName(aid)
+        let obj3d = this.scene.getObjectByName(aid)
+        const dx = Number(position.x) - obj3d.position.x
+        const dy = Number(position.z) - obj3d.position.y
+        const dz = Number(position.y) - obj3d.position.z
         new TWEEN.Tween(obj3d.position)
             .to({   x: Number(position.x), 
                     y: Number(position.z),
@@ -169,6 +173,16 @@ export class kfArena{
                 }, 500)
             .easing(TWEEN.Easing.Quadratic.InOut)
             .start()
+        obj3d = this.scene.getObjectByName(`_speed_${aid}`)
+        if(obj3d){
+            new TWEEN.Tween(obj3d.position)
+                .to({   x: obj3d.position.x + dx, 
+                        y: obj3d.position.y + dy, 
+                        z: obj3d.position.z + dz, 
+                    }, 500)
+                .easing(TWEEN.Easing.Quadratic.InOut)
+                .start()
+        }
     }
 
     changeAgentSpeed(aid, speed){
@@ -180,8 +194,10 @@ export class kfArena{
             x: speed.x, 
             y: speed.z, 
             z: speed.y },
-            objName,
+            {   name: objName,
-            0xff0055) 
+                color: 0xff0055,
+                scale: 0.5,
+            }) 
     }
 
     reloadAgents(agents){