javascript - 使用自定义动画函数从 object.matrix.setrotationfromeuler 旋转对象

Question

这里是第一篇文章..我不知道如何搜索这个主题，因为我认为它非常深奥。我将在解释后发布代码。

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

编辑:我已经弄清楚如何获得我想要的相机 Angular 。查看评论即可找到答案。

我现在遇到的问题是，当我设置初始相机位置和旋转并且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/

Answer 1

我已经弄清楚了:

http://jsfiddle.net/J2NEB/256/

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

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

至

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

从而创建我想要的相机 Angular ，而不必进行某种复杂的计算，因为旋转会改变对象的轴。