111 lines
4.9 KiB
TypeScript
111 lines
4.9 KiB
TypeScript
|
import * as THREE from 'three'
|
||
|
import { EffectComposer, N8AO, Outline } from '@react-three/postprocessing'
|
||
|
import { BlendFunction } from 'postprocessing'
|
||
|
import { useDeletableFloorItem, useSelectedEventSphere, 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 { selectedEventSphere } = useSelectedEventSphere();
|
||
|
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}
|
||
|
/>
|
||
|
}
|
||
|
{selectedEventSphere &&
|
||
|
<Outline
|
||
|
selection={[selectedEventSphere.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>
|
||
|
</>
|
||
|
)
|
||
|
}
|