如何知道 react-three-fiber 中“Canvas”的所有属性？答案

【问题标题】：How to know all attributes of "Canvas" in react-three-fiber?如何知道 react-three-fiber 中“Canvas”的所有属性？
【发布时间】：2021-01-09 20:50:12
【问题描述】：

我在react-three-fiber中阅读了Canvas的官方文档。

official document of Canvas in react-three-fiber

Canvas 的属性很少。我看到了某人的项目。他在代码中使用了更多属性，例如：

<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>

那么，如何知道react-three-fiber中关于Canvas的完整介绍呢？

【问题讨论】：

你应该看看源代码，例如：github.com/react-spring/react-three-fiber/blob/v4.2.20/src/…
很抱歉该网站仍然存在，它不是官方的。完整的文档在 github 上：github.com/react-spring/react-three-fiber/blob/master/api.md 列出的所有道具。顺便说一句，您不再需要那些色彩空间的东西，只需传递 colorManagement 标志，它就会设置该色彩空间并自动校正颜色。至于“gl”上的所有props，那就是threejs，也就是threejs文档中的“WebGLRenderer”。

标签： three.js react-three-fiber

【解决方案1】：

当您无权访问文档或源文件时，只需尝试使用 console.log() 将 JavaScript 对象输出到控制台即可。例如：

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

然后打开您的开发者控制台，您将看到一个对象，其中包含其所有可用属性、公共方法以及您可能有权访问的任何其他内容。

【讨论】：

【解决方案2】：

查看 GitHub 上的文档。这是一个专门针对 Canvas 组件的链接。

https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#canvas

本页介绍 react-three-fiber 的 API。

【讨论】：