front/src/components/Promo/load_models.vue

@@ -29,7 +29,7 @@ const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene()
 const { controls, camera, scene, raycaster, renderer } = useTresContext()
 const { pause, resume } = useLoop()
-const { seekByName, seekAllByName } = useSeek()
+const { seekByName, seekAllByName, seek } = useSeek()
 
 const groundTexture = await useTexture({
     displacementMap: '/ground_displacement.jpg',
@@ -213,6 +213,7 @@ onAfterRender(() => {
     clickable_refs.value.map(el => {
         if (el.value[0].children[0] && typeof el.value[0].children[0].lookAt == 'function') {
             el.value[0].children[0].lookAt(camera.value?.position);
+            el.value[0].children[1].lookAt(camera.value?.position);
             // el.value[0].updateMatrixWorld()
         }
     })
@@ -223,6 +224,17 @@ onAfterRender(() => {
     }
 })
 
+let oldObj = []
+const passShader = (obj) => {
+    if (obj.isMesh) {
+        oldObj.push({ uuid: obj.uuid, color: obj.material.color })
+        obj.material.color = new Color(1, 0, 0)
+    } else {
+        for (let c in obj.children) {
+            passShader(obj.children[c])
+        }
+    }
+}
 const openSidebar = (id: number) => {
     const target = clickable.value.find(el => el.id == id)
     if (!target) return
@@ -236,6 +248,15 @@ const openSidebar = (id: number) => {
     }
     sidebar.setData(sidebar_data)
     sidebar.open()
+
+    const elements = [
+        seekByName(scene.value, target.name),
+        seekByName(scene.value, target.object_name),
+    ].filter(Boolean)
+
+    elements.forEach((element) => {
+        passShader(element)
+    })
 }
 
 loadModels()
@@ -305,11 +326,19 @@ watch(() => sidebar_scene.list, () => {
         }
     });
 }, { deep: true })
+watch(() => sidebar.is_open, () => {
+    if (sidebar.is_open == false) {
+        oldObj.forEach(el => {
+            const obj = seek(scene.value, 'uuid', el.uuid)
+            obj.material.color = el.color
+        })
+    }
+})
 </script>
 <template>
     <TresGroup name="loaded">
         <Env v-bind="envVars" />
-        <PostProcessing />
+        <!-- <PostProcessing /> -->
         <template v-for="item in models">
             <TresGroup :name="item.name">
                 <TresObject3D v-bind="item.modelFile.clone()" />

front/src/components/Promo/post_processing.vue

@@ -1,8 +1,12 @@
 <script setup lang="ts">
 import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
 import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
+import { CopyShader } from 'three/addons/shaders/CopyShader.js';
+import { BleachBypassShader } from 'three/addons/shaders/BleachBypassShader.js';
+
 
 import { useTresContext, useLoop } from '@tresjs/core';
 import { Vector2 } from 'three';
@@ -10,16 +14,17 @@ import { Vector2 } from 'three';
 const { renderer, camera, scene } = useTresContext()
 
 const composer = new EffectComposer(renderer.value);
-
-const makePostProcess = () => {
-    if (camera.value) {
 const renderPass = new RenderPass(scene.value, camera.value);
-        const outlinePass = new OutlinePass( new Vector2( window.innerWidth, window.innerHeight ), scene.value, camera.value)
 const outputPass = new OutputPass();
-        // composer.passes = [renderPass, outlinePass, outputPass]
-    }
-}
-makePostProcess()
+const testPass = new ShaderPass(BleachBypassShader);
+const copyPass = new ShaderPass(CopyShader);
+composer.passes = [
+    renderPass,
+    testPass,
+    outputPass,
+    copyPass
+]
+
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
     composer.render()

front/src/components/Promo/sidebar.vue

@@ -45,6 +45,7 @@ const route = useRoute()
 </template>
 <style scoped lang="scss">
 .sidebar {
+    min-width: 20vw;
     max-width: 23vw;
     background-color: #fff;
     position: fixed;
@@ -58,7 +59,6 @@ const route = useRoute()
 
     @media(max-width:768px) {
         padding-top: 2rem;
-        ;
         padding-left: 0.75rem;
         padding-right: 0.75rem;
         max-width: 48%;