Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: html occlude, onOcclude, as #422

Merged
merged 3 commits into from
May 29, 2021
Merged

feat: html occlude, onOcclude, as #422

merged 3 commits into from
May 29, 2021

Conversation

drcmda
Copy link
Member

@drcmda drcmda commented May 29, 2021 •
edited
Loading

demo: https://codesandbox.io/s/mixing-html-and-webgl-forked-hpqd3?file=/src/App.js

The current occlusion-behavior is not document nor have we made it public, nor can the transition be controlled/animated. the checkDepth flag that's currently documented did nothing - i think it must have been a left-over. the "occluder" prop was used in the storybook but is not documented.

The changes made in this PR:

  • rename occluder to occlude
  • occlude can be true in which case the entire scene is taken into account
  • or it can be an array of refs, it's using intersectObjects instead of intersectObject now
  • onOcclude allows the user to control the transition (animations)

Html

Allows you to tie HTML content to any object of your scene. It will be projected to the objects whereabouts automatically.

<Html
  as='div' // Wrapping element (default: 'div')
  prepend // Project content behind the canvas (default: false)
  center // Adds a -50%/-50% css transform (default: false) [ignored in transform mode]
  fullscreen // Aligns to the upper-left corner, fills the screen (default:false) [ignored in transform mode]
  distanceFactor={10} // If set (default: undefined), children will be scaled by this factor, and also by distance to a PerspectiveCamera / zoom by a OrthographicCamera.
  zIndexRange={[100, 0]} // Z-order range (default=[16777271, 0])
  portal={domnodeRef} // Reference to target container (default=undefined)
  transform // If true, applies matrix3d transformations (default=false)
  sprite // Renders as sprite, but only in transform mode (default=false)
  calculatePosition={(el: Object3D, camera: Camera, size: { width: number; height: number }) => number[]} // Override default positioning function. (default=undefined) [ignored in transform mode]
  occlude={[ref]} // Can be true or a Ref<Object3D>[], true occludes the entire scene (default: undefined)
  onOcclude={(visible) => null} // Callback when the visibility changes (default: undefined)
  {...groupProps} // All THREE.Group props are valid
  {...divProps} // All HTMLDivElement props are valid
>
  <h1>hello</h1>
  <p>world</p>
</Html>

Html can hide behind geometry using the occlude prop.

// Raytrace the entire scene
<Html occlude />
// Raytrace only specific elements
<Html occlude={[ref1, ref2]} />

When the Html object hides it sets the opacity prop on the innermost div. If you want to animate or control the transition yourself then you can use onOcclude.

const [hidden, set] = useState()

<Html
  occlude
  onOcclude={set}
  style={{
    transition: 'all 0.5s',
    opacity: hidden ? 0 : 1,
    transform: `scale(${hidden ? 0.5 : 1})`
  }} />

@vercel
Copy link

vercel bot commented May 29, 2021 •
edited
Loading

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/pmndrs/drei/CQyCnKJyFTC8JViRpJYmXanJjeif
✅ Preview: https://drei-git-html-occlude-pmndrs.vercel.app

@drcmda drcmda changed the title feat: html occlue, onOcclude, as feat: html occlude, onOcclude, as May 29, 2021
@codesandbox-ci
Copy link

codesandbox-ci bot commented May 29, 2021 •
edited
Loading

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 844bfc7:

Sandbox Source
billowing-grass-dmyu1 Configuration
Ground reflections and video textures Configuration
arc-x-pmndrs-colors Configuration
Mixing HTML and Webgl (forked) PR

@drcmda drcmda requested a review from joshuaellis May 29, 2021 12:07
@drcmda drcmda merged commit 2a55474 into master May 29, 2021
@github-actions
Copy link

🎉 This PR is included in version 5.3.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@joshuaellis joshuaellis deleted the html-occlude branch June 1, 2022 08:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@joshuaellis joshuaellis Awaiting requested review from joshuaellis

Assignees
No one assigned
Labels
released
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@drcmda