r3f-viam

A collection of react-three-fiber components for the Viam robotics framework.

View the available components as a Storybook

Run the sample app

From the base directory run

npm install
npm run dev

Known problems

For an as yet undiagnosed reason, OrbitControls from drei doesn't work. Instead, use a React component like this, which is made to be the child of a Canvas element:

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { extend, useThree } from "@react-three/fiber";
extend({ OrbitControls });

export function Experience() {
  const { camera, gl } = useThree();

  return (
    <>
      <orbitControls args={[camera, gl.domElement]} />
      <color args={["ivory"]} attach="background" />
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="hotpink" />
      </mesh>
    </>
  );
}