reactjs - 在多个网格上使用变换控件时锁定轨道控件

Question

在我的示例中转换任一网格时，我试图让轨道控制锁定它们的位置。我当前的实现遵循此处找到的逻辑：https ://drei.pmnd.rs/?path=/story/controls-transformcontrols--transform-controls-lock-st它目前锁定了其中一个被移动盒子的轨道控制但不是另一个。任何帮助将不胜感激。

https://codesandbox.io/s/mixing-controls-forked-uzmy8?file=/src/App.js

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, transform }) {
  return (
    <TransformControls position={position} ref={transform} mode="translate" showZ={false}>
      <Box />
    </TransformControls>
  )
}

function Main() {
  const orbit = useRef()
  const transform = useRef()

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

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

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

Answer 1

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

function Box({ active, setActive }) {
  return (
    <mesh
      onClick={() => {
        setActive(!active)
      }}>
      <boxGeometry />
      <meshNormalMaterial />
    </mesh>
  )
}

function TransformBox({ position, orbit }) {
  const transform = useRef()
  const [active, setActive] = useState(false)

  useEffect(() => {
    if (transform.current) {
      const { current: controls } = transform
      const callback = (event) => {
        orbit.current.enabled = !event.value
      }
      transform.current.addEventListener('dragging-changed', callback)
      return () => controls.removeEventListener('dragging-changed', callback)
    }
  })

  return (
    <TransformControls
      showX={active ? true : false}
      showY={active ? true : false}
      position={position}
      ref={transform}
      mode="translate"
      showZ={false}>
      <Box active={active} setActive={setActive} />
    </TransformControls>
  )
}

function Main() {
  const orbit = useRef()

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

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