I’m in the final stages of my Papervision project and I need to have the camera orbit around its target in an ellipse rather than a circle on a mouse drag. The tricky part is I already am using some complicated logic to get it easing as well and I need them to work together.
private function upHandler(event:Event):void
{
isCameraRotating = false;
}
private function downHandler(event:Event):void
{
isCameraRotating = true;
previousMousePoint = new Point(mouseX, mouseY);
dxList = new Vector.<Number>();
dyList = new Vector.<Number>();
}
private function updateCamera():void
{
cameraYaw %= 360;
cameraPitch %= 360;
cameraPitch = cameraPitch > 0 ? cameraPitch : 0.0001;
cameraPitch = cameraPitch < 180 ? cameraPitch : 179.9999;
camera.orbit(cameraPitch, cameraYaw, true, cameraTarget);
}
private function calc(list:Vector.<Number>, d:Number):Number
{
if(list.length > SMOOTHNESS)
list.shift();
list.push(d);
var result:Number = 0;
for each(var item:Number in list)
result += item;
return result / list.length * SENSITIVITY;
}
private function render(e:Event):void
{
camera.lookAt(cameraTarget);
renderer.renderScene(scene, camera, viewport);
if(!isCameraRotating)
return;
if(previousMousePoint.x == mouseX
&& previousMousePoint.y == mouseY)
{
dxList.shift();
dyList.shift();
return;
}
var dx:Number = previousMousePoint.x - mouseX;
var dy:Number = previousMousePoint.y - mouseY;
TweenMax.to(this, 2, {onUpdate:updateCamera, cameraYaw:cameraYaw + calc(dxList, dx), cameraPitch:cameraPitch + calc(dyList, dy), ease:Cubic.easeOut, overwrite:true});
previousMousePoint = new Point(mouseX, mouseY);
}
I’ve managed to animate a Sphere in an elliptical path with the following code, but I’m not sure how to apply this to the above code:
private var angle:Number = 0;
private var angleChange:Number = 10;
private var ellipseWidth:Number = 1000;
private var ellipseHeight:Number = ellipseWidth/2;
private var xRadius:Number = ellipseWidth/2;
private var yRadius:Number = ellipseHeight/2;
private var centerX:Number = 0;
private var centerY:Number = 0;
private function deg2rad(degree:Number)
{
return degree * (Math.PI / 180);
}
private function animateEllipse(d:DisplayObject3D) {
var radian = deg2rad(angle);
d.x = centerX + xRadius * Math.cos(radian);
d.z = centerY + yRadius * Math.sin(radian);
angle += angleChange;
angle %= 360;
}
override protected function onRenderTick(e:Event=null):void
{
animateEllipse(sphere);
camera.lookAt(sphere);
sphere.localRotationY +=1;
super.onRenderTick();
}