Question

first post here.. I didn’t know how to search for this topic because I think its very esoteric. I’ll post the code after my explanation.

I created a custom animation function that would do recursive calls with a setTimeout function to slow down calls so I can control the animation.
The custom animation function would just draw a rectangle inside a cylinder and move up in it and change its width based on how high the rectangle is inside the cylinder.

Edited: I’ve figured out how to get the camera angles I want. Check the comments to find out.

The issue I’m having now is that when I set the initial camera position and rotation and controls.update() runs, it changes the rotational z axis even though I haven’t moved the camera.

Here is the entirety of my code:

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>

Edit 1:
Here is the jsfiddle link.
http://jsfiddle.net/J2NEB/240/

Answer 1

I’ve figured it out:

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

Basically what I did was rotate it about the x and y by Math.PI*2 and changed the

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

to

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

thus creating the camera angle I want without having to make some sort of complex calculation because of the rotations changing the object’s axis.