# Slow down clock time / bullet time

**URL:** <https://discourse.threejs.org/t/slow-down-clock-time-bullet-time/38705>\
**Category:** Questions\
**Tags:** clock, webgl-renderer, animation\
**Created:** [May 31, 2022, 5:59pm UTC](https://discourse.threejs.org/t/slow-down-clock-time-bullet-time/38705 "2022-05-31T17:59:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![yyynnn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yyynnn/32/26691_2.png) [@yyynnn](https://discourse.threejs.org/u/yyynnn)\
**Post date:** [May 31, 2022, 5:59pm UTC](https://discourse.threejs.org/t/slow-down-clock-time-bullet-time/38705/1 "2022-05-31T17:59:46Z")

</div>

I’m trying to slow down the scene globally - animations/physics/transformations, etc. As it is done in F.E.A.R., max payne or nfs, for example, with a smooth transition from/to slowdown when you press the button. But so far I don’t see any way to implement this through threejs api. What can be done in this situation? What threejs or webgl api’s should be used? Maybe there’s some hidden global multiplier?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [May 31, 2022, 6:23pm UTC](https://discourse.threejs.org/t/slow-down-clock-time-bullet-time/38705/2 "2022-05-31T18:23:45Z")

</div>

Hello! Three.js use delta time for animations. For 60 fps delta time is 0.016 second or 16 miliseconds.

```javascript
var slow_down=0;
var slow_up=0;
var slow_v=0.016;

function loop(){

requestAnimationFrame(loop);
delta=clock.getDelta(); // 0.016ms

if(slow_down==1){
if(slow_v>0.002){ slow_v-=0.0001; }
delta=slow_v;
}

if(slow_up==1){
slow_down=0; // set it in function of keypress
if(slow_v<0.016){ slow_v+=0.0001; }
if(slow_v>0.015){ slow_v=0.016; slow_up=0; }
delta=slow_v;
}

controls.update(delta);

var max=mixers.length;
for(var n=0;n<max;n++){
mixers[n].update(delta);
}

}

```

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [May 31, 2022, 6:51pm UTC](https://discourse.threejs.org/t/slow-down-clock-time-bullet-time/38705/3 "2022-05-31T18:51:25Z")

</div>

Good test into “Silent Hill”.

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/3/d346a41da1e4f10ba9f10281f52912946276dd05.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/3/d346a41da1e4f10ba9f10281f52912946276dd05.mp4)

---

<div class="post-metadata">

**Author:** ![yyynnn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yyynnn/32/26691_2.png) [@yyynnn](https://discourse.threejs.org/u/yyynnn)\
**Post date:** [May 31, 2022, 11:27pm UTC](https://discourse.threejs.org/t/slow-down-clock-time-bullet-time/38705/4 "2022-05-31T23:27:15Z")

</div>

Hi there!  
Thank you so much for reply.  
But i do scenes in react three fiber and i have custom fps controls, and no access to ‘controls’ in frame loop. And player camera is physics based (cannonjs via use-cannon)

Could you please look into my sandbox?

> **[boring-rgb-fcz3z7 - CodeSandbox](https://codesandbox.io/s/boring-rgb-fcz3z7?file=%2Fpackages%2Fgame%2Fsrc%2Fsubjects%2FPlayer.tsx)**
>
> boring-rgb-fcz3z7 by yyynnn using @dnd-kit/core, @dnd-kit/modifiers, @emotion/css, @emotion/react, @emotion/styled, @fontsource/inter, @mui/material, @react-spring/core, @react-spring/three

> **[boring-rgb-fcz3z7 - CodeSandbox](https://codesandbox.io/s/boring-rgb-fcz3z7?file=%2Fpackages%2Fgame%2Fsrc%2Fscenes%2FPlayground.tsx)**
>
> boring-rgb-fcz3z7 by yyynnn using @dnd-kit/core, @dnd-kit/modifiers, @emotion/css, @emotion/react, @emotion/styled, @fontsource/inter, @mui/material, @react-spring/core, @react-spring/three

?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 1, 2022, 6:29am UTC](https://discourse.threejs.org/t/slow-down-clock-time-bullet-time/38705/5 "2022-06-01T06:29:22Z")

</div>

I dont know react three fiber . In example found only this:  
`clock.getElapsedTime()`  
but for slowdown need calculate like this also:  
`delta=clock.getDelta();`

---

<div class="post-metadata">

**Author:** ![yyynnn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yyynnn/32/26691_2.png) [@yyynnn](https://discourse.threejs.org/u/yyynnn)\
**Post date:** [June 7, 2022, 10:16am UTC](https://discourse.threejs.org/t/slow-down-clock-time-bullet-time/38705/6 "2022-06-07T10:16:16Z")

</div>

i can alter delta but this results in choppy motion (like 10 fps)  
how can i lerp it right in 60 fps?

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 7, 2022, 2:02pm UTC](https://discourse.threejs.org/t/slow-down-clock-time-bullet-time/38705/7 "2022-06-07T14:02:15Z")

</div>

Only who know what is “react three fiber” can help.

---

<div class="post-metadata">

**Author:** ![korial](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/korial/32/40931_2.png) [@korial](https://discourse.threejs.org/u/korial)\
**Post date:** [October 14, 2023, 10:03am UTC](https://discourse.threejs.org/t/slow-down-clock-time-bullet-time/38705/8 "2023-10-14T10:03:39Z")

</div>

Maybe by adjusting some time delta multiplicators and multiplying them with current delta

```plaintext
export function Updater() {
  const timeDeltaModificator: number = useSelector(selectTimeDeltaModificator);

  useFrame((state: RootState, delta: number) => {
    yourUpdateFunction({ delta: delta * timeDeltaModificator });
  });

  return ( <mesh /> );
}

```

This way you will still have your N (60?) fps, but with slowed-down physics, animations, etc.