ageent preview & select in KF editor

app/views/editors/KeyframeView.html

@@ -1,16 +1,25 @@
 <style>
-    canvas[data-output="kfeCanvas"]{
-        width: 100%;
-        height: 100%;
-    }
     .kf-editor{
         grid-template-columns: 15% auto 20%;
+        grid-gap:0;
+        height: 100%;
     }
+    .kf-editor > article{
+        height: 100%;
+        margin: 0;
+    }
+    .kf-editor > article, .kf-editor > article header{ border-color: #473; }
+    .kf-editor article.agent-preview header { padding:0; }
+    .kf-editor article.agent-preview canvas{ width:100%; height:100%; } 
+
 </style>
 <div class="kf-editor cols-3">
-    <article eiccard="">
-         <header>Agent show</header>
-        <section>agents selector</section>
+    <article eiccard class="agent-preview">
+         <header><canvas data-output="agentSampleCanvas"></canvas></header>
+        <section>
+            agents selector
+            <select data-output="agentsSelector"></select>
+        </section>
     </article>
     <article eiccard="" data-eicui-id="d9aace9b-9e60-4cfc-ad7c-98b9693d05f3" aria-enabled="true">
         <section>
@@ -25,5 +34,3 @@
 </div>    
     
 
-
-<!-- <canvas data-output="kfeCanvas"></canvas> -->

app/views/editors/KeyframeView.js

@@ -3,7 +3,6 @@ class KeyframeView extends WindozDomContent {
     constructor() {
         super()
         Object.assign(this, app.helpers.activeAttributes)
-        //this.tileMarkup = app.Assets.Store.html['/app/assets/html/mailing/tile.html']
     }
     
     DOMContentFocused(options) { 
@@ -15,36 +14,31 @@ class KeyframeView extends WindozDomContent {
 
     DOMContentBlured(options) { this.wasBlured = true }
 
-    DOMContentLoaded(options) {    
+    async DOMContentLoaded(options) {    
         this.windowPrefsId = `editors.keyframeview`
-        for(let model in options.models) this[model] = options.models[model]
-        // this.kfe = options.kfe
+        this.models = options.models
         const components = ui.eicfy(this.el)       
         this.setupTriggers(components)        
         this.setupRefs(components)
-        // this.renderingEngine = this.kfe.startRendering(this.outputs.kfeCanvas, options.mode)
-        this.output('settingsMenu',app.Assets.Store.html.spaceViewSetting)
-        this.outputs.settingsMenu.querySelectorAll('input[type="toggler"]').forEach(el => {  
-                const tog = new InputToggler(el)
-                // if(this.kfe[tog._el.name].layers){
-                //     tog.value = this.renderingEngine.camera.layers.test(this.kfe[tog._el.name].layers) ? 'yes' : 'no'
-                // }
-                tog.onToggle = this.settingsToggle.bind(this)
-        })
+
+
+        this.agentDefs = await this.models.agents.getSprites('Basic 3D')
+        for(const agentType in this.agentDefs){
+            const opt = new Option(agentType, agentType)
+            this.outputs.agentsSelector.add(opt)
+        }
+        this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))
+
+        this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentDefs)
+        this.onChangeAgent()
+        this.agentPreview.startRendering()
+        this.agentPreview.animation = true
     }
 
-    settingsToggle(value, object){
-        if(['grid','axes'].includes(object._el.name)){
-            const layerId = {'grid':1,'axes':2}[object._el.name]
-            if(value=='yes'){
-                this.renderingEngine.camera.layers.enable(layerId)
-            } else {
-                this.renderingEngine.camera.layers.disable(layerId)
-            }
-        }
-        //TODO save & restore in prefs
+    onChangeAgent(event){
+        this.agentPreview.setAgent(this.outputs.agentsSelector.value)
     }
-    
+
 }
 
 app.registerClass('KeyframeView', KeyframeView)

app/views/editors/modules/agentPreview.module.js

@@ -0,0 +1,76 @@
+import * as THREE from '/app/thirdparty/Three/three.module.js'
+import { OrbitControls } from '/app/thirdparty/Three/OrbitControls.module.js'
+import * as TWEEN from '/app/thirdparty/Three/tween.module.js'
+
+export class AgentPreview{
+
+    constructor(canvasEl, agentDefs){
+        Object.assign(this, app.helpers.helpers3D)
+        this.agentDefs = app.Assets.Store.json.agentDefs
+        this.canvasEl = canvasEl
+        this.agentDefs = agentDefs
+        this.currentAgentObj = null
+        this.renderer = null
+        this._animation = false
+        this.initScene()
+    }
+
+    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)
+        light.intensity = 2
+        this.scene.add(light)
+        this.scene.add(new THREE.AmbientLight(0xffffff, 0.4))
+
+        this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
+    }
+
+    startRendering(){
+        //this.renderer.addControls()       
+        this.renderer.render(this.scene, this.camera)
+    }
+
+    setAgent(atype){
+        if(this.currentAgentObj && (this.scene.children.includes(this.currentAgentObj))){
+            this.scene.remove(this.currentAgentObj)
+        }
+        this.currentAgentObj = this.agentFromJSON('previewedAgent', this.agentDefs[atype])
+        this.currentAgentObj.position.set(0, 0, 0)
+        this.scene.add(this.currentAgentObj)
+
+        this.cameraAutoFrame(this.currentAgentObj, this.camera)
+    }
+
+    set animation(value){
+        this._animation = value
+        if(value) this._animate()
+    }
+
+    get animation(){
+        return(this._animation)
+    }
+
+    _animate = () => {  // to avoid havind to bind(this) in requestAnimationFrame, because one bound fn per frame = continuous GC load
+        if(!this.animation) return
+        requestAnimationFrame(this._animate)
+        this.currentAgentObj.rotation.x += 0.005
+        this.currentAgentObj.rotation.y += 0.01
+        this.renderer.render(this.scene, this.camera)
+    }
+}
+
+// Make this module available to common JS
+if(!app.LoadedModules) app.LoadedModules = {}
+app.LoadedModules.AgentPreview = AgentPreview
+