Crop objects on Resize, rather than Scale about react-three-fiber

[ryanking1809]

@jak2030 Oh sorry, that's a mobx function to re-render components on state change. I think don't it is required here, I'll remove it.

[drcmda]

Resize has to do with webGL, there's a resize command that needs to called on canvas context. If you don't do this your canvas is static, it won't ever adhere to percentages or changes. If you want objects to be cropped, then your view should be responsive, useThree for instance gives you size and a viewport function.

I will making auto-measuring optional otherwise. Then it would be totally up to you. There's already a bulletpoint for it in the roadmap. If you like, a PR would speed this up, currently i still have other priorities, mainly interaction.

[ryanking1809]

Great, I'll look into it!
I like the auto measure - I just need to keep my dimensions consistent on resize.
Thanks!

[ryanking1809]

I'll add this here in case anyone finds this in the future.

This will scale the camera fov so the dimensions of the plane at planeDistance are kept at a particular pixel ratio when the viewport changes dimensions. So here the plane at z=0 is scaled so 1 three.js unit = 1 pixel no matter what the viewport size is (it's hard to explain without a diagram)

const Camera = () => {
  const camera = useRef()
  const { aspect, size, setDefaultCamera } = useThree()
  const pixelToThreeUnitRatio = 1
  const planeDistance = 0
  const cameraDistance = 500
  const distance = cameraDistance - planeDistance
  const height = size.height / pixelToThreeUnitRatio
  const halfFovRadians = Math.atan((height / 2) / distance)
  const fov = 2 * halfFovRadians * (180/Math.PI)
  useEffect(() => void setDefaultCamera(camera.current), [])
  return <perspectiveCamera
    ref={camera}
    aspect={aspect}
    fov={fov}
    position={[0, 0, cameraDistance]}
    onUpdate={self => self.updateProjectionMatrix()}
  />
}

[jak2030]

@ryanking1809 I was looking into a similar problem and this looks like a nice solution - would you mind explaining or pointing me to what the observer() method here refers to?