使用 React Three Fiber 获取渲染器信息

Question

我正在寻找一种使用 r3f 调用 renderer.info 的方法。 ThreeJS Doc - WebGLRenderer

由于这是一个较旧的项目，我仍在此处使用 class 组件来调用渲染方法。

 return (
  <React.Fragment>
    <Canvas >
    </ Canvas>

我需要检查渲染调用以优化性能。希望你能帮助我。

Answer 1

根据official r3f doc about hooks，useThree().gl等同于WebGLRenderer。

import { useThree } from "@react-three/fiber";
import { useEffect } from "react";

const GetInfo = () => {
  const { gl } = useThree();
  useEffect(() => {
    // gl === WebGLRenderer
    // gl.info.calls
    console.log(gl.info);
  });
  return null;
};

export default GetInfo;

这里是工作代码：

https://codesandbox.io/s/determined-violet-8hqjz?file=/src/GetInfo.tsx

使用 React Three Fiber 获取渲染器信息

Get Renderer Info using React Three Fiber

three.js

reactjs

react-three-fiber