RTTR: NaN values in state.viewport

[AbsharHassan]

RTTR: NaN values in state.viewport

[CodyJasonBennett]

NaN suggests that values are being passed as zero somehow.

[AbsharHassan]

@CodyJasonBennett thank you for your response.

I did some digging into how fiber calculates the viewport and discovered that, essentially, the returned width is calculated like this:

const w = h * (width / height)
return { width: w, height: h, top, left, factor: width / w, distance, aspect }

This is coming from the definition of the getCurrentViewport function, as can be seen in the source files. The code for the function is as follows:

function getCurrentViewport(
  camera: Camera = get().camera,
  target: THREE.Vector3 | Parameters<THREE.Vector3['set']> = defaultTarget,
  size: Size = get().size
): Omit<Viewport, 'dpr' | 'initialDpr'> {
  const { width, height, top, left } = size
  const aspect = width / height
  if (target instanceof THREE.Vector3) tempTarget.copy(target)
  else tempTarget.set(...target)
  const distance = camera.getWorldPosition(position).distanceTo(tempTarget)
  if (isOrthographicCamera(camera)) {
    return {
      width: width / camera.zoom,
      height: height / camera.zoom,
      top,
      left,
      factor: 1,
      distance,
      aspect,
    }
  } else {
    const fov = (camera.fov * Math.PI) / 180 // convert vertical fov to radians
    const h = 2 * Math.tan(fov / 2) * distance // visible height
    const w = h * (width / height)
    return {
      width: w,
      height: h,
      top,
      left,
      factor: width / w,
      distance,
      aspect,
    }
  }
}

The width calculation is dependent on values being attained from the state's size object. The width and height properties from the size object are both equal to 0 (as you mentioned). Since

// height is equal to 0
const w = h * (width / height)

This results in a division by 0, leading to the width being given a NaN value.

Now, if we take a closer look at the official useThree() hook test I mentioned in the issue, we can see that the test for the size object expects it to be populated with 0 values for height and width, as can be seen here:

expect(result.size).toEqual({ height: 0, width: 0, top: 0, left: 0, updateStyle: false })

As such, I wonder if viewport having NaN values is indeed intended behavior or a limitation of the ReactThreeTestRenderer, since the calculation of the properties of the viewport directly depend upon the properties of the size state, which in turn is officially EXPECTED to have zeros?

A potential quick fix I have in mind (based on the getCurrentViewport() function logic) is to make the default camera of the ReactThreeTestRenderer orthographic. This will get rid of the NaN values, however the width and height properties will then have 0 as their values, which does not seem useful for testing. Please let me know what you think. Thank you.