Disable render loop?

Hi,

You can override the base application class, which is responsible for the rendering loop. It can be App, AppPuzzles, V3DPlayer – depends of what type of application you chose when created the app in Verge3D App Manager (or made the app from scratch).

For example, a newly created player-based app has a stock js file containing this code:

function V3DPlayer(containerId, ctxSettings, preloader) {
    v3d.AppPuzzles.call(this, containerId, ctxSettings, preloader);
}

V3DPlayer.prototype = Object.assign(Object.create(v3d.AppPuzzles.prototype), {

    constructor: V3DPlayer,

    onLoadFinished: function(sceneLoaded, logicLoaded, editorLoaded) {
        if (sceneLoaded) {
            this.run();
            initFullScreen();
            runCode();
        }
    },

});

There are 2 methods which V3DPlayer inherits and which you may be interested in: animate() and render(). The first one creates the rendering loop, which calls render() every frame.

You can override animate() like this:

animate: function() {
    var scope = this;

    var cb = function() {
        requestAnimationFrame(cb);

        var elapsed = scope.clock.getDelta();
        scope.elapsed = elapsed;

        if (scope.controls)
            scope.controls.update(elapsed);
    }

    cb();
},

– this is based on the actual code from the App class. We still have the loop here, but with the one exception – there’s no render() in it. The reason for having the loop is to update camera controls in background – which can be convenient when using the standard orbit or flying camera.
But if you’re planning to handle the camera movements manually instead of leaving it to a predefined control type, then you can just remove it at all like this:

animate: function() {}

So, now you can call render() whenever you want to update the viewport.
In the same stock js file you’ll find the runCode() function, which is called after the scene loading is over – it’s a good place to set up the app’s behavior. These are the common usage examples of calling render() that come into mind:

function runCode() {
    // render the scene first time immediately after loading
    app.render();
    
    // use the 'change' event of the application controls, to render the scene
    // each time the camera moves
    if (app.controls) {
        app.controls.addEventListener('change', function() {
            app.render();
        });
    }

    // viewport resizing changes the camera's aspect; re-render the scene
    window.addEventListener('resize', function() { 
        app.render();
    }, false);
}

Hope this helps!

Glad to hear, thanks for your kind words!