Custom Camera/Object Axis In Three Js? (For First Person)

I have a possibly beginner question regarding camera rotation in threejs, I am beginning to work on a first person game, the camera controls however have a small issue: if I look up and down they seem to work fine, but if I step to the side of my object and use them then the object (cube) does a circle around the center of my screen.

A breakdown of my code:

Pointer lock tells me when the mouse moves, and I use it for back and forth movement:

    camera.rotation.y += movementX;

this works fine, because the y axis will always be up and down, but it doesn't work for side to side:

    camera.rotation.x += movementY;

like I said, if I don't move from the starting position then it works fine, otherwise it gets messed up.

I am basically looking for something like: camera.rotateX(a number);

which is like translateX(), it uses local object axis, not parallel to world axis.

I know about first person controls, but I would prefer to not use them, I would prefer code that is longer but more understandable (if possible/necessary).

Sorry For length of question :)

Answers


Need Your Help

jQuery - Compatibility Problem with Internet Explorer 7?

javascript jquery internet-explorer cross-browser

I have this code that dynamically slides up a Div over an image when mouse over it. It works perfectly in Firefox and Google Chrome, but in Internet Explorer 7 everything runs really slow and nothing

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.