react-three-fiber react-three-fiber

Rotating cube

Rotating a cube using the useFrame hook. Fork on Codesandbox

Live example


Coming Soon

Code

import React, { useRef } from "react";
import { render } from "react-dom";
import { Canvas, useFrame } from "react-three-fiber";
import "./styles.css";

const Box = () => {
  const boxRef = useRef();

  useFrame(() => {
    boxRef.current.rotation.y += 0.01;
  });

  return (
    <mesh ref={boxRef} rotation-x={Math.PI * 0.25} rotation-y={Math.PI * 0.25}>
      <boxBufferGeometry args={[2, 2, 2]} />
      <meshStandardMaterial color={"red"} />
    </mesh>
  );
};

const App = () => {
  return (
    <Canvas style=>
      <pointLight position={[5, 5, 5]} />
      <Box />
    </Canvas>
  );
};

render(<App />, document.getElementById("root"));

Running this example

Clone this repo, and then NPM install and NPM start from the relevant directory.

$ cd examples/hooks/rotating-cube
$ npm install && npm run start