Render loop - class method?

Hi

Refactoring my code into class, but I have one last problem
I’d like to remove the subfunction and transform it into a class method like anything else
but i cant make the render loop work (js error on “this” )

    // current
    class RenderEngine {
        init{
            //        ......  create all scene, camera, mesh ..

          
           render();
           function render() {
            stats.update();
            requestAnimationFrame(render);
            renderer.render(scene, camera);

        }
   }

Goal :

    // current
    class RenderEngine
    {
        init{
            //        ......  ...  this.camera = ; ..

             this.render();  // <------------------

       } 

        // an individual class method
         render() {
                this.stats.update();
                this.requestAnimationFrame(this.render);
                this renderer.render(this.scene, this.camera);
         }
     }

I can’t make it work :frowning:
Has anyone a tips ? ( neither familiar of js function into function nor like it… : “Keep it simple”)

Thks !

I’m afraid you have not posted valid JavaScript Syntax.

class RenderEngine {
    init {
    }
}

Something like this will produce syntax errors.

Why not provide a fiddle with a simple working example. In this way, you can easier show what parts of the code you want to change.

good idea :slight_smile:

The working simple code
https://jsfiddle.net/35vrenyL/

"what i’d like to do " (kick out the nested function)
https://jsfiddle.net/cbt2m5tm/1/

Have a look at: https://jsfiddle.net/cbt2m5tm/3/

Background information:

2 Likes

Thanks a lot :+1::+1:

Dear Mugen87,

Can we implement render loop within a class using “setAnimationLoop” ? It is more understoodable than requestAnimationFrame, plus it allows to stop beautifully the animation by setAnimationLoop(null).

For some reason I can not bind “this”

this.animate.bind(this);
this.renderer.setAnimationLoop(this.animate);

See the following codepen :
https://codepen.io/jimver04/pen/dyemmOO

Best,
Dimitrios

Let me clarify first that the fiddle I have posted four years ago is actually not right. The code should be looking like so: Edit fiddle - JSFiddle - Code Playground

The idea is not use an arrow function in animate() since this will create a function on each frame which only produces GC overhead.

Here is an example with setAnimationLoop(): Edit fiddle - JSFiddle - Code Playground

1 Like

Thanks for the information it realy helped ! :slight_smile:
To recap the solution is to make the bind inside the constructor

constructor() {

    this.animate = animate.bind(this);

  }

One hint, in your example you have animate() out of the class. I have corrected my codepen according to your proposal but including the animate() inside the class ( i do not want animate to be shared across my classes) :

https://codepen.io/jimver04/pen/dyemmOO

here’s a running example with multiple objects and class oop: Basic Threejs example with re-use - CodeSandbox

i’m not sure it’s worth it tbh, oop is for data storage containers. to structure an app with that will be an exercise in frustration. you do not get any of the benefits you’re after: separation of concern and re-use. for these two to exist a “unit” needs to be self contained and have awareness of its environment. an oop class has neither: the class needs to sling its exposed methods throughout the code base which creates dependence. and awareness is only possible by injection, at which point it starts to make heavy handed assumptions as to the projects structure which then hampers share and re-use. as such the oop class links into and has to know everything.

there’s a famous quote by joe armstrong describing just that:

the lack of reusability comes in object-oriented languages, not functional languages. Because the problem with object-oriented languages is they’ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.

after the oop paradigm came fp, and with that the component. a component cannot be adequately modelled with oop. as an example, this is the same as above with a component: Basic demo - CodeSandbox