Javascript 使用自定义动画功能从object.matrix.setrotationfromeuler旋转对象

第一个帖子在这里。。我不知道如何搜索这个主题，因为我认为它非常深奥。在我解释完之后，我会发布代码

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

编辑：我已经想出了如何获得我想要的相机角度。查看评论以了解情况

我现在遇到的问题是，当我设置初始相机位置、旋转和控件时。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>

var摄影机、场景、渲染器、，
几何体、材料、网格、flatrect；
var半径=50，
分段=16，
环=16，
宽度=800，
高度=800，
视角=40，
纵横比=宽度/高度，
近=1，
FAR=5000；
var动画=真；
//var animatewidth=false；
var-playblock=0；
var数组=[0.289,342,396,451,508,568,630,697,771,857,1]，索引=0；
var myloop，myloop2；
var zcamera=1000；//相机离物体有多远
var mouseoncontainer=false；
变量sliderx，slidery，sliderz；
函数animatemain（）{
动画竖立（playblock++）；
如果（playblock我已经弄明白了：


基本上，我所做的是通过
Math.PI*2
将其围绕
x
和y旋转，并更改了

flatrect.position.x=-200*Math.sqrt(1-Math.pow(array[indexed],2));

到

因此，创建我想要的相机角度，而不必进行复杂的计算，因为旋转会改变对象的轴。
是否有理由每次都删除矩形而不是仅仅移动它？我还需要更改矩形的宽度。我尝试了flatrect.scale.set=x；但它不起作用。我“我已经找到了另一种方法，即在我将相机移动到正确位置时，只输出相机的位置和旋转，然后将其初始化到该位置。但是问题是，当它确实控制。更新时，它会移动Z旋转轴，因此会弄乱初始相机视图。我将编辑我的文章以参考。”选择这期新的。
flatrect.position.y=-200*Math.sqrt(1-Math.pow(array[indexed],2));