使用OBJLoader和Three.js添加360水平旋转

Question

所以我有一个通过OBJLoader.js加载的对象，并希望它能够围绕其中心水平旋转360度。我一直在关注TrackballControls和Canvas Cube example，但我似乎无法一起实现它而不会遇到几种错误。大多数情况下，它返回有关addEventListener的错误。我检查过我有正确版本的three.js和扩展名。希望你有任何建议。

    <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>