多网格使用Transform Controls时锁定Orbit Controls功能失效求助

问题原因 #

你将同一个transform ref 传给了两个TransformBox组件，React 的 ref 同一时间只能指向一个实例，因此只有最后渲染的那个TransformControls实例成功绑定了dragging-changed事件，第一个立方体的变换控件没有绑定对应的事件监听，所以拖动时不会触发轨道控制器锁定逻辑。

修正方案 #

把事件绑定逻辑下沉到TransformBox组件内部，让每个TransformControls实例都独立绑定事件，同时共享同一个轨道控制器的引用即可，修改后代码如下：

import { useRef, useEffect } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, TransformControls } from '@react-three/drei'

function Box() {
  return (
    <mesh>
      <boxGeometry />
      <meshNormalMaterial />
    </mesh>
  )
}

function TransformBox({ position, orbitRef }) {
  const transformRef = useRef()

  useEffect(() => {
    const controls = transformRef.current
    const callback = (event) => (orbitRef.current.enabled = !event.value
    controls.addEventListener('dragging-changed', callback)
    return () => controls.removeEventListener('dragging-changed', callback)
  }, [orbitRef])

  return (
    <TransformControls position={position} ref={transformRef} mode="translate" showZ={false}>
      <Box />
    </TransformControls>
  )
}

function Main() {
  const orbit = useRef()

  return (
    <>
      <TransformBox orbitRef={orbit} position={[0, 2.5, 0]} />
      <TransformBox orbitRef={orbit} />
      <OrbitControls ref={orbit} />
    </>
  )
}

export default function App() {
  return (
    <Canvas dpr={[1, 2]}>
      <Main />
    </Canvas>
  )
}

内容的提问来源于stack exchange，提问作者Adam Robinson