Search code examples
three.jsreact-three-fiber

How to know all attributes of "Canvas" in react-three-fiber?


I read the official document of Canvas in react-three-fiber.

official document of Canvas in react-three-fiber

There's only few attributes of Canvas. I saw someone's project. There are more attributes he uses in his code like:

<Canvas
      concurrent
      noEvents={false}
      pixelRatio={window.devicePixelRatio}
      camera={{ position: [0, 0, 2.5], fov: 69 }}
      gl={{ antialias: true }}
      onCreated={({ gl, scene }) => {
        gl.toneMapping = THREE.ACESFilmicToneMapping
        gl.outputEncoding = THREE.sRGBEncoding
        //scene.background = new THREE.Color('#373740')
      }}>...</Canvas>

so, how can I know the full introduction about Canvas in react-three-fiber?


Solution

  • When you don't have access to documentation or source files, just try outputting the JavaScript object to the console with console.log(). For example:

    var c = <Canvas>...</Canvas>
    console.log(c);
    

    Then open your developer console, and you'll see an object with all its available properties, public methods, and anything else you may have access to.