group selection react three fiber

Question

I am trying "merge"/"group" select multiple meshes.

At the moment I have something like this.

//wrapper


        <group
            onPointerOver={(e) => getOverEvent(e)}
            onPointerOut={(e) => getOutEvent(e)}
            onPointerMissed={(e) => clickOutside(e)}
            onClick={(e) => clickEvent(e)}
            dispose={null}
            ref={group}
            >
            {children}
        </group>

and children as follows


            <mesh
                castShadow
                receiveShadow
                geometry={nodes.shoe.geometry}
                material={materials.laces}
                name="1"

            />
            
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.shoe_1.geometry}
                material={materials.mesh}
                name="2"
            >
            </mesh>
            
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.shoe_2.geometry}
                material={materials.caps}
                name="3"
            />

This result of course is desired, as it hovers the hovered mesh.

however i would also like to be able to group hover certain meshes I have seen something somewhat related to what i want to do. https://github.com/pmndrs/drei#select

Basically i want to group mesh 1 and 3 for example, so if either for those meshes are selected/hovered they are detected that they are of the same group and hover/highlight both of them.

score 0 · Answer 1 · answered Jun 03 '22 at 07:13

Using the group ref you can identify all the children using


let my_group = group.current.getObjectByName("my_group")

console.log(my_group.children)


<group name="my_group">

            <mesh
                castShadow
                receiveShadow
                geometry={nodes.shoe.geometry}
                material={materials.laces}
                name="1"

            />
            
            <mesh
                castShadow
                receiveShadow
                geometry={nodes.shoe_1.geometry}
                material={materials.mesh}
                name="2"
            >
            </mesh>

</group>

group selection react three fiber

1 Answers1