on scene selection OK + keyframe model

This commit is contained in:
STEINNI
2025-10-25 20:23:43 +00:00
parent 6931a777a2
commit 4e1f6886f2
23 changed files with 2107 additions and 64 deletions
+36 -20
View File
@@ -29,7 +29,7 @@ class KeyframeView extends WindozDomContent {
this.agentSprites = sprites
this.agentTypes = types
this.currentAgentType = null
this.outputs.agentsSelector.fillOptions( this.agentTypes.map(item => {
return({ markup: `<i class="icon-${item.atp_hascode ? 'bug' : 'atom1'}"></i>${item.atp_name}`, value: item.atp_id})
@@ -48,44 +48,59 @@ class KeyframeView extends WindozDomContent {
this.outputs.btnAddAgent.disabled = true
this.outputs.btnRemoveAgent.disabled = true
this.outputs.btnSaveKF.disabled = true
this.currentlySelectedAid = null
}
async onChangeAgent(event){
if(this.outputs.agentsSelector.value) this.agentPreview.setAgent(this.outputs.agentsSelector.value)
if(!this.outputs.agentsSelector.value) return
const agent = await this.models.agents.getProperties(this.outputs.agentsSelector.value)
this.fillAgentProperties('', agent.atp_props)
if(this.notUserChange) {
} else {
this.currentAgentType = await this.models.agents.getProperties(this.outputs.agentsSelector.value)
this.fillAgentProperties('', this.currentAgentType.atp_props)
// Deselect any on-scene selection
this.kfArena.highlighted3DObjects.length = 0
this.currentlySelectedAid = null
}
}
onclickAgent(aid){
console.log('Agent clicked:', aid)
onclickAgent(obj3D){
const aid = obj3D.name
this.kfArena.highlighted3DObjects.length = 0 //truncate but keep the ref !
if(this.currentlySelectedAid == aid){ // Deselect
this.currentlySelectedAid = null
} else { // Select
this.currentlySelectedAid = aid
this.kfArena.highlighted3DObjects.push(obj3D)
this.fillAgentProperties(aid, this.kfArena.agents[aid].props, this.kfArena.agents[aid].values)
this.notUserChange = true
this.outputs.agentsSelector.value = this.kfArena.agents[aid].type
this.notUserChange = false
}
this.updateKfButtons()
}
onAddAgent(event){
//TODO prevent collisions !
const aid = crypto.randomUUIDv7()
this.output('agentId', `ID: ${aid}`)
this.kfArena.addAgent(this.outputs.agentsSelector.value, aid, {
position: {
x: document.querySelector('[name="position.x"]').value,
y: document.querySelector('[name="position.y"]').value,
z: document.querySelector('[name="position.z"]').value,
}
})
const AgentValues = this.getFieldsValues('div[data-output="agentProperties"]')
this.kfArena.addAgent(this.outputs.agentsSelector.value, aid, this.currentAgentType.atp_props , AgentValues)
this.updateKfButtons()
}
updateKfButtons(){
if(this.kfArena.agents.length > 0) this.outputs.btnSaveKF.disabled = false
if(Object.keys(this.kfArena.agents).length > 0) this.outputs.btnSaveKF.disabled = false
}
fillAgentProperties(aid, agentProps){
fillAgentProperties(aid, agentProps, agentValues = {}){
this.outputs.agentProperties.innerHTML = `
<div data-output="agentId">ID: ${aid}</div>
`
this.outputs.agentProperties.append(...this.fieldsFromJSON(agentProps, 'Internal properties'))
this.outputs.agentProperties.append(...this.fieldsFromJSON(agentProps, agentValues, 'Internal properties'))
this.outputs.agentProperties.append(...this.fieldsFromJSON({
"position.x": {
label: "Position X",
@@ -102,7 +117,7 @@ class KeyframeView extends WindozDomContent {
type: "number",
default: "0"
},
}, 'Coordinates'))
}, agentValues, 'Coordinates'))
this.outputs.agentProperties.append(...this.fieldsFromJSON({
"speed.x": {
label: "Speed X",
@@ -119,13 +134,14 @@ class KeyframeView extends WindozDomContent {
type: "number",
default: "0"
},
}, 'Speed vector'))
}, agentValues, 'Speed vector'))
this.outputs.btnAddAgent.disabled = false
this.setupRefs()
}
onSaveKF(evt){
console.log('SAVE:',this.kfArena.agents)
async onSaveKF(evt){
console.log('SAVE:',this.kfArena.agents)
await this.models.keyframe.save(this.kfArena.agents)
}
}
+20 -14
View File
@@ -14,7 +14,7 @@ export class kfArena{
this.sceneSize = app.Assets.Store.json.arenaConfig.arenaSize
this.initScene()
this.raycaster = new THREE.Raycaster()
this.agents = []
this.agents = {}
this.onclickAgent = null
}
@@ -58,6 +58,13 @@ export class kfArena{
this.scene.add(this.axes)
this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
this.init3DHighlighter({
edgeStrength: 3,
visibleEdgeColor: 0xffff00,
edgeGlow: 1,
edgeThickness: 4,
pulsePeriod: 2,
})
this.canvasEl.addEventListener('click', this.onSceneClick.bind(this))
}
@@ -68,11 +75,9 @@ export class kfArena{
render() {
TWEEN.update()
if(this.resizeRendererToDisplaySize()) {
this.camera.aspect = this.renderer.domElement.clientWidth / this.canvasEl.clientHeight
this.camera.updateProjectionMatrix()
}
this.renderer.render(this.scene, this.camera)
this.resizeRendererToDisplaySize()
if(this.composer) this.composer.render()
else this.renderer.render(this.scene, this.camera)
requestAnimationFrame(this.render.bind(this))
}
@@ -114,30 +119,31 @@ export class kfArena{
if (intersects.length > 0) {
const hit = this.getNamedParent(intersects[0].object)
if(hit) this.onclickAgent(hit.name)
if(hit) this.onclickAgent(hit)
}
}
addAgent(typeId, aid, properties){
addAgent(typeId, aid, properties, values){
const agentSprite = this.agentSprites.find(item => item.atp_id==typeId)
if(!agentSprite) return
const agentObj = this.agentFromJSON(aid, agentSprite.asp_3d)
agentObj.position.set(properties.position.x, properties.position.z, properties.position.y )
agentObj.position.set(values.position.x, values.position.z, values.position.y )
//TODO Speed vector
this.scene.add(agentObj)
this.agents.push({
aid: aid,
this.agents[aid] = {
type: typeId,
props: properties,
})
values: values,
}
}
removeAgent(aid){
const obj3d = scene.getObjectByName(aid)
this.scene.remove(obj3d)
this.agents = this.agents.filter(a => a.aid !== aid)
if(aid in this.agents) delete(this.agents[aid])
}
// getAllAgents(){
+14 -13
View File
@@ -1,10 +1,10 @@
<style type="text/css">
.icon-list {
align-items: center;
display: flex;
flex-wrap: wrap;
article.styleguide .icon-list {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.icon-list li {
article.styleguide .icon-list li {
list-style: none;
display: grid;
justify-items: center;
@@ -12,7 +12,7 @@
font-family: var(--eicui-base-font-family);
width: 100px;
}
.icon-list li i {
article.styleguide .icon-list li i {
padding: 10px 10px;
margin: 3px;
border: 1px solid gray;
@@ -22,13 +22,14 @@
justify-content: center;
font-size: var(--eicui-base-font-size-2xl);
}
.icon-list li label { font-size: var(--eicui-base-font-size-xs); }
.styleguide > header { background: url('/app/assets/images/cards/styleguide.jpg'); }
.grid-hilite span {
display: block;
min-height: 30px;
border: 1px solid var(--eicui-base-color-primary-100);
}
article.styleguide .icon-list li label { font-size: var(--eicui-base-font-size-xs); }
article.styleguide .styleguide > header { background: url('/app/assets/images/cards/styleguide.jpg'); }
article.styleguide .grid-hilite span {
display: block;
min-height: 30px;
border: 1px solid var(--eicui-base-color-primary-100);
}
article.styleguide article[eiccard] > header h1 { text-align: left; }
</style>
<article eiccard media class="styleguide">
<header>
+2 -1
View File
@@ -39,7 +39,8 @@ class styleguideView extends WindozDomContent {
}
}
ui.eicfy(this.el);
ui.eicfy(this.el)
}
}