Ok, reading the first example you shared:
CameraController.prototype.onMove = function (x, y, dt) {
this.vec2A.set(x, y);
this.app.on('object:hovered', this.hovered, this);
this.app.on('object:notHovered', this.notHovered, this);
It sets x and y in vec2A instead of creating a new one everytime, more efficient. It may also be being used elsewhere in the class.
this.app.on('object:hovered', this.hovered, this);
this.app.on('object:notHovered', this.notHovered, this);
It has linked 2 methods to the firing system
if (this.vec2A.length()) {
This just checks that vec2A has length different than 0, same as checking if at least x or y is non zero.
this.vec2A.normalize();
Normalize vec2A. Basically, it makes its lenght = 1
this.vec2B.x = this.camera.forward.x;
this.vec2B.y = this.camera.forward.z;
this.vec2B.normalize();
It sets up x and y for vec2B, and normalizes it. It is using the camera’s coordinate system. This is useful to make vectors that always face where you are looking at, or always to your camera’s left, or whatever.
var rad = Math.atan2(this.vec2B.x, this.vec2B.y) - (Math.PI / 2);
var t = this.vec2A.x * Math.sin(rad) - this.vec2A.y * Math.cos(rad);
this.vec2A.y = this.vec2A.y * Math.sin(rad) + this.vec2A.x * Math.cos(rad);
this.vec2A.x = t;
A bunch of trigonometry. I suggest you to take a paper and draw the arrows. For example, atan2 gives you the angle
this.vec2A.scale(this.movementSpeed);
this.entity.translate(this.vec2A.x * dt, 0, this.vec2A.y * dt);
Remember vec2A had length = 1
? well, now you scall it by the speed the class had, and use it to move the entity multiply by dt
, which is the time it has passed since last frame.