Currently, I am in the process of creating a concise 'Engine' class to streamline interactions with Three.js. I have restructured the Render() method from the example into this Engine JS class, as shown below:
const Engine = function () {
const pub = {},
scene,
camera;
// SNIP: Additional private and public variables and functions...
pub.Render = function (fixedUpdate) {
requestAnimationFrame(pub.Render);
fixedUpdate();
renderer.render(scene, camera);
};
return pub;
}();
To utilize it, I pass a function containing actions that I wish to execute. For instance:
Engine.Render(function () {
cube.rotation.x += 0.01;
cube.rotation.y += 0.02;
});
However, when attempting to run this code in Chrome, an error appears: Uncaught TypeError: number is not a function. Upon inspecting Engine.Render's fixedUpdate variable, it seems to be an unusually large number instead of registering as the expected anonymous function.
To verify this behavior, I tried passing a named function handle, like so:
function animation() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.02;
}
Engine.Render(animation);
Yet, surprisingly, the outcome remained the same. It appears that the issue may stem from how I am calling the parameter.