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

【问题标题】：React-three-fiber 'useRender' is not exported from 'react-three-fiber'React-three-fiber 'useRender' 不是从'react-three-fiber' 导出的
【发布时间】：2020-10-31 10:24:36
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-three-fiber

【解决方案1】：

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

【讨论】：

【解决方案2】：

用useFrame代替useRender就可以了。

【讨论】：

【解决方案3】：

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

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

【讨论】：

我正在使用“react-three-fiber”：“^4.2.13”。我尝试删除并重新安装。虽然仍然得到同样的错误。在本教程中，它们直接从 index.js 工作，我在 App.js 中导出包裹在

【解决方案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;

【讨论】：