javascript - React-three-fiber 'useRender' 不是从'react-three-fiber' 导出的

Question

我一直在尝试使用我从中导入的 useRender

import { Canvas, useRender } from 'react-three-fiber';

const App = () => {
  const meshRef = useRef();
  const [hovered, setHovered] = useState(false);
  const [active, setActive] = useState(false);
  const props = useSpring({
    scale: active ? [4, 4, 4] : [2, 2, 2],
    color: hovered ? "red" : "hotpink"
  });

  useRender(() => {
    meshRef.current.rotation.y += 0.01
  })

它一直给我一个错误，但是'useRender不是从'react-three-fiber'导出的。当我访问文档（https://inspiring-wiles-b4ffe0.netlify.app/4-hooks）时，它说它可以导出。

有人知道发生了什么吗？我正在关注本教程https://www.youtube.com/watch?v=1rP3nNY2hTo

Answer 1

useRender 非常古老，它被称为 useFrame 并且工作方式也有些不同。唯一的官方文档 atm 在这里：https ://github.com/react-spring/react-three-fiber/blob/master/api.md

Answer 2

而不是useRenderuse useFrame，它会很好。

Answer 3

看起来没问题，您使用的是什么版本并且安装正确。也许删除 node_modules 文件夹并执行 npm install 并重试

import { useRender } from 'react-three-fiber'
import { Canvas } from 'react-three-fiber'

Answer 4

'react-three-fiber' 已弃用！你应该尝试@react-three/fiber，然后将'useRender'更改为'useFrame'，它应该可以工作，但要小心这个！您应该从官方文档中获取信息！---> https://github.com/pmndrs/react-three-fiber

import React, { useState, useRef } from "react";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { Canvas, extend, useThree, useFrame } from "@react-three/fiber";


extend({ OrbitControls });

const Controls = () => {
  const orbitRef = useRef();

  const { camera, gl } = useThree();

  useFrame(() => {
    orbitRef.current.update();
  });

  return <orbitControls args={[camera, gl.domElement]} ref={orbitRef} />;
};

const Box = () => {
  const [hoverd, setHoverd] = useState(false);
  return (
    <mesh
      onPointerOver={() => setHoverd(true)}
      onPointerOut={() => setHoverd(false)}
    >
      <boxBufferGeometry attach="geometry" args={[2, 2, 2]} />
      <meshBasicMaterial
        attach="material"
        color={hoverd ? "hotpink" : "gray"}
      />
    </mesh>
  );
};

const Box = () => {
  return (
    <Canvas>
      <Controls />
      <Box />
    </Canvas>
  );
};

export default Box;