Selection

Some effects, like Outline or SelectiveBloom can select specific objects. To manage this in a declarative scene with just references can be messy, especially when things have to be grouped. These two components take care of it:

<Selection
  children: JSX.Element | JSX.Element[]
  enabled?: boolean
>

<Select
  children: JSX.Element | JSX.Element[]
  enabled?: boolean
  /** Keeps this subtree out of the selection, even when an ancestor Select is enabled. */
  exclude?: boolean
>

You wrap everything into a selection, this one holds all the selections. Now you can individually select objects or groups. Effects that support selections (for instance Outline) will acknowledge it.

<Selection>
  <EffectComposer autoClear={false}>
    <Outline blur edgeStrength={100} />
  </EffectComposer>
  <Select enabled>
    <mesh />
  </Select>
</Selection>

Selection can be nested and group multiple object, higher up selection take precedence over lower ones. The following for instance will select everything. Remove the outmost enabled and only the two mesh group is selected. You can flip the selections or bind them to interactions and state.

<Select enabled>
  <Select enabled>
    <mesh />
    <mesh />
  </Select>
  <Select>
    <mesh />
  </Select>
</Select>

To keep part of an enabled subtree out of the selection, wrap it in a Select with exclude. Selects nested inside an excluded subtree can still select their own objects.

<Select enabled>
  <mesh /> {/* selected */}
  <Select exclude>
    <mesh /> {/* not selected */}
  </Select>
</Select>