Outline

<script setup lang="ts">
import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
import type { Intersection, Object3D } from 'three'

const outlinedObjects = ref<Object3D[]>([])

const toggleMeshSelectionState = ({ object }: Intersection) => {
  if (outlinedObjects.value.some(({ uuid }) => uuid === object.uuid)) {
    outlinedObjects.value = outlinedObjects.value.filter(({ uuid }) => uuid !== object.uuid)
  }
  else {
    outlinedObjects.value = [...outlinedObjects.value, object]
  }
}
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->
    <TresMesh @click="toggleMeshSelectionState">
      <TresBoxGeometry />
      <TresMeshStandardMaterial color="hotpink" />
    </TresMesh>

    <Suspense>
      <EffectComposerPmndrs>
        <OutlinePmndrs :outlined-objects="outlinedObjects" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>