HTML rendering over other content #2581
Unanswered
Jack-R-Long
asked this question in
Q&A
Replies: 1 comment
-
|
Hey Jack-R-Long, I tried a few things but the best I could do was get the cat and the labels for the screen with "zIndexRange". The labels also become visible behind the computer, which does not look good. Here are all the options for the html. link --> https://github.com/pmndrs/drei#html <Html
as='div' // Wrapping element (default: 'div')
wrapperClass // The className of the wrapping element (default: undefined)
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> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Hey there, I made a little portfolio site jacklong.dev.
If you visit the site, you can see that the html on the laptop screen does not "nest" behind the other 3d objects when they rotate in front of it.
Any idea why this is? Is it a limitation of the rendering html in with webGL or is it maybe a mistake on my part?
I used this example Mixing HTML and webGL to bootstrap the project.
Source code for the site Github repo
Beta Was this translation helpful? Give feedback.
All reactions