Can't use pixelRatio for canvas in react three fiber

user_15644107 0
Viewed 1310

I've set up a 3D-model using react-three-fiber and want to make it responsive. The model gets really blurry on smaller screens so I want to use pixelRatio = {window.devicePixelRatio}. However, it can't find the prop pixelRatio and fails to compile. Does anyone know why this is?

The code:

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

I simply get the message "Property 'pixelRatio' does not exist on type 'IntrinsicAttributes & Props'."

react-three-fiber three.js typescript reactjs
2 Answers

I found the problem. They changed it from pixelRatio to dpr recently. Works the same way as before.

user_156441070

to set pixel ratio, you can get "gl" from the useThree hook and go

gl.setPixelRatio(value)

if you want to do it on Canvas you have to define it in the gl prop for Canvas

user_32345270
Related