reactjs - react 三纤维锁定 Canvas 中的对象位置

Question

我是 Threejs 和 React-Three-Fiber 的新手。当透视相机旋转和移动时，如何锁定 Canvas 中的对象(锁定位置、旋转)。我想制作一个避免透视相机移动并保持在固定位置的对象

Answer 1

您可以use refs to access underlying objects ，从而修改它们的位置、旋转等。

如PerspectiveCamera是 Object3D ，您可以将此网格物体添加为子物体，以便它们一起移动。

import { useRef } from 'react';
import { useThree } from '@react-three/fiber';

const MyMesh = () => {
  const { camera } = useThree();
  const ref = useRef();

  useEffect(() => {
    // Add mesh to camera
    const meshRef = ref.current;
    camera.add(meshRef);

    // Cleanup on unmount
    return () => {
      camera.remove(meshRef);
    };
  }, [camera, ref.current]);

  return <mesh ref={ref} position={[0, 0, -5]} />;
};

在这里，我通过 useThree 通过其上下文访问 Fiber 的相机。钩子(Hook)。

或者，您可以每帧复制相机的属性并应用偏移。这将导致相同的显示行为。

您可以通过 useFrame 访问渲染循环钩。它在三个内运行，因此 React 中没有任何开销。值得注意的是，您也可以从钩子(Hook)的回调中访问 Fiber 的上下文。

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';

const MyMesh = () => {
  const ref = useRef();

  useFrame(({ camera }) => {
    // Move mesh to be flush with camera
    ref.current.position.copy(camera.position);
    ref.current.quaternion.copy(camera.quaternion);

    // Apply offset
    ref.current.translateZ(-5);
  });

  return <mesh ref={ref} />;
};