Creating dynamic animations in three.js involves using time as a crucial

As someone who is new to Javascript, I am struggling to understand how the time argument functions within the animate function provided below. It seems that the animate function requires a time argument, but when called as a callback in setAnimationLoop, no argument is being passed in. Can anyone clarify this for me?

import * as THREE from './js/three.module.js';

let camera, scene, renderer;
let geometry, material, mesh;

init();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setAnimationLoop( animation );
    document.body.appendChild( renderer.domElement );

}

function animation( time ) {

    mesh.rotation.x = time / 2000;
    mesh.rotation.y = time / 1000;

    renderer.render( scene, camera );

} 

Answer №1

When utilized as a callback in setAnimationLoop, the function is invoked without any arguments being passed.

The animation loop created by WebGLRenderer.setAnimationLoop() operates internally with requestAnimationFrame(). If you provide a callback to requestAnimationFrame(), it will automatically have access to a DOMHighResTimeStamp.

For more detailed information, please refer to the corresponding documentation:

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm looking for a way to have an element shift in a particular direction only when two keys are pressed simultaneously

Having trouble moving a square diagonally when two keys are pressed simultaneously. Trying to create an if statement that detects both key presses at the same time and triggers the movement. However, all attempts have failed so far, leaving uncertainty abo ...

Variable declared in $scope suddenly losing its definition

Within my directive controller, I've implemented a $watch function as follows: $scope.$watch(function () { return service.abc; }, function(newVal, oldVal) { $scope.abc = {abc: newVal}; }); However, I've encountered issues with the variabl ...

Transforming a string representation of a nested array into an actual nested array with the help of JavaScript

My database stores a nested array as a string, which is then returned as a string when fetched. I am facing the challenge of converting this string back into a nested array. Despite attempting to use JSON.parse for this purpose, I encountered the following ...

Updating HighCharts with fresh data through Ajax

I'm currently in the process of replacing the highcharts that I initially loaded through ajax. The idea is to obtain new values from the user, pass them via Ajax, and then display an entirely new graph (with a different type and data). Here's wha ...

Steps to resolve the Angular observable error

I am trying to remove the currently logged-in user using a filter method, but I encountered an error: Type 'Subscription' is missing the following properties from type 'Observable[]>': _isScalar, source, operator, lift, and 6 more ...

Error: Unable to access the applicant's ID as it is undefined

I'm currently facing an issue with passing parameters from server.js to humanresources.js in a login request. Although the params are successfully printed out in server.js, they appear as "undefined" once passed on to the function in human resources.j ...

Having trouble sending a request in next.js with Docker during the build process?

When utilizing the getStaticProps function to send a request to my backend API from another Docker container, I am encountering an issue. Despite ensuring that the API URL is accurate, the static page fails to be created. This is due to the requirement for ...

Handling image errors in jQuery for responsive design queries

Images on my website change based on the screen size using media queries. I am looking for a way to handle errors that may occur using jQuery. I want to display a text message if the image fails to load. Here is the code I have so far: <div class="con ...

Encountering issues with integrating an external plugin with AngularJS code

For my app, I am attempting to incorporate intercom for monitoring user activity. It functions correctly when placed inside a script tag in index.html. However, I encounter an error when trying to use it in a .ts file as shown below: app/components/rocket/ ...

Establishing a pair of separate static directories within Nest

I am looking to utilize Nest in order to host two static applications. Essentially, I have a folder structure like this: /public /admin /main Within my Nest application, I currently have the following setup: app.useStaticAssets(join(__dirn ...

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...

Guidelines on incorporating several JavaScript functions with variables in a single file

Having some trouble figuring out how to incorporate multiple functions with variables in a single JavaScript file. The syntax is throwing me off. I'm attempting to follow an example from randomsnippets.com but would like to expand it to allow for add ...

Adding elements to an array appears to cause the previously created object to react

I am encountering a situation where once I add an object to an array, it becomes reactive to any changes made. // actions.js export const addToCart = ({ commit }) => { commit('addToCart'); // successfully updates the state setTimeout ...

Validation scheme for the <speak> element

When using validators in an angular formarray for input fields, I encountered a challenge with the regex to check the <speak> tag. https://i.sstatic.net/ogFA3.png The content provided was considered valid. https://i.sstatic.net/ar5FJ.png An error ...

Discovering the oldest date in an array with JavaScript

Is there a way to identify the earliest date, also known as the minimum date, within an array using JavaScript? For instance: ["10-Jan-2013", "12-Dec-2013", "1-Sep-2013", "15-Sep-2013"] The desired output would be: ...

Angular: Exploring the differences between $rootScope variable and event handling

I have a dilemma with an app that handles user logins. As is common in many apps, I need to alter the header once the user logs in. The main file (index.html) utilizes ng-include to incorporate the header.html I've come across two potential solution ...

Add the Google analytics JavaScript code to your ASP.NET web application

I am trying to integrate the Google Analytics code into my ASP.NET web page, but it is not tracking any data. I want to capture information such as geolocation, IP address, session ID, and browser details using Google Analytics. Below is the code snippet I ...

I encountered a permission denied error while attempting to execute the command npm install -g tsc

My main objective is to convert TypeScript code to JavaScript. However, when I attempted to install the TypeScript compiler globally using 'npm install -g tsc', I encountered the following error: npm ERR! Error: EACCES: permission denied, rename ...

generate an array using JavaScript and Html.action

I'm struggling with creating an array of strings in JavaScript using a function within my MVC controller. The current approach is not yielding the desired results, and I'm unsure of the necessary steps to rectify this issue. Below, you'll fi ...

Adjust the height of the container div for the carousel according to the length of the text displayed

My image carousel features description content positioned on the right for wide-screen windows. However, I want the description to shift below the images when the browser window reaches a certain breakpoint. The challenge I am facing is that the height of ...