baseplane, root-object offset, saveKF & resetKF buttons...

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;

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
     },

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)

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 @@
     <article eiccard class="agent-properties">
         <header><h1>Agent properties</h1></header>
         <section>
+            <div class="agent-actions cols-2">
+                <button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Create agent</button>
+                <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove agent</button>
+            </div>
             <div data-output="agentProperties"></div>
-            <div class="actions cols-2">
+            <div class="kf-actions cols-2">
-                <button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Add</button>
+                <button eicbutton rounded data-output="btnSaveKF" data-trigger="onSaveKF">Save KF</button>
-                <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove</button>
+                <button eicbutton rounded data-output="btnResetKF" data-trigger="onResetKF">Reset KF</button>
             </div>
         </section>
     </article>

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){

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)