Pmndrs.docs

Canvas

The Canvas object is your portal into three.js.

The Canvas object is where you start to define your React Three Fiber Scene.

import React from 'react'
import { Canvas } from '@react-three/fiber'

const App = () => (
  <Canvas>
    <pointLight position={[10, 10, 10]} />
    <mesh>
      <sphereBufferGeometry />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  </Canvas>
)

The props available for the canvas are:

PropDescriptionDefault
childrenthree.js JSX elements or regular components
glProps that go into the default renderer, or your own renderer. Also accepts a synchronous callback like gl={canvas => new Renderer({ canvas })}{}
cameraProps that go into the default camera, or your own THREE.Camera{ fov: 75, near: 0.1, far: 1000, position: [0, 0, 5] }
shadowsProps that go into gl.shadowMap, can also be set true for PCFsoftfalse
raycasterProps that go into the default raycaster{}
vrSwitches renderer to VR mode, then uses gl.setAnimationLoopfalse
modeReact mode: legacy, blocking, concurrentblocking
frameloopRender mode: always, demand, neveralways
resizeResize config, see react-use-measure's options{ scroll: true, debounce: { scroll: 50, resize: 0 } }
orthographicCreates an orthographic camerafalse
dprPixel-ratio, use window.devicePixelRatio, or automatic: [min, max]undefined
linearSwitch off automatic sRGB encoding and gamma correctionfalse
flatUse THREE.NoToneMapping instead of THREE.ACESFilmicToneMappingfalse
onCreatedCallback after the canvas has rendered (but not yet committed)(state) => {}
onPointerMissedResponse for pointer clicks that have missed any target(event) => {}

The canvas props should be used as a constructor. To update the canvas props, set the state like this:

const set = useThree((state) => state.set)
set({ frameloop: 'demand' })

Defaults that the canvas component sets up

Canvas will create a translucent THREE.WebGLRenderer with the following properties:

  • antialias=true
  • alpha=true
  • powerPreference="high-performance"
  • setClearAlpha(0)
  • A THREE.Perspective camera
  • A THREE.Orthographic cam if orthographic is true
  • A THREE.PCFSoftShadowMap if shadows is true
  • A THREE.Scene (into which all the JSX is rendered) and a THREE.Raycaster
  • A resize observer

The colorspace will be set to sRGB (unless "linear" is true), all colors and textures will be auto-converted. Consult donmccurdy.com: Color Management in three.js for more information about this. Unless "flat" is true it will set up THREE.ACESFilmicToneMapping for slightly more contrast.

Consider Resize-Observer polyfills for older Safari browsers. We recommend juggle/resize-observer.