Jump to content

Cordova and Three.JS won't get along


Recommended Posts

So, I've written a simple animation with three.js using the canvas renderer. It works just as expected on the desktop, but it leaves an afterimage of the first frame when compiled for android on cordova. Download this video I recorded with SCR Screen Recorder to see exactly what I'm talking about.


Here's the following markup and script for the said animation (which, again, works fine on the desktop, but leaves an afterimage on android). Of course, you'll also need to download three.min.js in the same directory if you want to run it.

<!DOCTYPE html><html><head>    <title>Cube</title>    <style type="text/css">* { margin: 0; padding: 0; } canvas { width: 100%; height: 100% }</style></head><body>    <script type="application/javascript" src="three.min.js"></script>    <script type="application/javascript">        var scene = new THREE.Scene();        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );                var renderer = new THREE.CanvasRenderer();        renderer.setSize( window.innerWidth, window.innerHeight );        document.body.appendChild( renderer.domElement );                // create geometry        var geometry = new THREE.CubeGeometry(1,1,1);        var material = new THREE.MeshLambertMaterial( { color: 0x00ff00, overdraw: true } );        var cube = new THREE.Mesh( geometry, material );                // create lights        var light = new THREE.AmbientLight( 0x004400 ); // soft green        var directionalLight = new THREE.DirectionalLight(0xffffff);        directionalLight.position.set(1, 1, 1).normalize();                // camera orientation        camera.position.z = 5;        camera.position.y = 2;        camera.lookAt( scene.position );                // draw objects        scene.add( cube );        scene.add( light );        scene.add( directionalLight );                function render() {            requestAnimationFrame(render);            cube.rotation.y += 0.1;            if (cube.position.z <= -5) {cube.position.z = 0;}            else {cube.position.z -= 0.1;}            renderer.render(scene, camera);        } render();    </script></body></html>
Link to comment
Share on other sites

For anyone who comes across this problem, the answer is to clear the drawing buffer just before you run your render loop. So you'd run

where the renderer variable is the canvas renderer like this:
var renderer = new THREE.CanvasRenderer();
Not sure why this problem doesn't affect the desktop, but clearing the buffer doesn't seem to hurt it. There's also an .autoClear() method for CavasRenderer().
Link to comment
Share on other sites

  • 3 months later...

I have a similar problem for Android but I can't get it to work with your renderer.clear() fix. I've tried to clear the buffer at various different location in the code, but must be doing something wrong.. Could you post the complete version of your code example and what version of cordova you are running please?


Running it on cordova version 3.4.1 together with your three.js.min version 67.

Link to comment
Share on other sites

  • 4 weeks later...

Is this problem only seen on canvas renderer or does webglrenderer exhibit the same issue?


I try to avoid canvasrenderer due to performance since most browsers now support webglrenderer and I don't care about IE due to it's low share, that and I don't release for the browser directly (yet) only standalone.


I haven't looked much into Cordova, I am looking at CocoonJS for porting to Android and iOS.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...