Canvas

The Canvas object is your portal into Threejs. It renders Threejs elements, not DOM elements! Here is a small hello-world that you can try out:

Copy
import ReactDOM from "react-dom";
import React from "react";
import { Canvas } from "react-three-fiber";
ReactDOM.render(
  <Canvas>
    <pointLight position={[10, 10, 10]} />
    <mesh>
      <sphereBufferGeometry attach="geometry" />
      <meshStandardMaterial attach="material" color="hotpink" />
    </mesh>
  </Canvas>,
  document.getElementById("root")
);

The canvas stretches to 100% of the next relative/absolute parent-container. Make sure your canvas is given space to show contents!

Copy
<Canvas
  children                      // Either a function child (which receives state) or regular children
  gl                            // Props that go into the default webGL-renderer
  camera                        // Props that go into the default camera
  raycaster                     // Props that go into the default raycaster
  shadowMap                     // Props that go into gl.shadowMap, can also be set true for PCFsoft
  colorManagement = false       // Auto sRGBEncoding encoding for all colors and textures + ACESFilmic
  vr = false                    // Switches renderer to VR mode, then uses gl.setAnimationLoop
  gl2 = false                   // Enables webgl2
  concurrent = false            // Enables React concurrent mode
  resize = undefined            // Resize config, see react-use-measure's options
  orthographic = false          // Creates an orthographic camera if true
  noEvents = false              // Switch off raytracing and event support
  pixelRatio = undefined        // You could provide window.devicePixelRatio if you like
  invalidateFrameloop = false   // When true it only renders on changes, when false it's a game loop
  updateDefaultCamera = true    // Adjusts default camera on size changes
  onCreated                     // Callback when vdom is ready (you can block first render via promise)
  onPointerMissed />            // Response for pointer clicks that have missed a target

You can give it additional properties like style and className, which will be added to the container (a div) that holds the dom-canvas element.

Defaults that the canvas component sets up

Canvas will create a translucent WebGL-renderer with the following properties: antialias, alpha, setClearAlpha(0)

A default perspective camera: fov: 75, near: 0.1, far: 1000, z: 5, lookAt: [0,0,0]

A default orthographic camera if Canvas.orthographic is true: near: 0.1, far: 1000, z: 5, lookAt: [0,0,0]

A default shadowMap if Canvas.shadowMap is true: type: PCFSoftShadowMap

A default scene (into which all the JSX is rendered) and a raycaster.

A wrapping container with a resize observer: scroll: true, debounce: { scroll: 50, resize: 0 }

You do not have to use any of these objects, look under "Recipes" down below if you want to bring your own.