This demo is real, you can click it! It contains full code, too. 📦

GameBoy model by (@kleingeo) on Sketchfab . GameBoy Cartridge by (@MeBob) on Sketchfab .

react-three-gpu-pathtracer lets you render your react-three-fiber scenes using Path Tracing! It is as simple as

import { Pathtracer } from "@react-three/gpu-pathtracer";
function GradientSphere() {
  return (
    <Canvas>
      <Pathtracer>{/* Your scene */}</Pathtracer>
    </Canvas>
  );
}

The <Pathtracer /> component wraps your scene. The scene is then rendered using Path Tracing.

Env maps can be added using Drei's <Environment /> component just like in a regular scene.

<Pathtracer>
  <Environment
    preset="..."
    background // Optional, set as scene background
    backgroundBlurriness={0.5}
    backgroundIntensity={1}
  />
</Pathtracer>

This hook provides access to useful functions in the internal renderer. Can only be used within the <Pathtracer /> component.

const { renderer, update, reset } = usePathtracer();

When you set controls be sure to use makeDefault and it's best to import the OrbitControls from drei

<OrbitControls makeDefault>
        // ...

cd project-root
yarn
yarn dev

yarn build

cd package
npm run release