html, body {

            width: 100%;

            height: 100%;

            margin:0;

            padding:0;

            overflow: hidden;

        }

        var world;

        var fixedTimeStep = 1 / 60;

        var maxSubSteps = 3;

        var massBall = 5, massCan = 10;

        var lastTime;

        var camera, scene, renderer, controls;

        var geometry, material, materialPlane, mesh;

        var container, camera, scene, renderer;

        const ballRad = 2/2

        const canRad = 2/2

        const canHeight = 2*2

        var balls = []

        var ballControls;

        // To be synced

        var physics = new CannonHelper(0,-10,0);  physics.world.allowSleep = true;

        initThree();

        var cannonDebugRenderer = new THREE.CannonDebugRenderer(scene, world);

        initScene();

        initEvent();

        controls = new THREE.OrbitControls( camera, renderer.domElement );

        animate();

        function pileUp(xCnt, yCnt, zPos){

            var interval = 2*canRad/3;

            for (var level = 0; level < yCnt; ++level){

                var xc = xCnt - level;

                var startX = -((xc - 1)*interval + (xc*2*canRad))/2 + canRad;

                for (var i = 0; i < xc; ++i){

                    var can = new THREE.Mesh(new THREE.CylinderGeometry(canRad,canRad,canHeight,20,20,false), material);

                    can.body = physics.addBody( can, massCan );  scene.add(can);

                    can.body.position.set(startX + i*(interval + 2*canRad) , canHeight/2 + level*canHeight, zPos);   

                    ballControls.arrTarget.push(can);

                }

            }

        }

        function initScene(){

            ballControls = new BallControls(camera, renderer.domElement);

            //far plane

            var wall = new THREE.Mesh( new THREE.PlaneGeometry( 12, 12, 1, 1 ),

                                          new THREE.MeshLambertMaterial( { color: 0xf8f8f8 } ) );

            wall.position.set(0, 6, -15)

            scene.add(wall);

            ballControls.arrTarget.push(wall);

            //ground

            var ground = new THREE.Mesh( new THREE.PlaneGeometry( 12, 16, 1, 1 ), materialPlane );

            ground.quaternion.setFromAxisAngle(new THREE.Vector3(1,0,0), -Math.PI / 2);

            ground.body = physics.addBody( ground, 0 );  scene.add(ground);

            ground.body.position.set(0,0,0,)

            pileUp(3,3,-5)

            pileUp(4,4,-7)

            var ball = new THREE.Mesh(new THREE.SphereGeometry(ballRad, 20, 20), material);

            ball.body = physics.addBody( ball, massBall );  scene.add(ball);

            ball.body.position.set(0, ballRad ,5);

            ballControls.arrBall.push(ball);

        }

        function initEvent(){

            ballControls.addEventListener('selectBall', function(e){

                controls.enabled = false;

            })

            ballControls.addEventListener('throwBall', function(e){

                controls.enabled = true;

                console.log(e);

                var ball_body = e.ball.body;

                var to = e.to.sub(e.ball.position).normalize()

                to.divideScalar(e.delta).multiplyScalar (100)

                ball_body.applyLocalImpulse(to, new CANNON.Vec3(0,0,0));

                ball_body.wakeUp();

            })

        }

        function initThree() {

            container = document.createElement( 'div' );

            document.body.appendChild( container );

            // scene

            scene = new THREE.Scene();

            scene.fog = new THREE.Fog( 0xffffff, 500, 10000 );

            // camera

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );

            camera.position.set(0, 0.72*10, 6.36*10);

            camera.up.set(0,1,0);

            camera.lookAt(new THREE.Vector3(0,0,0));

            scene.add(camera);

            material = new THREE.MeshLambertMaterial( { color: 0x777777 } );

            materialPlane = new THREE.MeshLambertMaterial( { color: 0xf0f0f0 } );

            // lights

            scene.add( new THREE.AmbientLight( 0x111111 ) );

            var light = new THREE.DirectionalLight( 0xffffff, 1.75 );

            var d = 20;

            light.position.set( 40, 20, 30 );

            scene.add( light );

            renderer = new THREE.WebGLRenderer( { antialias: true } );

            renderer.setSize( window.innerWidth, window.innerHeight );

            renderer.setClearColor( scene.fog.color );

            var axesHelper = new THREE.AxesHelper( 5 );  scene.add( axesHelper );

            container.appendChild( renderer.domElement );

        }

        function animate(time) {

            requestAnimationFrame( animate );

            if(time && lastTime){

                var dt = time - lastTime;

                physics.update(dt / 1000, maxSubSteps);

            }

            // cannonDebugRenderer.update();

            controls.update();

            renderer.render(scene, camera);

            lastTime = time;

        }