diff --git a/examples/webgl_shaders_ocean.html b/examples/webgl_shaders_ocean.html
index 7f9df7a91e1047..5920d1f525a14f 100644
--- a/examples/webgl_shaders_ocean.html
+++ b/examples/webgl_shaders_ocean.html
@@ -34,7 +34,7 @@
import { Sky } from 'three/addons/objects/Sky.js';
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
- let container, stats;
+ let container, stats, timer;
let camera, scene, renderer;
let controls, water, sun, sky, mesh, bloomPass;
@@ -67,6 +67,8 @@
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.set( 30, 30, 100 );
+ timer = new THREE.Timer();
+
//
sun = new THREE.Vector3();
@@ -217,6 +219,7 @@
function animate() {
+ timer.update();
render();
stats.update();
@@ -230,7 +233,9 @@
mesh.rotation.x = time * 0.5;
mesh.rotation.z = time * 0.51;
- water.material.uniforms[ 'time' ].value += 1.0 / 60.0;
+ const delta = timer.getDelta();
+
+ water.material.uniforms[ 'time' ].value += delta;
sky.material.uniforms[ 'time' ].value = time;
renderer.render( scene, camera );