highlight wobelling + started console exec

app/helpers/helpers3D.module.js

@@ -122,10 +122,10 @@ app.helpers.helpers3D = {
 
     
     outlineMaterial: new THREE.MeshBasicMaterial({
-        color: 0xffff00,
+        color: 0xFFFFFF,
         side: THREE.BackSide,
         transparent: true,   
-        opacity: 0.5, 
+        opacity: 0.8, 
         depthTest: true,
         depthWrite: false,
         stencilWrite: true,
@@ -148,16 +148,17 @@ app.helpers.helpers3D = {
     }),
 
     highlight3DObj(obj, scene) {
+        this.highlightedObj = obj
         // Scaled up Mesh to stencil
         obj.traverse(child => {
             if (child.isMesh) {
-                const inflated = new THREE.Mesh(child.geometry, this.outlineMaterial)
+                const highlightInflatedMesh = new THREE.Mesh(child.geometry, this.outlineMaterial)
-                inflated.position.copy(child.getWorldPosition(new THREE.Vector3()))
+                highlightInflatedMesh.position.copy(child.getWorldPosition(new THREE.Vector3()))
-                inflated.quaternion.copy(child.getWorldQuaternion(new THREE.Quaternion()))
+                highlightInflatedMesh.quaternion.copy(child.getWorldQuaternion(new THREE.Quaternion()))
-                inflated.scale.copy(child.getWorldScale(new THREE.Vector3())).multiplyScalar(1.05)
+                highlightInflatedMesh.scale.copy(child.getWorldScale(new THREE.Vector3())).multiplyScalar(1.05)
 
-                scene.add(inflated)
+                scene.add(highlightInflatedMesh)
-                child._outlineMesh = inflated
+                child._outlineMesh = highlightInflatedMesh
             }
         })
 
@@ -171,6 +172,7 @@ app.helpers.helpers3D = {
     },
 
     clearHighlight3DObj(obj,scene) {
+        this.highlightedObj = null
         obj.traverse(child => {
             if (child._outlineMesh) {
                 scene.remove(child._outlineMesh)
@@ -186,6 +188,17 @@ app.helpers.helpers3D = {
         })
     },
 
+    animateHighlight3DObj() {
+        if(!this.highlightedObj) return
+        const t = performance.now() * 0.002
+        const scale = 1.05 + Math.sin(t * 2) * 0.03
+        this.highlightedObj.traverse(child => {
+            if (child._outlineMesh) {
+                child._outlineMesh.scale.set(scale, scale, scale)
+            }
+        })
+    },
+
     makePivotAtGeomCenter(object, scene) {
         object.updateWorldMatrix(true, true)
         const box = new THREE.Box3().setFromObject(object)

app/views/editors/KeyframeView.html

@@ -124,12 +124,12 @@
             <canvas data-output="kfArenaCanvas"></canvas> 
             <bz-slidepane side="bottom" data-output="console">
                 <div class="inner-console">
-                    <div class="results">
+                    <div class="results" data-output="results">
                         JS 3D Console. for help, type "help"
                     </div>
                     <div class="cols-2 commandline">
                         <textarea type="text" data-output="commands"></textarea>   
-                        <button class="icon-play" data-trigger="execCommand"></button>
+                        <button eicbutton class="icon-play" data-trigger="execCommand"></button>
                     </div>      
                 </div>                
             </bz-slidepane>

app/views/editors/KeyframeView.js

@@ -63,22 +63,18 @@ class KeyframeView extends WindozDomContent {
         this.outputs.btnSaveKF.disabled = true  
         this.outputs.kfName.addEventListener('keyup', this.updateKfButtons.bind(this))
         this.currentlySelectedAid = null
-        // this.output('console',`
-        //     <div class="inner-console">
-        //         <div class="results">
-        //             JS 3D Console. for help, type "help"
-        //         </div>
-        //         <div class="cols-2 commandline">
-        //             <textarea type="text" style="" data-output="commands"></textarea>   
-        //             <button class="icon-play" data-trigger="execCommand"></button>
-        //         </div>      
-        //     </div>
-        // `)
-
     }
 
     async execCommand(event){
-        console.log('cmd:', this.ouputs.caommands)
+        console.log('cmd:', this.outputs.commands)
+        if(this.outputs.commands.trim()=='help'){
+            this.outputs.results.innerHTML = `
+                Type any javascript at your own risks.
+                To create an agent : this.newAgent(type, properties)
+            `
+        } else {
+            this.kfArena.evalCmd(this.outputs.commands)
+        }
     }
 
     async onChangeAgent(event){
@@ -91,6 +87,9 @@ class KeyframeView extends WindozDomContent {
             this.currentAgentType = await this.models.agents.getProperties(this.outputs.agentsSelector.value)
             this.fillAgentProperties('', this.currentAgentType.atp_props)
             // Deselect any on-scene selection
+            if(this.currentlySelectedAid){
+                this.kfArena.clearHighlight3DObj(this.kfArena.scene.getObjectByName(this.currentlySelectedAid), this.kfArena.scene)
+            }
             this.currentlySelectedAid = null
         }
     }
@@ -113,7 +112,11 @@ class KeyframeView extends WindozDomContent {
             this.kfArena.clearHighlight3DObj(obj3D, this.kfArena.scene)
             this.currentlySelectedAid = null
         } else { // Select
-            this.currentlySelectedAid = aid
+            if(this.currentlySelectedAid){
+                this.kfArena.clearHighlight3DObj(this.kfArena.scene.getObjectByName(this.currentlySelectedAid), this.kfArena.scene)
+            }
+
+            this.currentlySelectedAid = aid            
             if(this.kfArena.agents[aid]) {
                 this.kfArena.highlight3DObj(obj3D, this.kfArena.scene)
                 this.fillAgentProperties(aid, this.kfArena.agents[aid].props, this.kfArena.agents[aid].values)
@@ -127,13 +130,19 @@ class KeyframeView extends WindozDomContent {
 
     onAddAgent(event){
         //TODO prevent collisions !
-        const aid = crypto.randomUUIDv7()
-        this.output('agentId', `ID: ${aid}`)
         const AgentValues = this.getFieldsValues('div[data-output="agentProperties"]')
-        this.kfArena.addAgent(this.outputs.agentsSelector.value, aid, this.currentAgentType.atp_props , AgentValues)
+        const aid = this.newAgent(this.outputs.agentsSelector.value, AgentValues)
+        this.output('agentId', `ID: ${aid}`)
         this.updateKfButtons()
     }
 
+    newAgent(aType, AgentValues){
+        const aid = crypto.randomUUIDv7()
+        this.kfArena.addAgent(aType, aid, this.currentAgentType.atp_props , AgentValues)
+        return(aid)
+    }
+
+
     updateKfButtons(){
         if((Object.keys(this.kfArena.agents).length > 0) && (this.outputs.kfName.value.length > 5)) { this.outputs.btnSaveKF.disabled = false  }
         else { this.outputs.btnSaveKF.disabled = true  }

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

@@ -72,11 +72,13 @@ export class kfArena{
     
     render() {
         TWEEN.update()
+        this.animateHighlight3DObj()
         const resized = this.resizeRendererToDisplaySize()
         this.renderer.render(this.scene, this.camera)
         requestAnimationFrame(this.render.bind(this))
     }
     
+
     
     resizeRendererToDisplaySize() {
         const width = this.canvasEl.clientWidth
@@ -206,6 +208,7 @@ export class kfArena{
         }
     }
 
+
     // getAllAgents(){
     //     const agents = []
     //     scene.traverse(o => o.name && names.push(o.name))

index.html

@@ -18,20 +18,11 @@
     }
     </script>    
     <script type="module" src="/app/assets/sfx/intro.js"></script>
-<!--
-            "three/examples/jsm/postprocessing/EffectComposer.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/EffectComposer.js",
-            "three/examples/jsm/postprocessing/RenderPass.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/RenderPass.js",
-            "three/examples/jsm/postprocessing/OutlinePass.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/OutlinePass.js",
-            "three/examples/jsm/postprocessing/ShaderPass.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/ShaderPass.js",
-            "three/examples/jsm/shaders/GammaCorrectionShader.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/shaders/GammaCorrectionShader.js"
-
--->
-
 </head>
 
 <body>
     <canvas class="intro3d"></canvas>
-    <div class="icon-spinner loading"></div>
+    <div class="icon-atom loading"></div>
     <button id="startbtn">START</button>
     <div id="login-dialog">
         <div class="cols2">