从对象旋转对象.带有自定义动画功能的trix.setrotationfromleuler

这里的第一篇文章。。我不知道如何搜索这个话题，因为我觉得它很深奥。我会在解释后发布代码。

我创建了一个自定义动画函数，它将使用setTimeout函数进行递归调用，以减慢调用速度，这样我就可以控制动画了。自定义动画功能只需在圆柱体内绘制一个矩形，然后在其中向上移动，并根据矩形在圆柱体内的高度更改其宽度。

伊迪丝：我已经想好了如何获得我想要的相机角度。查看评论以了解更多信息。

我现在遇到的问题是，当我设置初始相机位置和旋转并运行controls.update（）时，即使我没有移动相机，它也会更改旋转z轴。

以下是我的全部代码：

var camera, scene, renderer,
geometry, material, mesh, flatrect;
var radius = 50,
    segments = 16,
    rings = 16,
    WIDTH = 800,
    HEIGHT = 800,
    VIEW_ANGLE = 40,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 1,
    FAR = 5000; 
var animation = true;
//var animatewidth = false;
var playblock=0;
var array = [.289, .342, .396, .451, .508, .568, .630, .697, .771, .857, 1], index = 0;
var myloop, myloop2;
var zcamera=1000; // How far the camera is away from the object
var mouseoncontainer=false;
var sliderx, slidery, sliderz;
function animatemain(){
    animaterect(playblock++);
    if(playblock<11)
    setTimeout(function(){animatemain()},100);
};
    $(document).ready(function(){
        $('#container').mouseenter(function(){              
            $('#container').mousedown(function(){
                mouseoncontainer = true;
            })      
        })
        $('#container').mouseleave(function(){
        mouseoncontainer=false;
        })
        init();
        animate();
        $('#stopanim').click(function(){
        animation=false;
        })
        $('#animatewidth').click(function(){
            playblock=0;
            animatemain()
        });
    });
    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR );
        //camera.position.z = zcamera;
        scene.add(camera);

        geometry = new THREE.CylinderGeometry(200,200,500,100);
        material = new THREE.MeshNormalMaterial({color: 0x0000ee, opacity:.5, wireframe:true});
        geometry1 = new THREE.CubeGeometry(1, 500, array[0]*400);
        material1 = new THREE.MeshNormalMaterial({color:0x000000});
        // lights up everything
        var ambientLight = new THREE.AmbientLight( 0x00ff00 );
        scene.add(ambientLight);        
        mesh = new THREE.Mesh(geometry, material);
        flatrect = new THREE.Mesh(geometry1, material1);
        flatrect.position.x=-200*Math.sqrt(1-Math.pow(array[0],2));
        controls = new THREE.TrackballControls(camera);
        controls.rotatespeed = 50.0;
        controls.zoomSpeed = 5.0;
        controls.panSpeed = 0.8;
        controls.noZoom = false;
        controls.noPan = true;
        controls.staticMoving = true;
        //controls.dynamicDampingFactor = 0.3;
        controls.keys = [65, 83, 68];           
        scene.add(mesh);
        scene.add(flatrect);
        controls.update();
        camera.position.set(224,1003,-684);
        camera.rotation.set(-2.1692,0.1824, -1.8839);
        renderer = new THREE.WebGLRenderer({ antialias: true } );
        renderer.setSize( WIDTH, HEIGHT );
        $('#container').html( renderer.domElement );
        render();
    }
        function animate(){
            window.requestAnimationFrame( animate );        
        $('#blabber').html('The x position is: '+camera.position.x+
                    '<br/>The y position is: '+camera.position.y+
                    '<br/>The z position is: '+camera.position.z+
                    '<br/>The x rotation is: '+camera.rotation.x+
                    '<br/>The y rotation is: '+camera.rotation.y+
                    '<br/>The z rotation is: '+camera.rotation.z);
        render();
        }
        function animaterect(indexed){
        scene.remove(flatrect);
        geometry1 = new THREE.CubeGeometry(1, 500, array[indexed]*400);         
        material1 = new THREE.MeshNormalMaterial({color:0x000000});
        flatrect = new THREE.Mesh(geometry1, material1);
        flatrect.position.x=-200*Math.sqrt(1-Math.pow(array[indexed],2));
        scene.add(flatrect);
        //$('#blabber').append(flatrect.scale.get);
        render();
        }
    function render() {
        if(mouseoncontainer==true)
        controls.update();
        renderer.render( scene, camera );
    }
<body>
    <div id="container" style="width:800px;height:800px;">  
    </div>
    <button id="stopanim" type="input">Stop animation</button>
    <button id="animatewidth" type="input">Animate Width</button>
    <div id="blabber">      
    </div>
</body>

编辑1:这是jsfiddle链接。http://jsfiddle.net/J2NEB/240/