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