Discussion:
Camera Orbit in an ellipse?
Kevin Burke
2010-10-14 01:08:29 UTC
Permalink
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.();
dyList = new Vector.();
}

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., 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();
}
--
View this message in context: http://papervision3d.758870.n4.nabble.com/Camera-Orbit-in-an-ellipse-tp2994683p2994683.html
Sent from the Papervision3D mailing list archive at Nabble.com.
Kevin Burke
2010-10-14 15:51:11 UTC
Permalink
Okay, so I've narrowed my hunt down to modifying the code in the orbit
function so it moves in an elliptical path rather than a circle. I know
nothing about physics (but am happy to learn). I believe the yaw is what I'd
like to change...I tried multiplying it by .5 but the camera's circular
behavior did not change. I think the distance variable needs to relate to
the yaw? Can anyone confirm? Thank you!

http://papervision3d.758870.n4.nabble.com/file/n2995578/ellipse.jpg
public override function orbit(pitch:Number, yaw:Number,
useDegrees:Boolean=true, target:DisplayObject3D=null):void
{
target = target || _target;
target = target || DisplayObject3D.ZERO;

if(useDegrees)
{
pitch *= (Math.PI/180);
yaw *= (Math.PI/180);
}

// Number3D.sub
var dx :Number = target.world.n14 - this.x;
var dy :Number = target.world.n24 - this.y;
var dz :Number = target.world.n34 - this.z;

// Number3D.modulo
var distance :Number = Math.sqrt(dx*dx+dy*dy+dz*dz);

// Rotations
var rx :Number = Math.cos(yaw) * Math.sin(pitch);
var rz :Number = Math.sin(yaw) * Math.sin(pitch);
var ry :Number = Math.cos(pitch);

// Move to specified location
this.x = target.world.n14 + (rx * distance);
this.y = target.world.n24 + (ry * distance);
this.z = target.world.n34 + (rz * distance);

this.lookAt(target);
}
--
View this message in context: http://papervision3d.758870.n4.nabble.com/Camera-Orbit-in-an-ellipse-tp2994683p2995578.html
Sent from the Papervision3D mailing list archive at Nabble.com.
Makc
2010-10-14 17:49:30 UTC
Permalink
you probably need to modify these lines:

>            // Move to specified location
>            this.x = target.world.n14 + (rx * distance);
>            this.y = target.world.n24 + (ry * distance);
>            this.z = target.world.n34 + (rz * distance);

the "distance" looks like some kind of orbit radius; in an ellipse
these values would be different for each coordinate.
Kevin Burke
2010-10-14 18:22:46 UTC
Permalink
Thank you very much for the response. I really want to take this and run with
it, but physics isn't my strong suit.

So, from what I understand, this code is setting the x, y, & z of the camera
by relating it to a 4x3 3D matrix of the target plus the rotation times the
distance. Does ANYONE out there know how to change this so it mimics the
path in the image? The math is over my head.

http://papervision3d.758870.n4.nabble.com/file/n2995878/ellipse.jpg
--
View this message in context: http://papervision3d.758870.n4.nabble.com/Camera-Orbit-in-an-ellipse-tp2994683p2995878.html
Sent from the Papervision3D mailing list archive at Nabble.com.
Tomás Atria
2010-10-15 02:16:22 UTC
Permalink
Hi guys,
These two months have been very emotive for me and my country due to the rescue of the 33 trapped chilean miners.
This inspired me to create a simple facebook game to rescue them in a virtual way and help the miners and their families.
I'd like to share it with you.
http://apps.facebook.com/rescatemineros/
Hope you like it!

Cheers!
Continue reading on narkive:
Loading...