on scene selection OK + keyframe model

app/helpers/formBuilder.js

@@ -6,7 +6,7 @@ if(!app.helpers) app.helpers = {}
  */
 app.helpers.formBuilder = {
 
-    fieldsFromJSON(fieldsObj, fieldsetLabel=null){
+    fieldsFromJSON(fieldsObj, fieldsValues, fieldsetLabel=null){
         let allFields = []
         for(const propName in fieldsObj){
             const fieldRow = ui.create(`<div class="cols-2"><label>${fieldsObj[propName].label}</label></div>`)
@@ -18,34 +18,35 @@ app.helpers.formBuilder = {
                     component.setAttribute('type','number')
                     if('min' in fieldsObj[propName]) component.setAttribute('min', fieldsObj[propName].min)
                     if('max' in fieldsObj[propName]) component.setAttribute('max', fieldsObj[propName].max)
-                    component.value = fieldsObj[propName].default
                     break
                 case 'string': 
                     component = document.createElement('input')
                     component.setAttribute('name',propName)
                     component.setAttribute('type','text')
-                    component.value = fieldsObj[propName].default
                     break
                 case 'boolean':                        
                     component = document.createElement('bz-toggler')
                     component.setAttribute('name',propName)
                     component.setAttribute('trueValue','1')
                     component.setAttribute('falseValue','0')
-                    component.value = fieldsObj[propName].default
                     fieldRow.append(component.el)                    
                     break                    
                 case 'list':
                     component = document.createElement('bz-select')
-                    component.setAttribute('name',propName)
+                    component.setAttribute('name', propName)
                     component.fillOptions( fieldsObj[propName].choices.map(item => {
                         return({ markup: `${item}`, value: item})
-                    })) 
+                    }))
                     break
                 default:
                     console.warn(`Unknown field type ${fieldsObj[propName].type}`)
             }
-            fieldRow.append(component)
-            allFields.push(fieldRow)
+            if(component){
+                component.classList.add('formbuilder-field')
+                component.value = this.getPathInObj(fieldsValues, propName) || fieldsObj[propName].default
+                fieldRow.append(component)
+                allFields.push(fieldRow)
+            }
         }
         if(fieldsetLabel!==null){
             const fieldset = document.createElement('fieldset')
@@ -60,4 +61,34 @@ app.helpers.formBuilder = {
             return(allFields)
         }
     },
+
+    getPathInObj(obj, path){
+        const parts = path.split('.')
+        let target = obj
+        for (let i = 0; i < parts.length - 1; i++) {
+            const key = parts[i]
+            if(!target[parts[i]]) return(null)
+            target = target[parts[i]]
+        }
+        return(target[parts[parts.length - 1]] )
+    },
+
+    getFieldsValues(rootSel){
+        const result = {}
+        document.querySelectorAll(`${rootSel} .formbuilder-field`).forEach(el => {
+            const path = el.name.split('.')
+            let target = result
+            for (let i = 0; i < path.length - 1; i++) {
+                const key = path[i]
+                if (!target[key] || typeof target[key] !== 'object') {
+                    target[key] = {}
+                }
+                target = target[key]
+            }
+            target[path[path.length - 1]] = el.value
+        })
+        return(result)
+    },
+
+
 }

app/helpers/helpers3D.module.js

@@ -1,4 +1,7 @@
 import * as THREE from '/app/thirdparty/Three/three.module.js'
+import { EffectComposer } from '/app/thirdparty/Three/postprocessing/EffectComposer.module.js'
+import { RenderPass } from '/app/thirdparty/Three/postprocessing/RenderPass.module.js'
+import { OutlinePass } from '/app/thirdparty/Three/postprocessing/OutlinePass.module.js'
 
 if(!app.helpers) app.helpers = {}
 /**
@@ -58,6 +61,26 @@ app.helpers.helpers3D = {
         return obj
     },
     
+    resizeRendererToDisplaySize() {
+        const width  = this.canvasEl.clientWidth
+        const height = this.canvasEl.clientHeight        
+        // Check if renderer size differs from displayed size
+        const needResize = this.canvasEl.width !== width || this.canvasEl.height !== height        
+        if (needResize) {
+            // 1. Update renderer (base framebuffer)
+            this.renderer.setSize(width, height, false)
+
+            // 2️. Update camera aspect ratio
+            this.camera.aspect = width / height
+            this.camera.updateProjectionMatrix()
+
+            // 3️. Update postprocessing chain
+            if (this.composer) this.composer.setSize(width, height)
+            if (this.outlinePass) this.outlinePass.setSize(width, height)
+        }      
+        return needResize
+    },
+    
     cameraAutoFrame(object, camera, offset = 1.5, controls) {
         const box = new THREE.Box3().setFromObject(object)
         const size = new THREE.Vector3()
@@ -87,6 +110,32 @@ app.helpers.helpers3D = {
         return center
     },
     
+    init3DHighlighter(options){
+        if (!this.composer) {
+            this.composer = new EffectComposer(this.renderer)
+            this.composer.addPass(new RenderPass(this.scene, this.camera))
+        }
+        
+        if (!this.outlinePass) {
+            this.outlinePass = new OutlinePass(
+                new THREE.Vector2(this.canvasEl.innerWidth, this.canvasEl.innerHeight),
+                this.scene, this.camera
+            )
+
+            this.outlinePass.edgeStrength = options.edgeStrength || 3
+            this.outlinePass.visibleEdgeColor.set(options.visibleEdgeColor || 0xffffff)
+            this.outlinePass.edgeGlow = options.edgeGlow || 0
+            this.outlinePass.edgeThickness = options.edgeThickness || 1
+            this.outlinePass.pulsePeriod = options.pulsePeriod || 0
+
+            this.composer.addPass(this.outlinePass)
+            this.highlighted3DObjects = []
+            this.outlinePass.selectedObjects = this.highlighted3DObjects
+            
+        }
+        
+    },
+
     makePivotAtGeomCenter(object, scene) {
         object.updateWorldMatrix(true, true)
         const box = new THREE.Box3().setFromObject(object)