1. Extras
  2. Float

Extras

Float

This component is a port of drei's <Float> component and makes its contents float or hover.

Import

Source

GitHub View Source Code

Examples

Basic Example

<script lang="ts">
  import { Mesh } from 'threlte'
  import { BoxBufferGeometry, MeshBasicMaterial } from 'three'
  import { Float } from 'threlte/extras'
</script>

<Float speed={2}>
  <Mesh geometry={new BoxBufferGeometry(1, 1, 1)} material={new MeshBasicMaterial()} />
</Float>

Properties

// optional
speed: number = 1
rotationIntensity: number = 1
floatIntensity: number = 1
floatingRange: [number?, number?] = [-0.1, 0.1]
position: Position | undefined = undefined
scale: Scale | undefined = undefined
rotation: Rotation | undefined = undefined
lookAt: LookAt | undefined = undefined
castShadow: boolean | undefined = undefined
receiveShadow: boolean | undefined = undefined
frustumCulled: boolean | undefined = undefined
renderOrder: number | undefined = undefined
visible: boolean | undefined = undefined
viewportAware: boolean = false

Bindings 

group: THREE.Group
inViewport: boolean

Events 

viewportenter: undefined
viewportleave: undefined
Previous <- HTML