diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css index acaa435..1ed8d11 100755 --- a/app/assets/styles/app.css +++ b/app/assets/styles/app.css @@ -357,7 +357,7 @@ input{ border: none; } -button[eicbutton][rounded] { +div.window > section button[eicbutton][rounded] { min-height: 2em; padding: 0; color: #DDD; diff --git a/app/helpers/helpers3D.module.js b/app/helpers/helpers3D.module.js index 135d59c..d2c48a9 100644 --- a/app/helpers/helpers3D.module.js +++ b/app/helpers/helpers3D.module.js @@ -8,10 +8,9 @@ if(!app.helpers) app.helpers = {} app.helpers.helpers3D = { agentFromJSON(id, desc){ - let obj + let obj, wrapper if(desc.type === 'Mesh') { const geom = new THREE[desc.geometry.type](...(desc.geometry.args || [])) - const matType = desc.material.type const matProps = { ...desc.material } for (const key in matProps) { @@ -26,7 +25,16 @@ app.helpers.helpers3D = { } const mat = new THREE[matType](matProps) + obj = new THREE.Mesh(geom, mat) + if(desc.translate){ + wrapper = new THREE.Object3D() + wrapper.add(obj) + obj.position.x = desc.translate[0] + obj.position.y = desc.translate[1] + obj.position.z = desc.translate[2] + } + } else if(desc.type === 'Group') { obj = new THREE.Group() } else { @@ -45,6 +53,7 @@ app.helpers.helpers3D = { obj.add(this.agentFromJSON(childId, childDesc)) }) } + if(wrapper) obj=wrapper obj.name = id return obj }, diff --git a/app/thirdparty/Threetobus/threetobus.module.js b/app/thirdparty/Threetobus/threetobus.module.js index bc31751..1366e86 100644 --- a/app/thirdparty/Threetobus/threetobus.module.js +++ b/app/thirdparty/Threetobus/threetobus.module.js @@ -173,6 +173,18 @@ export class Threetobus{ this.axes.layers.set(2) this.scene.add(this.axes) } + // Base plane + const planeGeo = new THREE.PlaneGeometry(100, 100) + const planeMat = new THREE.MeshBasicMaterial({ + color: 0xaaaacc, + opacity: 0.3, + transparent: true, // needed for opacity < 1 to take effect + side: THREE.DoubleSide + }) + this.basePlane = new THREE.Mesh(planeGeo, planeMat) + 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) // Cameras this.cameras.camPerspective = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html index b39d307..f93d595 100644 --- a/app/views/editors/KeyframeView.html +++ b/app/views/editors/KeyframeView.html @@ -14,21 +14,36 @@ .kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; } .kf-editor article.agent-preview section, .kf-editor article.agent-properties section{ display: grid; - grid-template-rows: auto 2em; + grid-template-rows: 2em auto 2em; height: 100%; } .kf-editor article.kfArena section{ padding: 0; height: 100%; - + overflow: hidden; } - .kf-editor article.agent-preview section div.actions button{ + .kf-editor article.agent-properties section div.agent-actions{ + border: 1px solid #574; + border-radius: 5px; + background-color: #231; + box-shadow: 0px 0px 7px #0B69; + height: 2em; + padding: 0 5px 0 5px; + } + .kf-editor article.agent-properties section div.agent-actions button{ color: #DDD; padding: 0 0 0 0; - min-height: 0.5em; + min-height: 1.2em; + } + .kf-editor article.agent-properties section div.kf-actions button{ + color: #DDD; + padding: 0 0 0 0; + min-height: 2em; } .kf-editor button[data-trigger="onAddAgent"] { background-color: #473; } .kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; } + .kf-editor button[data-trigger="onSaveKF"] { background-color: #367; } + .kf-editor button[data-trigger="onResetKF"] { background-color: #A00; } .kf-editor section[data-output="agentProperties"] label{ font-size: 0.9em; } .kf-editor section[data-output="agentProperties"] div.cols-2 { grid-template-columns: 4fr 3fr; } @@ -51,10 +66,14 @@

Agent properties

+
+ + +
-
- - +
+ +
diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js index 2a92b2c..9ee24cb 100644 --- a/app/views/editors/KeyframeView.js +++ b/app/views/editors/KeyframeView.js @@ -43,10 +43,10 @@ class KeyframeView extends WindozDomContent { this.kfArena = new app.LoadedModules.kfArena(this.outputs.kfArenaCanvas, this.agentSprites) this.kfArena.startRendering() - - + this.outputs.btnAddAgent.disabled = true this.outputs.btnRemoveAgent.disabled = true + this.outputs.btnSaveKF.disabled = true } async onChangeAgent(event){ diff --git a/app/views/editors/modules/kfArena.module.js b/app/views/editors/modules/kfArena.module.js index 4e931a0..0fb6669 100644 --- a/app/views/editors/modules/kfArena.module.js +++ b/app/views/editors/modules/kfArena.module.js @@ -33,10 +33,23 @@ export class kfArena{ this.scene.add(light) this.scene.add(new THREE.AmbientLight(0xffffff, 0.4)) - this.grid = new THREE.GridHelper(this.sceneSize.x, this.sceneSize.y, 0x8888AA, 0x8888AA) + 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({ + color: 0xaaaacc, + opacity: 0.3, + transparent: true, // needed for opacity < 1 to take effect + side: THREE.DoubleSide + }) + this.basePlane = new THREE.Mesh(planeGeo, planeMat) + 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.sceneSize.y/2) this.axes.layers.set(2) this.scene.add(this.axes)