Camera shake along with orbitcontrols & tween js

Questions
,
1

i would like to use this type of shake Camera Shake or "Much Damage, Such WoW" (i tried using the code from this but it did not work as intended)

along with orbitcontrols and tween js

so tween js moves the camera position and orbitcontrols target to specified points ( the onUpdate callback is used to update both the values)
and
orbitcontrols.update() in the render loop keeps the camera following the target

is there a way to add simple repeatable noise to the movement ?

i have simplex and improved noise imported but adding noise at each frame just seems to be jittering the movement and not moving smoothly

fiddle coming soon

2

thereā€™s a fully configurable camshake that works with any kind of control here: GitHub - pmndrs/drei: šŸŒ­ useful helpers for react-three-fiber it lets you set pitch roll and yaw as well as frequency and intensity. it also has decay so you can use it to ā€œbounceā€ the camera, like when a bomb goes off, etc.

<CameraShake />
<OrbitControls makeDefault />

demo: Camera shake - CodeSandbox

camshake code: drei/CameraShake.tsx at 92ee23da2355426a39dd76596c3b996eea20e415 Ā· pmndrs/drei Ā· GitHub

when you need that in vanilla, useEffect is ran once, set up your events. useFrame is the same as your frameloop.

1 Like
3

Cool

will use drei/CameraShake.tsx at 92ee23da2355426a39dd76596c3b996eea20e415 Ā· pmndrs/drei Ā· GitHub as another refernce

since orbit controls looks at target i cant use rotation

this is my current simple approch
https://codepen.io/optimus007-the-looper/pen/eYGYpKd?editors=1011

camTween.onUpdate(() => {
  console.log(forTween.val);
  camera.position.lerpVectors(forTween.start, forTween.end, forTween.val);
  controls.target.lerpVectors(forTween.tarStart, forTween.tarEnd, forTween.val);
  noise.set(
    simplex.noise(camera.position.x, 1),
    simplex.noise(camera.position.y, 1),
    simplex.noise(camera.position.z, 1)
  );
  noise.multiplyScalar(forTween.noiseIntensity);
  camera.position.add(noise);
});