Skip to content

MeshWobbleMaterial

The cientos package provides a <MeshWobbleMaterial /> component that makes a geometry wobble and wave around. This material extends MeshStandardMaterial so all the default props can be passed as well in addition for two more:

  • speed how fast the wobble effect would be
  • factor: how strong the wobble effect will deform the geometry

Usage

vue
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { MeshWobbleMaterial, OrbitControls } from '@tresjs/cientos'
</script>

<template>
  <TresCanvas clear-color="#82DBC5">
    <TresPerspectiveCamera :position="[3, 3, 3]" />
    <TresMesh>
      <TresTorusGeometry />
      <MeshWobbleMaterial
        color="orange"
        :speed="1"
        :factor="2"
      />
    </TresMesh>
    <TresAmbientLight :intensity="1" />
    <TresDirectionalLight :position="[2, 2, 2]" />
    <OrbitControls />
  </TresCanvas>
</template>