feat: add childadded event dispatch

Three r0.162.0 has now support for childadded event in Object3D's

https://github.com/mrdoob/three.js/blob/master/src/core/Object3D.js#L345-L349

Example of implementation for get added objects

import { useEffect, useMemo, useState } from 'react';
import { Layers, Object3D, Object3DEventMap } from 'three';

import { useThree } from '@react-three/fiber';
import useEventCallback from 'use-event-callback';

/**
 * Get all objects in the scene,
 *
 * Inspired in https://github.com/mrdoob/three.js/pull/16934#issuecomment-506793917
 */
export const useSceneObjects = () => {
  const [sceneObjects, setSceneObjects] = useState<Object3D[]>([]);
  const scene = useThree(({ scene }) => scene);

  const addNode = useEventCallback((evt: Object3DEventMap['childadded']) => {
    evt.child.traverse((node) => {
      node.addEventListener('childadded', addNode);
      node.addEventListener('childremoved', removeNode);
        setSceneObjects((prev) => [...prev, node]);
    });
  });

  const removeNode = useEventCallback((evt: Object3DEventMap['childremoved']) => {
    evt.child.traverse((node) => {
      node.removeEventListener('childadded', addNode);
      node.removeEventListener('childremoved', removeNode);
      setSceneObjects((prev) => prev.filter((n) => n !== node));
    });
  });

  useEffect(() => {
    addNode({ child: scene });
  }, [addNode, scene]);

  return sceneObjects;
};

export default useSceneObjects;

pmndrs / react-three-fiber

feat: add childadded event dispatch #3214