Levioso (Float)

The cientos package provides a <Levioso /> wrapper that makes its content … float, just like Magic 🪄✨

Usage

<script setup lang="ts">
import { Levioso, useGLTF } from '@tresjs/cientos'
import { shallowRef, watchEffect } from 'vue'

const { state } = useGLTF('/feather.glb')

const featherRef = shallowRef()

watchEffect(() => {
  if (featherRef.value) {
    featherRef.value.rotation.y = -Math.PI / 4
    featherRef.value.updateMatrixWorld()
  }
})
</script>

<template>
  <Levioso
    :speed="4"
  >
    <primitive
      v-if="state?.scene"
      ref="featherRef"
      :object="state?.scene"
      :position-y="-Math.PI / 4"
    />
  </Levioso>
</template>

Props

Prop	Description	Default
speed	Floating speed, higher it rocks more 🤘.	1
rotationFactor	Factor for Euler rotation.	1
floatFactor	Factor for Up/down movement.	1
range	Range of y-axis values the object will float within.	[-0.1, 0.1]