Three 160, importmap only towards CDN, no more Sparc imports for Three components, kicke outdated outliner, replaced by custom simpler highliter

app/helpers/helpers3D.module.js

@@ -1,9 +1,10 @@
-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'
-import { ShaderPass } from '/app/thirdparty/Three/postprocessing/ShaderPass.module.js'
-import { GammaCorrectionShader } from '/app/thirdparty/Three/shaders/GammaCorrectionShader.module.js'
+import * as THREE from 'three'
+// import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.module.js'
+// import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.module.js'
+// import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.module.js'
+// import { ShaderPass } from 'three/examples/jsm/shaders/GammaCorrectionShader.module.js'
+// import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.module.js'
+
 
 if(!app.helpers) app.helpers = {}
 /**
@@ -75,10 +76,6 @@ app.helpers.helpers3D = {
             // 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
     },
@@ -122,32 +119,71 @@ app.helpers.helpers3D = {
         const top = center.clone().addScaledVector(up, height / 2 + offset)
         return top
     },    
+
     
-    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
-            )
+    outlineMaterial: new THREE.MeshBasicMaterial({
+        color: 0xffff00,
+        side: THREE.BackSide,
+        transparent: true,   
+        opacity: 0.5, 
+        depthTest: true,
+        depthWrite: false,
+        stencilWrite: true,
+        stencilFunc: THREE.AlwaysStencilFunc,
+        stencilRef: 1,
+        stencilMask: 0xff,
+        stencilFail: THREE.KeepStencilOp,
+        stencilZFail: THREE.KeepStencilOp,
+        stencilZPass: THREE.ReplaceStencilOp
+    }),
 
-            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
+    normalStencilMat: new THREE.MeshBasicMaterial({
+        color: 0xffffff,
+        stencilWrite: true,
+        stencilRef: 0,
+        stencilFunc: THREE.NotEqualStencilFunc,
+        stencilFail: THREE.KeepStencilOp,
+        stencilZFail: THREE.KeepStencilOp,
+        stencilZPass: THREE.KeepStencilOp
+    }),
 
-            this.composer.addPass(this.outlinePass)
-            this.highlighted3DObjects = []
-            this.outlinePass.selectedObjects = this.highlighted3DObjects            
+    highlight3DObj(obj, scene) {
+        // Scaled up Mesh to stencil
+        obj.traverse(child => {
+            if (child.isMesh) {
+                const inflated = new THREE.Mesh(child.geometry, this.outlineMaterial)
+                inflated.position.copy(child.getWorldPosition(new THREE.Vector3()))
+                inflated.quaternion.copy(child.getWorldQuaternion(new THREE.Quaternion()))
+                inflated.scale.copy(child.getWorldScale(new THREE.Vector3())).multiplyScalar(1.05)
 
-            this.composer.addPass(new ShaderPass(GammaCorrectionShader))
-        }
-        
+                scene.add(inflated)
+                child._outlineMesh = inflated
+            }
+        })
+
+        // Normal Mesh render only if stencil != 1
+        obj.traverse(child => {
+            if (child.isMesh) {
+                child._savedMaterial = child.material
+                child.material = this.normalStencilMat
+            }
+        })
+    },
+
+    clearHighlight3DObj(obj,scene) {
+        obj.traverse(child => {
+            if (child._outlineMesh) {
+                scene.remove(child._outlineMesh)
+                child._outlineMesh.geometry.dispose()
+                child._outlineMesh.material.dispose()
+                delete child._outlineMesh
+            }
+
+            if (child._savedMaterial) {
+                child.material = child._savedMaterial
+                delete child._savedMaterial
+            }
+        })
     },
 
     makePivotAtGeomCenter(object, scene) {