Mixing Select and PivotControls on multi-selection

[epouliquen]

Hi All,

I'm trying to use PivotControls on a dynamic user selection (potentially multi) using Select.

The idea is to see PivotControl appears only if somthing is selected and only one PivotControl BB-centered if muti selection.

I'm trying to create on the fly children nodes based on 'useSelect()' hook content , but when something is unselected, it is unmounted from scene.. (please see 'map' function in MoveControl component)

So my question is : How can I pass selected React Node as PivotControl children as the only feedback of Select is a Object3D Array, not React nodes ?

import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import {
  OrbitControls,
  PivotControls,
  Environment,
  GizmoHelper,
  GizmoViewport,
  Select,
  useSelect,
  MeshTransmissionMaterial,
} from "@react-three/drei";

import {
  Selection,
  Select as SelectPostProcess,
  EffectComposer,
  Outline,
} from "@react-three/postprocessing";
import { Group } from "three";

function Movable({ ...props }) {
  const mesh = useRef();

  const [hovered, setHover] = useState(false);
  const [active, setActive] = useState(false);

  return (
    <SelectPostProcess enabled={hovered}>
      <mesh
        {...props}
        ref={mesh}
        onPointerOver={() => setHover(true)}
        onPointerOut={() => setHover(false)}
      >
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
      </mesh>
    </SelectPostProcess>
  );
}

function MoveControl() {
  const selected = useSelect();
  console.log("selection changed : ", selected);

  return (
    <PivotControls
      lineWidth={2}
      anchor={[0, 0, 0]}
      fixed
      scale={75}
      annotations={true}
      depthTest={false}
    >
      {selected.map((obj) => (
        <primitive key={obj.id} object={obj} />
      ))}
    </PivotControls>
  );
}

// selection outline broken...

function App() {
  const [selected, setSelected] = useState([]);
  return (
    <>
      <Canvas dpr={[1, 2]}>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />

        <Selection>
          <EffectComposer multisampling={8} autoClear={false}>
            <Outline
              blur
              visibleEdgeColor="white"
              edgeStrength={100}
              width={500}
            />
          </EffectComposer>

          <Select multiple box onChange={setSelected}>
            <Movable position={[-1.2, 0, 0]} />
            <Movable position={[1.2, 0, 0]} />
            <MoveControl />
          </Select>
        </Selection>

        <Environment preset="city" />
        <OrbitControls makeDefault />

        <GizmoHelper alignment="bottom-right" margin={[80, 80]}>
          <GizmoViewport />
        </GizmoHelper>
      </Canvas>
    </>
  );
}

export default App;

Thanks for your help