我在react three fiber中阅读了Canvas的官方文档。
Canvas在react三纤维中的官方文件
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>
那么,我如何才能知道反应三纤维中Canvas的完整介绍呢?
当您无法访问文档或源文件时,只需尝试使用console.log()
将JavaScript对象输出到控制台即可。例如:
var c = <Canvas>...</Canvas>
console.log(c);
然后打开你的开发人员控制台,你会看到一个对象,它有所有可用的属性、公共方法和其他你可以访问的东西
看看GitHub上的文档。这里有一个专门针对Canvas组件的链接。
https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#canvas
本页介绍了react-three-fiber的API。
获取画布的引用
const myCanvas = useRef();
console.log(myCanvas);
<Canvas ref={myCanvas} >
......
</Canvas>
获取参考,然后控制台输出