Jitter on simple animations

Questions
, ,
1

Hello, around every second slight jitter happens. I am not sure if it’s normal and my OCD is just being crazy again or if there is some issue in my code. If you go to the preview you can see it clearly on the wireframe cube

Website Preview

Github Repo

Code snippet

useFrame(() => {
    let fixedRotation = parseFloat(
      (lines.current.rotation.y + 0.005).toFixed(3)
    );
    lines.current.rotation.x = lines.current.rotation.y = fixedRotation;
  });

  return (
    <>
      <mesh ref={lines}>
        <boxBufferGeometry args={[3.5, 3.5, 3.5]} />
        <meshBasicMaterial
          attach="material"
          size={0.1}
          wireframe
          side={THREE.DoubleSide}
        />
      </mesh>
    </>
  );

The fixed rotation is here, because I suspected that it’s because how javascript cannot count well with floats

2

it’s also not refresh rate independent so it might look weird.

useFrame((state, delta) => {
  foo.current.rotation.x += delta

if you want smooth animation instead of linear interpolation (which looks bad on its own) use damp: GitHub - pmndrs/maath: 🪶 Math helpers for the rest of us

ps

BoxBufferGeometry was deprecated in threejs, it’s just <boxGeometry>.

better use scale instead of args because you can change it runtime whereas args must re-construct

<mesh scale={3.5}>
  <boxGeometry />

and no need for attach=“material” or “geometry”

3

Oh…

Thank you. I know I needed to use delta somewhere, but I couldn’t figured how and the damp from maath is just amazing.

ps
And thank you for the feedback. I’m new to Three JS and it was mostly copypaste from tutorials

EDIT:
For anyone having same issue my code looks like this now

  useFrame((state, delta) => {
    const target = lines.current.rotation.y + 1;

    dampE(lines.current.rotation, [target, target, 0], 1, delta); //lines.current.rotation.x = lines.current.rotation.y += delta;
  });

  return (
    <>
      <mesh ref={lines} scale={3}>
        <boxGeometry />
        <meshBasicMaterial size={0.1} wireframe side={THREE.DoubleSide} />
      </mesh>
    </>
  );

The target could be cleaner, but I am lazy

1 Like