Augmenting camera position once the animation is started

[Kevin Zeidler]

I recall this being a little tricky in Three.js. Unlike Mathbox though, Three.js requires explicit init() and render() functions – so interrupting the draw loop is pretty straightforward. (You can just stop requesting the next animation frame.) As far as I can tell from reading lots of examples, Mathbox doesn't really have an exposed inner-loop, so I'm not sure how to pause the camera rotation on command. Here's my setup:

mathbox = mathBox({
    plugins: ['core'],
});

view = mathbox.cartesian({
    range: [[-1, 1], [-1, 1], [-1, 1]],
    scale: [3, 3, 3],
});

three = mathbox.three;
three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);

var camera = view.camera({
    lookAt: [0, 0, 0],
}, {
    position: function (t) {
        if (!window.paused) return [-3 * Math.cos(t) + 1, .4 * Math.cos(t * .381) + 1, -3 * Math.sin(t) + 1]

    },

});

The easing transformation of the camera position is quite slick, but the preliminary checks on window.paused don't seem to block when that variable is true. I've tried a few other strategies too, like caching the result and returning it repeatedly while the window is in a paused state. That seemed to work for stopping the animation, but I didn't have luck getting it to resume. Is there a trick to this?