Блог

Главная - Вопросы по программированию - Крючки React-three-fiber можно использовать только в компоненте Canvas

Крючки React-three-fiber можно использовать только в компоненте Canvas

#reactjs #typescript #react-three-fiber

#reactjs #typescript #react-three-fiber

Вопрос:

У меня есть эти два компонента:

Camera.tsx

 import { useGLTF } from "@react-three/drei"


export default function Camera() {
  const gltf = useGLTF('/scene.gltf', true)
  return (
    <primitive object={gltf.scene} dispose={null}/>
  )
}

И использовать его в Landing.tsx

 import { Suspense, useRef } from 'react';
import { Canvas, useFrame } from 'react-three-fiber';
import { Html } from '@react-three/drei';
import Camera from '../components/Camera';
import Lights from '../components/Lights';

export default function Landing() {
    const mesh = useRef();
     useFrame(() => {
    (mesh.current as any).rotation.x   = 0.01
  })
    return (
        <div className='Landing'>
            <Canvas colorManagement camera={{ position: [0, 0, 250], fov: 70 }}>
                <Suspense fallback={null}>
                <Lights />
                    <mesh ref={mesh} position={[-6, 75, 0]}>
                        <Camera />
                    </mesh>
                    <Html fullscreen>
                        <div className='Landing-container'>
                            <h1 className='Landing-header'>WELCOME</h1>
                        </div>
                    </Html>
                </Suspense>
            </Canvas>
        </div>
    );
}

Все работает просто отлично, изображение загружается… пока я не использую useFrame хук — тогда я получаю сообщение об ошибке — Реагирующие трехволоконные крючки могут использоваться только в компоненте Canvas!Я немного смущен, поскольку ссылка является дочерним элементом Canvas компонента

Комментарии:

1. вы используете useFrame вне canvas, но это зависит от контекста canvases . сделайте вращающуюся сетку автономным компонентом, и ошибка исчезнет.

Ответ №1:

useFrame нужен Canvas контекст для того, чтобы работать. Вам нужно вызвать useFrame hook внутри некоторого компонента, размещенного как потомок Canvas . Что — то вроде этого:

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

  useFrame(() => {
    if(refMesh.current) {
      // rotates the object
      refMesh.current.rotate.x  = 0.01;
    }
  });
  return (<mesh ref={refMesh} />);
}

export default () => (
  <Canvas>
    <MyMesh />
  </Canvas>

)