组选择反应三纤维

Question

我正在尝试"合并"/"group"选择多个网格

目前我有这样的东西。

//包装器

<group
onPointerOver={(e) => getOverEvent(e)}
onPointerOut={(e) => getOutEvent(e)}
onPointerMissed={(e) => clickOutside(e)}
onClick={(e) => clickEvent(e)}
dispose={null}
ref={group}
>
{children}
</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>

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

这个结果当然是期望的，因为它使悬停的网格悬停。

然而，我也希望能够组悬停某些网格我看到了一些与我想做的事情有关的东西。https://github.com/pmndrs/drei选择

基本上我想对网格1和3进行分组，例如，如果这些网格中的任何一个被选中/悬停，它们都被检测到它们属于同一组，并悬停/突出显示它们。

Answer 1

使用groupref，您可以使用

识别所有子节点

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>