在Three.js上制作补间的问题

Question

我正在迈出学习JavaScript和玩Three.js的第一步。

我创建了一个带有补间动画的反射多维数据集，我希望每次重新加载我的网站时都可以运行这个补间。

我有两天时间试图做到并且不能。你能告诉我我的代码有什么问题吗？我试图在Chrome的JavaScript控制台中验证它并没有说什么。如果你能提供帮助会很棒，因为我正在尽力而为，这真的很难。

这是我的代码，其中包含了一些评论：

<script>


  // set up the first variables scene, the camera, etc, etc
        var container;
        var camera, scene, renderer;

        var raycaster;
        var mouse;

        init();
        animate();

        function init() {

    // My scene is a div inside the html  
            container = document.createElement( 'div' );
            document.body.appendChild( container );


    //Set up the camera and make an scene
            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.target = new THREE.Vector3( 0, 50, 0 );
            camera.position.y = 300;
            camera.position.z = 500;

            scene = new THREE.Scene();

            //environment map
    var imgAr = [
                      'sources/cube_sides/0.jpg',
                      'sources/cube_sides/02.jpg',
                      'sources/cube_sides/03.jpg',
                      'sources/cube_sides/04.jpg',
                      'sources/cube_sides/05.jpg',
                      'sources/cube_sides/06.jpg',
                      'sources/cube_sides/07.jpg',
                      'sources/cube_sides/08.jpg',
                      'sources/cube_sides/09.jpg',
                      'sources/cube_sides/010.jpg',
                      'sources/cube_sides/011.jpg',
                      'sources/cube_sides/012.jpg',
                      'sources/cube_sides/013.jpg',
                      'sources/cube_sides/014.jpg',
                      'sources/cube_sides/015.jpg',
                      'sources/cube_sides/016.jpg',
                      'sources/cube_sides/017.jpg',
                      'sources/cube_sides/018.jpg'

                    ];

    var urls = imgAr.sort(function(){return .6 - Math.random()}).slice(0,6);
            var reflectionCube = THREE.ImageUtils.loadTextureCube( urls, THREE.CubeReflectionMapping );

            //load the model
    var loader = new THREE.BinaryLoader();
            loader.load( "sources/obj/mmlogo/mm_logo.js", function ( geometry ) {

            var material = new THREE.MeshPhongMaterial( {
                    color: 0x515151,
                    morphTargets: true,
                    overdraw: 0.5,
                    envMap: reflectionCube,
                    combine: THREE.AddOperation,
                    reflectivity: 1,
        shininess: 0,
        side: THREE.DoubleSide,
                } );

                //assign a mesh to the geometry
      mesh = new THREE.Mesh( geometry, material );
                mesh.scale.set( 120, 120, 120 );
                mesh.position.y = 50;
      mesh.position.x = 0;
      mesh.position.z = 700;
      mesh.rotation.y = 10;
      mesh.rotation.x = 10;
                scene.add( mesh );

                //mixer = new THREE.AnimationMixer( mesh );

                //var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'gallop', geometry.morphTargets, 30 );
                //mixer.addAction( new THREE.AnimationAction( clip ).warpToDuration( 1 ) );

            } );

    //set up the Raycaster
    raycaster = new THREE.Raycaster();
            mouse = new THREE.Vector2();

    //set up the renderer
            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor( 0xffffff );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild(renderer.domElement);



            document.addEventListener( 'load', onDocumentLoad, false );
            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

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

        }

        function onDocumentLoad( event ) {

            event.preventDefault();


            var intersects = raycaster.intersectObjects( scene.children );

            new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
                    x: 0,
                    y: 50,
                    z: 70 }, 20000 )
                .easing( TWEEN.Easing.Sinusoidal.In).start();

      new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
        x: 0,
        y: 0,
        z: 0 }, 20000 )
      .easing( TWEEN.Easing.Sinusoidal.In).start();

        }


        function animate() {

            requestAnimationFrame( animate );

            render();


        }

        var radius = 600;
        var theta = 0;

        function render() {

            TWEEN.update();

            theta += 0;

            camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
            camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
            camera.lookAt( camera.target );


            renderer.render( scene, camera );

        }

    </script>