fixed move selected + multi tween bugs

app/assets/sfx/intro.js

@@ -2,7 +2,7 @@ import * as THREE from 'three'
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js'
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js'
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
-
+import * as TWEEN from 'three/examples/jsm/libs/tween.module.js' 
 
 class Intro{
 
@@ -45,7 +45,7 @@ class Intro{
         this.Xcorrection = -0.02
     }
 
-    initScene(LoadersResults){ console.log('initScene')
+    initScene(LoadersResults){ 
         let hdrTexture
         const [hdrResult, texResultP42, texResultEE] = LoadersResults
         if((hdrResult.status === 'fulfilled') && (texResultP42.status === 'fulfilled') && (texResultEE.status === 'fulfilled')) {
@@ -56,6 +56,7 @@ class Intro{
             hdrTexture.mapping = THREE.EquirectangularReflectionMapping
             this.backgroundTextureP42.colorSpace = THREE.SRGBColorSpace
             this.backgroundTextureEE.colorSpace = THREE.SRGBColorSpace
+
         } else {
             console.error('Loading error:', hdrResult, texResultP42, texResultEE)
             return
@@ -64,7 +65,8 @@ class Intro{
         this.scene = new THREE.Scene()
 
         this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 100)
-        this.camera.position.set(0.1, 0.02, 4)
+        this.camera.position.set(-2, -0.5, 4) //(0.1, 0.02, 4)
+        this.camera.lookAt(0,0,0)
 
         this.renderer = new THREE.WebGLRenderer({
             antialias: true,
@@ -164,6 +166,7 @@ class Intro{
 
         })
 
+        
         // === Resize handling ===
         window.addEventListener('resize', () => {
             this.camera.aspect = window.innerWidth / window.innerHeight
@@ -226,24 +229,30 @@ class Intro{
             this.matEE.defines.USE_UV = ""
             this.matEE.onBeforeCompile = shader => {
                 shader.uniforms.uReveal = { value: 0 }  
+                shader.uniforms.uTime = { value: 0 };
                 shader.fragmentShader = shader.fragmentShader
                  .replace(
                     `#include <uv_pars_fragment>`,
                     `#include <uv_pars_fragment>
-                     uniform float uReveal;`
+                     uniform float uReveal;
+                     uniform float uTime;
+                    `
                 )                
                 .replace(
                     `#include <envmap_fragment>`,
                     `#include <envmap_fragment>
-                     if (vUv.x > uReveal) discard;
+                     if ((uReveal-vUv.x) < (1.0-uReveal)){
+                        float random = fract(sin(dot(gl_FragCoord.xy + vec2(uTime) , vec2(12.9898,78.233))) * 43758.5453);
+                        if(random > 0.1) discard;
+                     }
                     `
                 )
                 this.matEE.userData.shader = shader
             }
-            
+                                  
             this.planeEE = new THREE.Mesh(geo, this.matEE)
             this.planeEE.scale.set(.2, .2, 1)
-            this.planeEE.position.set(0, -0.8, 0)
+            this.planeEE.position.set(0,-0.8,.1)
             this.planeEE.renderOrder = 1
             this.scene.add(this.planeEE)
         } else {
@@ -255,19 +264,36 @@ class Intro{
     }
 
     animate() {
+        TWEEN.update()
+        this.camera.lookAt(0,0,0)
         requestAnimationFrame(this.animate.bind(this))
         if (this.matEE.userData.shader) {
             if(this.matEE.userData.shader.uniforms.uReveal.value<1){
                 this.matEE.userData.shader.uniforms.uReveal.value += 0.01
+                this.matEE.userData.shader.uniforms.uTime.value = Math.floor(performance.now() / 200)
             }
         }
         if(Date.now()>this.nextAnim){
+
+
             this.#lettersZ += .005
             for(const letter of this.glassLetters){
                 letter.position.z += 0.005 
             }
 
-            if(this.#lettersZ>1.5) {
+            if(this.#lettersZ>0.5){
+                 if(!this.camTween){
+                    this.camTween = new TWEEN.Tween(this.camera.position)
+                        .to({   x: 0.1,
+                                y: 0.02,
+                                z: 4, 
+                            }, 7000)
+                        .easing(TWEEN.Easing.Sinusoidal.InOut)
+                        .start()
+                }    
+            }
+
+            if(this.#lettersZ>1.5) {            
                 for(const [i, letter] of this.glassLetters.entries()){
                     letter.rotation.x += Math.abs(i-4)/-1000
                     letter.rotation.y += (i-4)/2000

app/views/editors/KeyframeView.js

@@ -88,7 +88,7 @@ class KeyframeView extends WindozDomContent {
                     this.outputs.agentsSelector.value = type
                     await this.onChangeAgent()
                     const defaultValues = this.getFieldsValues('div[data-output="agentProperties"]')
-                    return(this.newAgent(type, { ...defaultValues, ...properties })) //TODO: deepMerge
+                    return(await this.newAgent(type, { ...defaultValues, ...properties })) //TODO: deepMerge
                 } else {
                     throw(`Invalid agent type: ${type}`)
                 }

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

@@ -1,6 +1,6 @@
-import * as THREE from 'three' // '/app/thirdparty/Three/three.module.js'
+import * as THREE from 'three' 
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' // '/app/thirdparty/Three/OrbitControls.module.js'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' 
-import * as TWEEN from 'three/examples/jsm/libs/tween.module.js' //'/app/thirdparty/Three/tween.module.js'
+import * as TWEEN from 'three/examples/jsm/libs/tween.module.js' 
 
 export class kfArena{
     
@@ -161,23 +161,27 @@ export class kfArena{
     }
     
     moveAgent(aid, position){
-        let obj3d = this.scene.getObjectByName(aid)
+        const obj3d = this.scene.getObjectByName(aid)
+        this.clearHighlight3DObj(obj3d, this.scene)
         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)
+        if(this.moveAgentTween) this.moveAgentTween.stop()
+        this.moveAgentTween = new TWEEN.Tween(obj3d.position)
             .to({   x: Number(position.x), 
                     y: Number(position.z),
                     z: Number(position.y), 
                 }, 500)
             .easing(TWEEN.Easing.Quadratic.InOut)
+            .onComplete(() => { this.highlight3DObj(obj3d, this.scene) } )
             .start()
-        obj3d = this.scene.getObjectByName(`_speed_${aid}`)
+        const arrow3d = this.scene.getObjectByName(`_speed_${aid}`)
-        if(obj3d){
+        if(arrow3d){
-            new TWEEN.Tween(obj3d.position)
+            if(this.moveArrowTween) this.moveArrowTween.stop()
-                .to({   x: obj3d.position.x + dx, 
+            this.moveArrowTween = new TWEEN.Tween(arrow3d.position)
-                        y: obj3d.position.y + dy, 
+                .to({   x: arrow3d.position.x + dx, 
-                        z: obj3d.position.z + dz, 
+                        y: arrow3d.position.y + dy, 
+                        z: arrow3d.position.z + dz, 
                     }, 500)
                 .easing(TWEEN.Easing.Quadratic.InOut)
                 .start()