使用three.js在反射立方体中加载动画

Question

我制作了一个反射立方体，我试图将一个动画模型放入其中。但是在我的函数渲染中发生了一些事情，我看不到任何东西。

我正在使用javascript并使用three.js进行我的第一步。如果你可以帮助我会很棒。

    //var scene, camera, etc

        var container, loader;
        var camera, scene, projector, renderer;
        var controls;
        var mesh, mixer;
        var pointLight;
        var mouseX = 0;
        var mouseY = 0;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;
        var height = 300; // of camera frustum

        init();
        animate();



        function init() {

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


            //renderer

            renderer = new THREE.WebGLRenderer( { alpha: true } );
            renderer.setClearColor(0xffffff, 1);
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            renderer.gammaInput = true;
            renderer.gammaOutput = true;

            //set up the scene

            scene = new THREE.Scene();
            var aspect = window.innerWidth / window.innerHeight;

            //set up the Orthographic Camera

            camera = new THREE.OrthographicCamera( - height * aspect, height * aspect, height, - height, 1, 10000 );
            camera.position.z = 1500;
            scene.add( camera );

            //set up the controls

            controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.enableZoom = true;
            controls.enableDamping = true;

            //set up the lights

            var ambientLight = new THREE.AmbientLight( 0x111111 );
            scene.add( ambientLight );

            pointLight = new THREE.PointLight( 0x030303, 0.5 );
            pointLight.position.z = 2500;
            scene.add( pointLight );

            var pointLight2 = new THREE.PointLight( 0x030303, 1 );
            camera.add( pointLight2 );

            var pointLight3 = new THREE.PointLight( 0xe8e4e4, 0.5 );
            pointLight3.position.x = - 1000;
            pointLight3.position.z = 1000;
            scene.add( pointLight3 );

            //create the environment map

            var imgAr = [
                      'sources/instagram2/image1.jpg',
                      'sources/instagram2/image2.jpg',
                      'sources/instagram2/image3.jpg',
                      'sources/instagram2/image4.jpg',
                      'sources/instagram2/image5.jpg',
                      'sources/instagram2/image6.jpg',
                      'sources/instagram2/image7.jpg',
                      'sources/instagram2/image8.jpg',
                      'sources/instagram2/image9.jpg',
                      'sources/instagram2/image10.jpg',
                      'sources/instagram2/image11.jpg',
                      'sources/instagram2/image12.jpg',
                      'sources/instagram2/image13.jpg',
                      'sources/instagram2/image14.jpg',
                      'sources/instagram2/image15.jpg',
                      'sources/instagram2/image16.jpg'
                    ];

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


            //Load the animation

            var loader = new THREE.JSONLoader();
            loader.load( "sources/models/animated/horse.js", function ( geometry ) {

                var material = new THREE.MeshPhongMaterial( {

                    morphTargets: true,
                    overdraw: 0.5,
                    envMap: reflectionCube,
                    combine: THREE.AddOperation,
                    reflectivity: 1,
                    shininess: 0,
                    side: THREE.DoubleSide                  
                } );

                mesh = new THREE.Mesh( geometry, material );
                mesh.scale.set( 1.5, 1.5, 1.5 );
                mesh.position.set(0,-150,0);
                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 ) );

            } );

            // window resize

            window.addEventListener( 'resize', onWindowResize, false );

        }

            function onWindowResize() {

            var aspect = window.innerWidth / window.innerHeight;

            camera.left = - height * aspect;
            camera.right = height * aspect;
            camera.top = height;
            camera.bottom = - height;

            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

            //set up the background

            var backgroundMesh = new THREE.Mesh(
            new THREE.MeshBasicMaterial({
            map: texture
            }));

            backgroundMesh .material.depthTest = false;
            backgroundMesh .material.depthWrite = false;


            var backgroundScene = new THREE.Scene();
            var backgroundCamera = new THREE.Camera();
            backgroundScene .add(backgroundCamera );
            backgroundScene .add(backgroundMesh );



        function animate() {

            requestAnimationFrame( animate );
            controls.update();
            render();

        }

        var radius = 600;
        var theta = 0;

        var prevTime = Date.now();

        function render() {

            theta += 0.1;

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

            camera.lookAt( camera.target );

            if ( mixer ) {

                var time = Date.now();

                mixer.update( ( time - prevTime ) * 0.001 );

                prevTime = time;

            }

            renderer.render( scene, camera );
            renderer.render(backgroundScene , backgroundCamera );
            mixer.update();

        }

    </script>nter code here