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

看起来不错，您使用的是哪个版本，并且安装正确。也许删除node_modules文件夹并执行npm install然后重试

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

Answer 2

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

Answer 3

不用useRender使用useFrame，就可以了。

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;

反应三纤维'useRender'不会从'反应三纤维'中导出

4 个答案: