不能在反应三纤维中使用pixelRatio画布答案

【问题标题】：Can't use pixelRatio for canvas in react three fiber不能在反应三纤维中使用pixelRatio画布
【发布时间】：2021-07-10 05:00:22
【问题描述】：

我已经使用 react-three-fiber 设置了一个 3D 模型，并希望使其具有响应性。该模型在较小的屏幕上变得非常模糊，所以我想使用 pixelRatio = {window.devicePixelRatio}。但是，它找不到道具 pixelRatio 并且无法编译。有谁知道这是为什么？

代码：

<Canvas gl={{ antialias: true }} pixelRatio={window.devicePixelRatio}>
    <PerspectiveCamera>
      <axesHelper />
      <gridHelper />
      <OrbitControls
        target={[0, 0, 0]}
        enablePan={false}
        autoRotate
        maxDistance={1}
        minDistance={0.6}
      />
      <ambientLight intensity={0.5} />
      <Spotlight />
      <pointLight position={[0, 1, 2]} />
      <Suspense fallback={null}>
        <Model />
      </Suspense>
    </PerspectiveCamera>
  </Canvas>

我只是收到消息“属性 'pixelRatio' 在类型 'IntrinsicAttributes & Props' 上不存在。”

【问题讨论】：

标签： reactjs typescript three.js react-three-fiber

【解决方案1】：

要设置像素比例，你可以从 useThree 钩子中获取“gl”然后去

gl.setPixelRatio(value)

如果你想在 Canvas 上做，你必须在 Canvas 的 gl 属性中定义它

【讨论】：

【解决方案2】：

我发现了问题。他们最近将其从 pixelRatio 更改为 dpr。工作方式与以前相同。

【讨论】：

dpr是动态像素比，和像素比不是一回事
请务必将此标记为已接受的答案。这是我遇到的唯一当前解决方案（除了官方发布日志）。 @Epiczzor 在 r3f 的上下文中，axwellfred 是对的。您可以在此处查看 v6.0.0 的 r3f 更改日志：github.com/pmndrs/react-three-fiber/releases
是的，他是对的，但是动态像素比率和像素比率不是一回事，动态像素比率根据设备硬件能力设置像素比率，而 setPixelRatio 强制设置它。所以说dpr和像素比是一回事是错误的