on scene selection OK + keyframe model

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)