I found an older version of MeshTransmissionMaterial that works and set up an example:
https://stackblitz.com/edit/nuxt-starter-19cxrs

It reproduces an example of React Three Fiber.
I also reproduced the noise-function and put it into a composible. It maybe could be something for Cientos, @alvarosabu ?

// useNoise.ts
import { useLoop } from '@tresjs/core';
import { shallowRef } from '@vue/reactivity';
import { ref } from 'vue';

export default function useNoise({ intensity = 0.03, speed = 0.2 } = {}) {
  const mesh = shallowRef();

  const originalPositions = ref();
  const time = ref(0);

  const { onBeforeRender } = useLoop();

  onBeforeRender(({ delta }) => {
    time.value += delta * speed;

    if (mesh.value && mesh.value.geometry) {
      const positions = mesh.value.geometry.attributes.position.array;

      // Store original positions if not already stored
      if (!originalPositions.value) {
        originalPositions.value = new Float32Array(positions.length);
        for (let i = 0; i < positions.length; i++) {
          originalPositions.value[i] = positions[i];
        }
      }
      // Update each vertex position with noise
      for (let i = 0; i < positions.length; i += 3) {
        const x = originalPositions.value[i];
        const y = originalPositions.value[i + 1];
        const z = originalPositions.value[i + 2];

        // Create noise based on position and time
        const noise =
          (Math.sin(x * 5 + time.value) +
            Math.sin(y * 5 + time.value) +
            Math.sin(z * 5 + time.value)) *
          intensity;

        // Apply noise in the direction of the vertex normal
        const length = Math.sqrt(x * x + y * y + z * z);
        positions[i] = x + (x / length) * noise;
        positions[i + 1] = y + (y / length) * noise;
        positions[i + 2] = z + (z / length) * noise;
      }

      mesh.value.geometry.attributes.position.needsUpdate = true;
      mesh.value.rotation.y += delta * 0.2;
      mesh.value.rotation.z += delta * 0.1;
    }
  });

  return { mesh };
}

By the way:

1. I could not make the FontLoader work in pure Vue/Vite. I could not find the right path to the font, so I had to switch to Nuxt. If somebody knows where to put the font and how the path has to be named, it would be great for the docs.
2. There is a bug with useLoop: If I call it on the outside of the TresCanvas it breaks. So I can just call it in child-components. Is there a way to fix this?

Hey @AndreasFaust, this is quite useful.

It reproduces an example of React Three Fiber. I also reproduced the noise-function and put it into a composible. It maybe could be something for Cientos, @alvarosabu ?

For MeshRefractionMaterial, definitely. Alvaro and I were just discussing that on the Discord. (Fwiw, we were discussing whether or not to add the bvh dependency that the Drei component uses. We decided to add it.)

For useNoise, is there a use case beyond MeshRefractionMaterial?

There is a bug with useLoop: If I call it on the outside of the TresCanvas it breaks. So I can just call it in child-components. Is there a way to fix this?

It can't be worked around with useLoop unfortunately. Behind the scenes, useLoop uses Vue's provide/inject. The provide is done by the TresCanvas. So the inject is only available in subcomponents.

1. I could not make the FontLoader work in pure Vue/Vite. I could not find the right path to the font, so I had to switch to Nuxt. If somebody knows where to put the font and how the path has to be named, it would be great for the docs.

Thanks for the feedback. I have useFont on my TODO list for Cientos. I'll test out local fonts there.