1. @threlte/extras
  2. Float

@threlte/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

Package

NPM View Package

Examples

Basic Example

<script lang="ts">
  import { Mesh } from '@threlte/core'
  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
dispose: boolean | undefined = undefined
userData: Record<string, any> | undefined = undefined
viewportAware: boolean = false

Bindings

group: THREE.Group
inViewport: boolean

Events

viewportenter: undefined
viewportleave: undefined