Transformation of Object into Number through Function Execution in Javascript

Question

Transformation of Object into Number through Function Execution in Javascript

I am currently facing an issue with my animate() function while using Three.js to generate an animation. Below is a simplified version of the code:

let obj;
let camera = new THREE.PerspectiveCamera(fov, asp, near, far);
let scene = new THREE.Scene();
const loader = new THREE.GLTFLoader();
async function init() {
    obj = await loader.loadAsync("./public/modelo/scene.gltf");
    scene.add(obj.scene);
    animate(obj.scene.children[0]);
    renderer.render(scene, camera);
    function animate(objeto){
        console.log(objeto);
        requestAnimationFrame(animate);
        objeto.rotation.z += 0.005;
        renderer.render(scene, camera);
    }
}
init();

Initially, the function performs correctly, but subsequent calls are causing issues as seen in my console.log() output. The first run of animate() displays the object as expected. However, all following calls only return a rapidly increasing floating-point number. I double-checked the object's integrity after the initial function call, so I'm perplexed by this behavior. Any recommendations or insights?

javascript function animation types three.js

Answer 1

Answer №1

One crucial issue lies within a specific line of your code:

requestAnimationFrame(animate);

Referencing the MDN documentation for requestAnimationFrame, the callback function you provide - in this case, animate, is:

The function that is executed when it is time to update your animation for the subsequent repaint. The callback function takes a single argument, a DOMHighResTimeStamp similar to the one returned by performance.now(), which indicates the time at which requestAnimationFrame() starts executing callback functions.

This essentially means that your animate function is being invoked with a timestamp, akin to a numerical value. This explains the behavior you are observing, as it is not receiving your "objeto" as an argument.

To rectify this, ensure that the callback function passes the correct argument to animate. Replace the previous call with the following:

requestAnimationFrame(() => { animate(objeto); });

Alternatively, as @Bergi suggests, you can circumvent the need for an argument altogether by defining objeto outside of animate, within the init function. Since you consistently call animate with the same argument, there is no necessity to explicitly pass it. Thus, your code can be simplified to:

async function init() {
    obj = await loader.loadAsync("./public/modelo/scene.gltf");
    const objeto = obj.scene.children[0];
    scene.add(obj.scene);
    animate();
    renderer.render(scene, camera);
    function animate(){
        console.log(objeto);
        requestAnimationFrame(animate);
        objeto.rotation.z += 0.005;
        renderer.render(scene, camera);
    }
}

Answer 2

One crucial issue lies within a specific line of your code:

requestAnimationFrame(animate);

Referencing the MDN documentation for requestAnimationFrame, the callback function you provide - in this case, animate, is:

The function that is executed when it is time to update your animation for the subsequent repaint. The callback function takes a single argument, a DOMHighResTimeStamp similar to the one returned by performance.now(), which indicates the time at which requestAnimationFrame() starts executing callback functions.

This essentially means that your animate function is being invoked with a timestamp, akin to a numerical value. This explains the behavior you are observing, as it is not receiving your "objeto" as an argument.

To rectify this, ensure that the callback function passes the correct argument to animate. Replace the previous call with the following:

requestAnimationFrame(() => { animate(objeto); });

Alternatively, as @Bergi suggests, you can circumvent the need for an argument altogether by defining objeto outside of animate, within the init function. Since you consistently call animate with the same argument, there is no necessity to explicitly pass it. Thus, your code can be simplified to:

async function init() {
    obj = await loader.loadAsync("./public/modelo/scene.gltf");
    const objeto = obj.scene.children[0];
    scene.add(obj.scene);
    animate();
    renderer.render(scene, camera);
    function animate(){
        console.log(objeto);
        requestAnimationFrame(animate);
        objeto.rotation.z += 0.005;
        renderer.render(scene, camera);
    }
}

Transformation of Object into Number through Function Execution in Javascript

Answer №1

Similar questions

Determining in Express.js whether headers have been sent or not

Why is my Angular 2 service not showing up in my application?

Set the Checkbox selections by utilizing the array values in the MUI DataGrid

The only thing visible on my project is the homepage, void of any buttons or additional pages

Encountering a JavaScript problem in Google Chrome?

A customizable and adaptable Tetris-inspired CSS design perfect for any screen size

What is the best way to choose the next adjacent element using a CSS selector with Python Selenium?

The concept of CSS "preload" animation

Uploading directly to AWS S3: SignatureDoesNotMatch error specifically for Internet Explorer users

Employ material-ui default prop conditionally

Leveraging anonymous functions within an IF statement in JavaScript

Validate user credentials using both jQuery and PHP to display an error message if login details are incorrect

Exploring the benefits of utilizing express-session for authentication management

The NetSuite https.post() method is throwing an error that reads "Encountered unexpected character while parsing value: S. Path '', line 0, position 0"

I'm looking to leverage axios and useState-useEffect to collect data from numerous web pages. Any suggestions on how to do this efficiently

Entwine words around an immovable partition

"Patience is key when it comes to waiting for an HTTP response

Locate all elements by a segment of the identification attribute

Is there a way for me to dynamically incorporate new elements into this object?

React js: Changing Material-UI functional code to class component results in TypeError