Docs: Frame-rate independent cube rotation example (#32627)

manual/en/creating-a-scene.html

@@ -92,7 +92,7 @@ camera.position.z = 5;
 		<p>If you copied the code from above into the main.js file we created earlier, you wouldn't be able to see anything. This is because we're not actually rendering anything yet. For that, we need what's called a render or animation loop.</p>
 
 <pre class="prettyprint notranslate lang-js" translate="no">
-function animate() {
+function animate( time ) {
   renderer.render( scene, camera );
 }
 renderer.setAnimationLoop( animate );
@@ -107,8 +107,8 @@ renderer.setAnimationLoop( animate );
 		<p>Add the following code right above the `renderer.render` call in your `animate` function:</p>
 
 <pre class="prettyprint notranslate lang-js" translate="no">
-cube.rotation.x += 0.01;
-cube.rotation.y += 0.01;
+cube.rotation.x = time / 2000;
+cube.rotation.y = time / 1000;
 </pre>
 
 		<p>This will be run every frame (normally 60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the animation loop. You can of course call other functions from there, so that you don't end up with an `animate` function that's hundreds of lines.</p>
@@ -116,7 +116,7 @@ cube.rotation.y += 0.01;
 		<h2>The result</h2>
 		<p>Congratulations! You have now completed your first three.js application. It's simple, but you have to start somewhere.</p>
 
-		<p>The full code is available below and as an editable [link:https://jsfiddle.net/tswh48fL/ live example]. Play around with it to get a better understanding of how it works.</p>
+		<p>The full code is available below and as an editable [link:https://jsfiddle.net/zycqb61k/ live example]. Play around with it to get a better understanding of how it works.</p>
 
 		<p><i>index.html —</i></p>
 
@@ -156,10 +156,10 @@ scene.add( cube );
 
 camera.position.z = 5;
 
-function animate() {
+function animate( time ) {
 
-  cube.rotation.x += 0.01;
-  cube.rotation.y += 0.01;
+  cube.rotation.x = time / 2000;
+  cube.rotation.y = time / 1000;
 
   renderer.render( scene, camera );
 

manual/fr/creating-a-scene.html

@@ -92,7 +92,7 @@ camera.position.z = 5;
 		<p>Si vous copiez le code ci-dessus dans le fichier main.js que nous avons créé précédemment, vous ne pourrez rien voir. C'est parce que nous n'affichons encore rien. Pour cela, nous avons besoin de ce qu'on appelle une boucle de rendu ou d'animation.</p>
 
 <pre class="prettyprint notranslate lang-js" translate="no">
-function animate() {
+function animate( time ) {
   renderer.render( scene, camera );
 }
 renderer.setAnimationLoop( animate );
@@ -107,8 +107,8 @@ renderer.setAnimationLoop( animate );
 		<p>Ajoutez le code suivant juste au-dessus de l'appel `renderer.render` dans votre fonction `animate` :</p>
 
 <pre class="prettyprint notranslate lang-js" translate="no">
-cube.rotation.x += 0.01;
-cube.rotation.y += 0.01;
+cube.rotation.x = time / 2000;
+cube.rotation.y = time / 1000;
 </pre>
 
 		<p>Cela sera exécuté à chaque image (normalement 60 fois par seconde) et donnera au cube une belle animation de rotation. En gros, tout ce que vous voulez déplacer ou modifier pendant que l'application est en cours d'exécution doit passer par la boucle d'animation. Vous pouvez bien sûr appeler d'autres fonctions à partir de là, afin de ne pas vous retrouver avec une fonction `animate` de plusieurs centaines de lignes.</p>
@@ -116,7 +116,7 @@ cube.rotation.y += 0.01;
 		<h2>Le résultat</h2>
 		<p>Félicitations ! Vous avez maintenant terminé votre première application three.js. C'est simple, mais il faut bien commencer quelque part.</p>
 
-		<p>Le code complet est disponible ci-dessous et sous forme d'un [link:https://jsfiddle.net/tswh48fL/ exemple live] modifiable. Jouez avec pour mieux comprendre comment cela fonctionne.</p>
+		<p>Le code complet est disponible ci-dessous et sous forme d'un [link:https://jsfiddle.net/zycqb61k/ exemple live] modifiable. Jouez avec pour mieux comprendre comment cela fonctionne.</p>
 
 		<p><i>index.html —</i></p>
 
@@ -156,10 +156,10 @@ scene.add( cube );
 
 camera.position.z = 5;
 
-function animate() {
+function animate( time ) {
 
-  cube.rotation.x += 0.01;
-  cube.rotation.y += 0.01;
+  cube.rotation.x = time / 2000;
+  cube.rotation.y = time / 1000;
 
   renderer.render( scene, camera );
 
@@ -176,4 +176,4 @@ function animate() {
 
 
 
-</body></html>
+</body></html>