如何让React Three Fiber中一个组件的对象看向另一组件的对象？

针对你遇到的问题，让Text和PlaneGeometry始终朝向自定义相机，有两种简洁的实现方式：

方法1：使用@react-three/drei的LookAt组件（推荐） #

drei提供了封装好的LookAt组件，能自动让子元素朝向目标（这里是相机），无需手动处理帧更新：

1. 导入LookAt组件和useThree钩子
2. 用useThree()获取当前相机实例
3. 将需要朝向相机的元素包裹在LookAt中，指定target为相机

import { LookAt } from '@react-three/drei';
import { useThree } from '@react-three/fiber';
import { Text } from '@react-three/drei';

function TextWrapper() {
  const { camera } = useThree();

  return (
    <LookAt target={camera} position={[0, 0, -2]}>
      <Text color="black" fontSize={0.5}>
        Hello World
      </Text>
      <mesh position={[0, -0.5, 0]}>
        <planeGeometry args={[2, 0.5]} />
        <meshBasicMaterial color="white" />
      </mesh>
    </LookAt>
  );
}

LookAt会在每一帧自动更新子元素的旋转，确保始终朝向相机，不管相机如何移动或旋转。

方法2：手动通过useFrame控制旋转 #

如果需要更灵活的控制，可以用useFrame钩子手动更新物体的朝向：

1. 用useRef获取需要控制的物体/组
2. 用useThree()获取相机
3. 在useFrame回调中调用lookAt()方法让物体朝向相机位置

import { useRef } from 'react';
import { useFrame, useThree } from '@react-three/fiber';
import { Text } from '@react-three/drei';

function TextWrapper() {
  const groupRef = useRef();
  const { camera } = useThree();

  useFrame(() => {
    if (groupRef.current) {
      groupRef.current.lookAt(camera.position);
    }
  });

  return (
    <group ref={groupRef} position={[0, 0, -2]}>
      <Text color="black" fontSize={0.5}>
        Hello World
      </Text>
      <mesh position={[0, -0.5, 0]}>
        <planeGeometry args={[2, 0.5]} />
        <meshBasicMaterial color="white" />
      </mesh>
    </group>
  );
}

注意事项 #

• 确保你的自定义相机是作为Canvas的子组件渲染的，这样useThree()才能正确获取到相机实例
• 如果使用LookAt，可以直接将目标设为camera，无需额外处理相机位置变化

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