Javascript Three.js中的onLoad事件

我正在用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>

var容器；
摄像机、场景、渲染器；
var raycaster；
var小鼠；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
camera.target=新的三个矢量3（0,50,0）；
摄像机位置y=300；
摄像机位置z=500；
场景=新的三个。场景（）；
//环境地图
//JavaScript不知道服务器端的图像数量。在本例中，您需要使用PHP计算并传递来自服务器的最后一个图像的数量。
var numberOfImages=46，images=[]；
对于（var i=1；i控制台是否显示任何错误？根据手册：
clientX属性返回水平坐标（根据客户端区域）触发鼠标事件时鼠标指针的大小。客户端区域是当前窗口
。我不认为
加载
事件被视为
鼠标事件
，因此您的
鼠标
变量很可能不包含有效值。控制台是否显示任何错误？根据手册：
clientX属性当鼠标事件被触发时，旋转鼠标指针的水平坐标（根据客户端区域）。客户端区域是当前窗口
。我不认为
加载
事件被视为
鼠标事件
，因此您的
鼠标
变量很可能不包含有效值。