fix: View component supports non-full screen use cases

[kmannislands]

Why

Resolves #944

What

Since the upstream fix to @react-three/fiber has been released in v8.1.0, this takes advantage of the position information to get View working as expected in non-fullscreen use cases.

Additionally, a warning is logged (using console.warn) if an older version of react-three-fiber is detected. I couldn't find any existing logging infrastructure for this type of dev mode warning at a glance so I opted to keep it simple. Please advise if there is a better approach here.

Checklist

• Documentation updated
• Storybook entry added
• Ready to be merged

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
drei	✅ Ready (Inspect)	Visit Preview	Jul 28, 2022 at 9:10PM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d0f6751:

Sandbox	Source
stoic-waterfall-rbq5v3	Configuration
Ground reflections and video textures	Configuration
arc-x-pmndrs-colors	Configuration
View skissor (forked)	Issue #944

[kmannislands]

Handling seems correct with latest react-three-fiber: https://codesandbox.io/s/view-skissor-forked-cxyur1?file=/src/App.js

Confirmed that the warning message is logged with older versions but the bottom two views have gone missing: https://codesandbox.io/s/view-skissor-forked-249ngx

I'll investigate

[FarazzShaikh]

The bug in the old version box is that the isOffscreen calculation requires the bottom value to be before it is converted to the positiveYUpBottom form

drei/src/web/View.tsx

Lines 44 to 46 in c7fa011

	const { left, right, top, bottom, width, height } = rect.current
	const isOffscreen = bottom < 0 || top > canvasSize.height || right < 0 || left > canvasSize.width
	const positiveYUpBottom = canvasSize.height - bottom

Fixed box: https://codesandbox.io/s/view-skissor-forked-gvhfg1?file=/src/View.tsx:2788-2912

Any ideas why the "incorrect" isOffscreen calc works in this verison? Or perhaps it is infact wrong in the current version

[FarazzShaikh]

Looks great to me!

[kmannislands]

Implemented a speculative fix. I think I'll add a story (Abstractions/View ?) for this when I have a moment to make informal testing easier.

[itsthekeming]

Any update on this?

[github-actions]

🎉 This PR is included in version 9.42.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀