Skip to content

Latest commit

 

History

History
167 lines (134 loc) · 4.15 KB

html.mdx

File metadata and controls

167 lines (134 loc) · 4.15 KB
Raw
order category sourcePath name type componentSignature
2.2
@threlte/extras
packages/extras/src/lib/components/HTML/HTML.svelte
<HTML>
component
extends props
name type default required
transform
boolean
false
false
name type required
calculatePosition
( obj: Object3D, camera: Camera, size: { width: number; height: number } ) => [number, number]
false
name type default required
eps
number
0.001
false
name type default required
occlude
boolean | Object3D[]
false
false
name type default required
zIndexRange
[number, number]
[16777271, 0]
false
name type default required
sprite
boolean
false
false
name type default required
pointerEvents
'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | 'inherit'
'auto'
false
name type default required
center
boolean
false
false
name type default required
fullscreen
boolean
false
false
name type default required
distanceFactor
number
undefined
false
name type default required
as
keyof HTMLElementTagNameMap
'div'
false
name type default required
portal
HTMLElement
undefined
false

This component is a port of drei's <Html> component. It allows you to tie HTML content to any object of your scene. It will be projected to the objects whereabouts automatically.

The container of your `` component needs to be set to `position: relative | absolute | sticky | fixed`. This is because the DOM element will be mounted as a sibling to the `` element.

Examples

Basic Example

<script lang="ts">
  import { HTML } from '@threlte/extras'
</script>

<HTML>
  <h1>Hello World</h1>
</HTML>

Transform

transform applies matrix3d transformations.

<script lang="ts">
  import { HTML } from '@threlte/extras'
</script>

<HTML transform>
  <h1>Hello World</h1>
</HTML>

Occlude

<Html> can be occluded behind geometry using the occlude occlude property.

<script lang="ts">
  import { HTML } from '@threlte/extras'
</script>

<HTML
  transform
  occlude
>
  <h1>Hello World</h1>
</HTML>

Visibility Change Event

Use the property occlude and bind to the event visibilitychange to implement a custom hide/show behaviour.

<script lang="ts">
  import { HTML } from '@threlte/extras'

  const onVisibilityChange = (isVisible: boolean) => {
    console.log(isVisible)
  }
</script>

<HTML
  transform
  occlude
  on:visibilitychange={onVisibilityChange}
>
  <h1>Hello World</h1>
</HTML>
When binding to the event `visibilitychange` the contents of `` is _not_ automatically hidden when it's occluded.

Sprite Rendering

Use the property sprite in transform mode to render the contents of <HTML> as a sprite.

<script lang="ts">
  import { HTML } from '@threlte/extras'
</script>

<HTML
  transform
  sprite
>
  <h1>Hello World</h1>
</HTML>

Center

Add a -50%/-50% css transform with center when not in transform mode.

<script lang="ts">
  import { HTML } from '@threlte/extras'
</script>

<HTML center>
  <h1>Hello World</h1>
</HTML>

Portal

Use the property portal to mount the contents of the <HTML> component on another HTMLElement. By default the contents are mounted as a sibling to the rendering <canvas>.

<script lang="ts">
  import { HTML } from '@threlte/extras'
</script>

<HTML portal={document.body}>
  <h1>Hello World</h1>
</HTML>