Add 360 horizontal rotation with OBJLoader and Three.js

Question

So I have an object loaded through OBJLoader.js, and want it to be able to rotate 360 degrees horizontally around its center. I've been looking at both TrackballControls and Canvas Cube example, but I cannot seem to implement it together with each other without encountering several kinds of mistakes. Most of the times it returns faults about addEventListener. I've checked up that I have the right versions of both three.js and the extension. Hope you have any suggestions.

    <script type="text/javascript" src="three.min.js"></script>
    <script src="Detector.js"></script>
    <script src="stats.min.js"></script>

    <script src="trackballcontrols.js"></script>
    <script src="OBJLoader.js"></script>

    <script>

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container, stats;

        var camera, controls, scene, renderer;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 500;

            controls = new THREE.TrackballControls( camera );

            controls.rotateSpeed = 1.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.8;

            controls.noZoom = false;
            controls.noPan = false;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [ 65, 83, 68 ];

            controls.addEventListener( render );

            // world

            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

            // scene

            scene = new THREE.Scene();

            var ambient = new THREE.AmbientLight( 0xFFFFFF );
            scene.add( ambient );

            // texture

            var texture = new THREE.Texture();

            var loader = new THREE.ImageLoader();
            loader.addEventListener( 'load', function ( event ) {

                texture.image = event.content;
                texture.needsUpdate = true;

            } );
            loader.load( 'test.png' );  

            // model

            var loader = new THREE.OBJLoader();
            loader.addEventListener( 'load', function ( event ) {

                var object = event.content;

                object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh ) {

                        child.material.map = texture;
                        child.geometry.computeBoundingBox();

                    }

                } );
                scene.add( object );
                    var map = object.children[0].material.map;
                    map.anisotropy = renderer.getMaxAnisotropy();

            });
            loader.load( 'monkey.obj' );

            //

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

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

            controls.handleResize();

            render();

        }

        function animate() {

            requestAnimationFrame( animate );
            controls.update();

        }

        function render() {

            renderer.render( scene, camera );
            stats.update();

        }


    </script>