Seeking for some resources to create a Camera controller

[hugoh]

Hey there.

I would like to work on a camera controller, inspired by TrackBallControls with pointerLock API but I haven’t really saw useful resources to work with. My goal is to have a controller behaving like TrackBallControls (unlimited rotation, with a target but with pointerLock API like in PointerLockControls).

But I don’t really know where to start. I saw this repo when I was digging some examples and it’s pretty well documented/commented, and the controls behave almost like I want to (except for the pointerLock API).

GitHub - JaneliaSciComp/three-orbit-unlimited-controls: A THREE.js camera...

But it seems like I need some basics in camera controlling, rotating around an object, etc… And because PointerLockControls behave differently than TrackBallControls, especially with coordinates values and calculation, I can’t use the same calculation for rotation methods as in TrackBallControls…

So yep, seems like a big project for me ! So idk if anyone has some advices, some tips or some resources to read about camera controlling/rotation, so maybe I can try to code a controller module from scratch ?

Thanks,

[manthrax]

My advice is to read the source of all of them. each of them is like 2 or 3 pages of code.

[hugoh]

yep I tried to, but I can’t really understand how calculation works for like interpreting mouse movements to rotate the camera around an object or something like that. Idk if just copying the formula is a good thing to do.

I learned a bit of Euler angles since three.js implements Euler but again I don’t know if it can be a solution to work with that or not (TrackBallControls doesn’t seems to use Euler calculations).

It’s like I’m missing basics of camera interaction or something like that but I can’t find any useful resources detailing systems like camera controllers. (maybe I’m searching badly)

[manthrax]

It’s a complicated topic and there isn’t a lot of documentation about cameras specifically.

OrbitControls uses polar coordinates to create/limit the rotations

and Trackball uses Quaternions i think.

They use different techniques because they have different goals.

ThreeJS - Easy Camera control with Groups

7a Best camera controls for three.js? Camera-controls.js

Building a Simple First Person Camera

Implement own camera controller

im working on a similar game to an RTS in web and i am looking for ways to directly manipulate the camera position, look (pitch/yaw) that is custom to our game, I cant seem to find the needed necessary getter/setter for Perspective camera to manipulate its access manuly like its look, right and up (unit) vector so i can implement our own camera system/input controls. Is there any available resources on how to implement custom camera controllers like the Orbit or FPS controller, etc. example of…

[hugoh]

Oh ok I see, thank you very much for the infos. I’ll check these videos and give it a try by coding step by step