Dwinzo_dev/app/src/modules/scene/postProcessing/postProcessing.tsx

import * as THREE from 'three'
import { EffectComposer, N8AO, Outline } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'
import { useDeletableFloorItem, useSelectedActionSphere, useSelectedPath, useSelectedWallItem, useselectedFloorItem } from '../../../store/store';
import * as Types from '../../../types/world/worldTypes'
import * as CONSTANTS from '../../../types/world/worldConstants';

export default function PostProcessing() {
    const { deletableFloorItem, setDeletableFloorItem } = useDeletableFloorItem();
    const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
    const { selectedFloorItem, setselectedFloorItem } = useselectedFloorItem();
    const { selectedActionSphere } = useSelectedActionSphere();
    const { selectedPath } = useSelectedPath();

    function flattenChildren(children: any[]) {
        const allChildren: any[] = [];
        children.forEach(child => {
            allChildren.push(child);
            if (child.children && child.children.length > 0) {
                allChildren.push(...flattenChildren(child.children));
            }
        });
        return allChildren;
    }

    return (
        <>
            <EffectComposer autoClear={false}>
                <N8AO color="black" aoRadius={20} intensity={7} distanceFalloff={4} aoSamples={32} denoiseRadius={6} denoiseSamples={16} />
                {deletableFloorItem &&
                    <Outline
                        selection={flattenChildren(deletableFloorItem.children)}
                        selectionLayer={10}
                        width={3000}
                        blendFunction={BlendFunction.ALPHA}
                        edgeStrength={5}
                        resolutionScale={2}
                        pulseSpeed={0}
                        visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
                        hiddenEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor}
                        blur={true}
                        xRay={true}
                    />
                }
                {selectedWallItem &&
                    <Outline
                        selection={
                            selectedWallItem.children[1].children[0].children.filter(
                                (child: Types.Mesh) => child.name !== "CSG_REF"
                            )
                        }
                        selectionLayer={10}
                        width={3000}
                        blendFunction={BlendFunction.ALPHA}
                        edgeStrength={5}
                        resolutionScale={2}
                        pulseSpeed={0}
                        visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                        hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                        blur={true}
                        xRay={true}
                    />}
                {selectedFloorItem &&
                    <Outline
                        selection={flattenChildren(selectedFloorItem.children)}
                        selectionLayer={10}
                        width={3000}
                        blendFunction={BlendFunction.ALPHA}
                        edgeStrength={5}
                        resolutionScale={2}
                        pulseSpeed={0}
                        visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                        hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                        blur={true}
                        xRay={true}
                    />
                }
                {selectedActionSphere &&
                    <Outline
                        selection={[selectedActionSphere.point]}
                        selectionLayer={10}
                        width={750}
                        blendFunction={BlendFunction.ALPHA}
                        edgeStrength={15}
                        resolutionScale={2}
                        pulseSpeed={0}
                        visibleEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                        hiddenEdgeColor={CONSTANTS.outlineConfig.assetSelectColor}
                        blur={true}
                        xRay={true}
                    />
                }
                {selectedPath &&
                    <Outline
                        selection={flattenChildren(selectedPath.group.children)}
                        selectionLayer={10}
                        width={750}
                        blendFunction={BlendFunction.ALPHA}
                        edgeStrength={15}
                        resolutionScale={2}
                        pulseSpeed={0}
                        visibleEdgeColor={0x6f42c1}
                        hiddenEdgeColor={0x6f42c1}
                        blur={true}
                        xRay={true}
                    />
                }
            </EffectComposer>
        </>
    )
}