Three.js中的onLoad事件

Question

我正在迈出JavaScript的第一步，也在玩Three.js。每次重新加载我的网站时，我都会尝试创建一个事件来激活Tween。

我有一个星期试图成功，但我没有得到它。我已经看了一些教程，但它仍然无法正常工作。这是我的代码：

document.addEventListener( 'load', onDocumentLoad, false );

function onDocumentLoad( event ) {

            raycaster.setFromCamera( mouse, camera );

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

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

            new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
                    x: Math.random() * 2 * Math.PI,
                    y: Math.random() * 2 * Math.PI,
                    z: Math.random() * 2 * Math.PI }, 30000 )
                .easing( TWEEN.Easing.Sinusoidal.In).start();

                //setTimeout('window.open(\'http://www.lemonde.fr/\',"_self")', 38000);



            }

我知道这可能是一个愚蠢的问题，但我正在为自己学习。所以请尽可能帮助我，这对我来说是一个重要的项目。

这是完整的代码，如果它可以帮助：

<script>

        var container;
        var camera, scene, renderer;

        var raycaster;
        var mouse;

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            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
            //JavaScript does not know the number of images on your server side. You need to count and pass a number of the last image from server with PHP in example.

            var numberOfImages = 46, images = [];
            for (var i = 1; i <= numberOfImages; i++) {
            images.push('sources/instagram2/image' + i + ".jpg");
            }

            var urls = images.sort(function(){return .6 - Math.random()}).slice(0,6);
            var reflectionSphere = THREE.ImageUtils.loadTextureCube( urls, THREE.SphereReflectionMapping );

            //loading 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: reflectionSphere,
                    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;
                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 ) );

            } );

            //

            raycaster = new THREE.Raycaster();
            mouse = new THREE.Vector2();

            renderer = new THREE.WebGLRenderer({ alpha: true });
            renderer.setClearColor(0xfffff, 0);
            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 onDocumentTouchStart( event ) {

            event.preventDefault();

            event.clientX = event.touches[0].clientX;
            event.clientY = event.touches[0].clientY;
            onDocumentMouseDown( event );

        }   

        function onDocumentLoad( event ) {

            event.preventDefault();

            mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
            mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

            raycaster.setFromCamera( mouse, camera );

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

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

            new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
                    x: Math.random() * 2 * Math.PI,
                    y: Math.random() * 2 * Math.PI,
                    z: Math.random() * 2 * Math.PI }, 30000 )
                .easing( TWEEN.Easing.Sinusoidal.In).start();

                //setTimeout('window.open(\'http://www.lemonde.fr/\',"_self")', 38000);



            }


        function animate() {

            requestAnimationFrame( animate );

            render();


        }

        var radius = 600;
        var theta = 0;

        function render() {

            TWEEN.update();

            theta += 0;

            camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
            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>