在 canvas 中反应三个纤维锁定对象位置

Question

我是 Threejs 和 react-three-fiber 的新手。如何在透视相机旋转和移动时将物体锁定在canvas（lock position, rotation）。我想制作一个避免透视相机移动并保持在固定位置的对象

Answer 1

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

作为 PerspectiveCamera is an 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 的相机。

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

您可以通过 useFrame 挂钩访问渲染循环。这在三个内部运行，因此在 React 中没有开销。值得注意的是，您也可以从挂钩的回调中访问 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} />;
};

在 canvas 中反应三个纤维锁定对象位置

react three fiber lock object position in canvas

three.js

reactjs

react-three-fiber