CODEWITHSUNDEEP
javascriptreactjsreact-three-fiber
zartemie
zartemie

Reputation: 21

React-three-fiber 'useRender' is not exported from 'react-three-fiber'

I keep trying to use useRender that I imported from

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
  })

It keeps giving me an error however that 'useRender is not exported from 'react-three-fiber'. When I go to the docs (https://inspiring-wiles-b4ffe0.netlify.app/4-hooks) it says that it can be exported.

Anyone have any idea whats going on? I'm following along this tutorial https://www.youtube.com/watch?v=1rP3nNY2hTo

Upvotes: 1

Views: 4739

Answers (4)

Daniel
Daniel

Reputation: 411

install > @react-three/fiber and then change 'useRender' for 'useFrame'; it should work but be careful with this! you should get information from official documentation! ---> 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;

Upvotes: 0

Jayesh Shukla
Jayesh Shukla

Reputation: 35

Instead of useRender use useFrame, it will be fine.

Upvotes: 3

hpalu
hpalu

Reputation: 1435

useRender is very old, it's called useFrame and also works a little different. the only official docs atm are here: https://github.com/react-spring/react-three-fiber/blob/master/api.md

Upvotes: 2

Jon Jones
Jon Jones

Reputation: 1084

It looks ok, what version are you using and did it install correctly. Maybe delete node_modules folder and execute npm install and try again

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

Upvotes: 0

Related Questions