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

user_9605740 0
Viewed 4259

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?

react-three-fiber three.js
3 Answers

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.

user_26085150
user_9887170

get the refrence of the canvas

const myCanvas = useRef();
console.log(myCanvas);

<Canvas ref={myCanvas} >
   ......
</Canvas>

get the reference then console out

user_119284410
Related