Table of Contents

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:

import ReactDOM from "react-dom";
import React from "react";
import { Canvas } from "react-three-fiber";
<pointLight position={[10, 10, 10]} />
<sphereBufferGeometry attach="geometry" />
<meshStandardMaterial attach="material" color="hotpink" />

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

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.

Edit this page on GitHub