on scene selection OK + keyframe model
This commit is contained in:
@@ -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)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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(){
|
||||
|
||||
Reference in New Issue
Block a user