ID: ${aid}
+ `
this.outputs.agentProperties.append(...this.fieldsFromJSON(agentProps, 'Internal properties'))
this.outputs.agentProperties.append(...this.fieldsFromJSON({
"position.x": {
@@ -103,8 +121,10 @@ class KeyframeView extends WindozDomContent {
},
}, 'Speed vector'))
this.outputs.btnAddAgent.disabled = false
+ this.setupRefs()
}
+
}
app.registerClass('KeyframeView', KeyframeView)
diff --git a/app/views/editors/modules/kfArena.module.js b/app/views/editors/modules/kfArena.module.js
index b65e457..da4b32d 100644
--- a/app/views/editors/modules/kfArena.module.js
+++ b/app/views/editors/modules/kfArena.module.js
@@ -3,29 +3,32 @@ import { OrbitControls } from '/app/thirdparty/Three/OrbitControls.module.js'
import * as TWEEN from '/app/thirdparty/Three/tween.module.js'
export class kfArena{
-
+
constructor(canvasEl, agentSprites){
Object.assign(this, app.helpers.helpers3D)
this.agentSprites = app.Assets.Store.json.agentSprites
this.canvasEl = canvasEl
this.agentSprites = agentSprites
this.renderer = null
- this.mode='3D'
+ this.mode = '3D'
this.sceneSize = app.Assets.Store.json.arenaConfig.arenaSize
this.initScene()
+ this.raycaster = new THREE.Raycaster()
+ this.agents = []
+ this.onclickAgent = null
}
-
+
initScene(){
// Scene
this.scene = new THREE.Scene()
-
+
// Camera
this.camera = new THREE.PerspectiveCamera(75, this.canvasEl.clientWidth / this.canvasEl.clientHeight, 0.1, 1000)
this.camera.position.set(3, 3, 5)
this.camera.lookAt(0, 0, 0)
this.camera.layers.enable(1)
this.camera.layers.enable(2)
-
+
// Lights
const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(5, 5, 5)
@@ -36,7 +39,7 @@ export class kfArena{
this.grid = new THREE.GridHelper(this.sceneSize.x, this.sceneSize.x, 0x8888AA, 0x8888AA)
this.grid.layers.set(1)
this.scene.add(this.grid)
-
+
// Base plane
const planeGeo = new THREE.PlaneGeometry(100, 100)
const planeMat = new THREE.MeshBasicMaterial({
@@ -49,19 +52,20 @@ export class kfArena{
this.basePlane.rotation.x = -Math.PI / 2 // lay it flat (like the grid)
this.basePlane.position.y=-0.01 // to avoid artefacts on objets bases
this.scene.add(this.basePlane)
-
+
this.axes = new THREE.AxesHelper(this.sceneSize.x/2)
this.axes.layers.set(2)
this.scene.add(this.axes)
-
+
this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
+ this.canvasEl.addEventListener('click', this.onSceneClick.bind(this))
}
-
+
startRendering(){
this.addControls()
this.render()
}
-
+
render() {
TWEEN.update()
if(this.resizeRendererToDisplaySize()) {
@@ -71,8 +75,8 @@ export class kfArena{
this.renderer.render(this.scene, this.camera)
requestAnimationFrame(this.render.bind(this))
}
-
-
+
+
resizeRendererToDisplaySize() {
const width = this.canvasEl.clientWidth
const height = this.canvasEl.clientHeight
@@ -82,7 +86,7 @@ export class kfArena{
}
return false
}
-
+
addControls(){
this.controls = new OrbitControls(this.camera, this.canvasEl)
if(this.mode=='2D'){
@@ -97,22 +101,51 @@ export class kfArena{
RIGHT: THREE.MOUSE.DOLLY // zoom with right-click
}
}
+
- addAgent(typeId, aid, position){
+ onSceneClick(event){ // ray from the mouse, through the camera lens, to find the first (most foreground) object
+ if(typeof(this.onclickAgent) != 'function') return
+ const normalizedPointer = new THREE.Vector2()
+ const rect = this.canvasEl.getBoundingClientRect()
+ normalizedPointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1
+ normalizedPointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1
+ this.raycaster.setFromCamera(normalizedPointer, this.camera)
+ const intersects = this.raycaster.intersectObjects(this.scene.children, true)
+
+ if (intersects.length > 0) {
+ const hit = this.getNamedParent(intersects[0].object)
+ if(hit) this.onclickAgent(hit.name)
+ }
+ }
+
+
+ addAgent(typeId, aid, properties){
const agentSprite = this.agentSprites.find(item => item.atp_id==typeId)
if(!agentSprite) return
const agentObj = this.agentFromJSON(aid, agentSprite.asp_3d)
-
- agentObj.position.set(position.x, position.z, position.y )
+
+ agentObj.position.set(properties.position.x, properties.position.z, properties.position.y )
+ //TODO Speed vector
this.scene.add(agentObj)
+
+ this.agents.push({
+ aid: aid,
+ props: properties,
+ })
}
-
- removeAgent(id){
- //find obj by id
- //this.scene.remove(this.currentAgentObj)
+
+ removeAgent(aid){
+ const obj3d = scene.getObjectByName(aid)
+ this.scene.remove(obj3d)
+ this.agents = this.agents.filter(a => a.aid !== aid)
}
+
+ // getAllAgents(){
+ // const agents = []
+ // scene.traverse(o => o.name && names.push(o.name))
}
+
// Make this module available to common JS
if(!app.LoadedModules) app.LoadedModules = {}
app.LoadedModules.kfArena = kfArena