From a0a0bba6f898ffa06f5fdeb296555ebbfb8dd7db Mon Sep 17 00:00:00 2001 From: STEINNI Date: Mon, 17 Nov 2025 20:52:38 +0000 Subject: [PATCH] highlight wobelling + started console exec --- app/helpers/helpers3D.module.js | 29 ++++++++++---- app/views/editors/KeyframeView.html | 4 +- app/views/editors/KeyframeView.js | 43 +++++++++++++-------- app/views/editors/modules/kfArena.module.js | 3 ++ index.html | 11 +----- 5 files changed, 53 insertions(+), 37 deletions(-) diff --git a/app/helpers/helpers3D.module.js b/app/helpers/helpers3D.module.js index 32570de..9652e6b 100644 --- a/app/helpers/helpers3D.module.js +++ b/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) - inflated.position.copy(child.getWorldPosition(new THREE.Vector3())) - inflated.quaternion.copy(child.getWorldQuaternion(new THREE.Quaternion())) - inflated.scale.copy(child.getWorldScale(new THREE.Vector3())).multiplyScalar(1.05) + const highlightInflatedMesh = new THREE.Mesh(child.geometry, this.outlineMaterial) + highlightInflatedMesh.position.copy(child.getWorldPosition(new THREE.Vector3())) + highlightInflatedMesh.quaternion.copy(child.getWorldQuaternion(new THREE.Quaternion())) + highlightInflatedMesh.scale.copy(child.getWorldScale(new THREE.Vector3())).multiplyScalar(1.05) - scene.add(inflated) - child._outlineMesh = inflated + scene.add(highlightInflatedMesh) + 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) diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html index bb3e84f..1ef99dd 100644 --- a/app/views/editors/KeyframeView.html +++ b/app/views/editors/KeyframeView.html @@ -124,12 +124,12 @@
-
+
JS 3D Console. for help, type "help"
- +
diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js index 6634c56..cf17548 100644 --- a/app/views/editors/KeyframeView.js +++ b/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',` - //
- //
- // JS 3D Console. for help, type "help" - //
- //
- // - // - //
- //
- // `) - } 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 } diff --git a/app/views/editors/modules/kfArena.module.js b/app/views/editors/modules/kfArena.module.js index 53b2435..6719b3e 100644 --- a/app/views/editors/modules/kfArena.module.js +++ b/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)) diff --git a/index.html b/index.html index 7b3eea1..fce2cc2 100644 --- a/index.html +++ b/index.html @@ -18,20 +18,11 @@ } - - - +