如何用attach属性传子对象到父组件args，让BoxHelper跟随Mesh变换

BoxHelper的args属性需要接收object3D和color参数。我知道可以通过attach属性将对象绑定到父对象，但不清楚如何将对象绑定到父组件的args属性。

当前代码：

<boxHelper>
  <mesh attach={"arg"}>
    <boxGeometry args={[0.1, 0.1, 0.1]} />
    <meshBasicMaterial
      color={"red"}
      transparent
      opacity={0.2}
    />
  </mesh>
</boxHelper>

Sean Guy提供的更新代码：

<object3D
  quaternion={[0.35, 0.25, 0.13, 0.88]}
  position={[0.343, 0.5238, 0.6338]}
  scale={[3.2707, 1, 1]}
>
  <mesh>
    <boxGeometry />
    <meshBasicMaterial />

    <Helper
      type={THREE.BoxHelper}
      args={["royalblue"]}
    />
  </mesh>
</object3D>

请问如何让BoxHelper能够跟随Mesh对象的平移、旋转、缩放变换？

要让BoxHelper完全跟着Mesh的平移、旋转、缩放一起变化，关键是让BoxHelper明确跟踪目标Mesh，并且Mesh变化时同步更新自身，这里提供两种可行的实现方式：

方式1：使用react-three-fiber原生<boxHelper>组件 #

你之前用attach="arg"的方式不对，正确做法是直接把Mesh实例传给BoxHelper的args，同时监听Mesh的变化来更新Helper：

import { useRef, useEffect } from 'react'

function BoxWithHelper() {
  const meshRef = useRef()
  const helperRef = useRef()

  // 监听Mesh的变换，实时更新BoxHelper
  useEffect(() => {
    const mesh = meshRef.current
    const helper = helperRef.current
    if (!mesh || !helper) return

    const updateHelper = () => helper.update()
    // Mesh的位置/旋转/缩放变化时会触发change事件
    mesh.addEventListener('change', updateHelper)
    return () => mesh.removeEventListener('change', updateHelper)
  }, [])

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[0.1, 0.1, 0.1]} />
      <meshBasicMaterial color="red" transparent opacity={0.2} />
      {/* 把Mesh和颜色传入BoxHelper的args，绑定ref用于更新 */}
      <boxHelper ref={helperRef} args={[meshRef.current, "royalblue"]} />
    </mesh>
  )
}

方式2：基于Sean Guy的自定义<Helper>组件修改 #

如果用自定义Helper组件，同样需要把Mesh传入args，并添加更新逻辑：

import { useRef, useEffect } from 'react'
import { BoxHelper } from 'three'

function BoxWithCustomHelper() {
  const meshRef = useRef()
  const helperRef = useRef()

  useEffect(() => {
    const mesh = meshRef.current
    const helper = helperRef.current
    if (!mesh || !helper) return

    const updateHelper = () => helper.update()
    mesh.addEventListener('change', updateHelper)
    return () => mesh.removeEventListener('change', updateHelper)
  }, [])

  return (
    <object3D
      quaternion={[0.35, 0.25, 0.13, 0.88]}
      position={[0.343, 0.5238, 0.6338]}
      scale={[3.2707, 1, 1]}
    >
      <mesh ref={meshRef}>
        <boxGeometry />
        <meshBasicMaterial />
        {/* 将Mesh实例传入Helper的args */}
        <Helper
          ref={helperRef}
          type={BoxHelper}
          args={[meshRef.current, "royalblue"]}
        />
      </mesh>
    </object3D>
  )
}

核心注意点 #

• 必须绑定目标Mesh：BoxHelper的args第一个参数必须是要跟踪的Mesh实例，否则它不知道该跟谁同步。
• 强制更新Helper：Mesh变换后，BoxHelper不会自动刷新，必须调用helper.update()来更新它的包围盒，通过监听Mesh的change事件可以自动触发这个操作。
• 放弃错误的attach用法：attach="arg"不是绑定args参数的正确方式，react-three-fiber组件的args需要直接传入对应的值。

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