Canvas Setup

The first step when developing a React Three Fibre UAR project is replace any existing Canvas you have in your scene with the ZapparCanvas.

import { ZapparCanvas } from "@zappar/zappar-react-three-fiber";

You can set up the canvas, as shown below.

// ...
return (
  <ZapparCanvas>{/** YOUR CONTENT HERE **/}</ZapparCanvas>
)

You may alternatively use the default react-three-fiber Canvas component, with colorManagement toggled off.

// ...
return <Canvas colorManagement={false}>{/** YOUR CONTENT HERE **/}</Canvas>;