[SOLVED] Move OrbitCamera with KeyBoard

Help & Support
1

Hi all,
I’d like to be able to move the default OrbitCamera using the keyboard arrows, the same way mouse-input and touchinput behave.

Note: I’m already able to listen to arrow keypresses

Is this possible? @yaustar

2

Hi,

An easy way to do this is having an “empty” entity in place of the target object you want the camera to orbit, and making the camera a child of that entity. Then you only need to rotate that parent entity by some angle on every keypress.

3

@Francisco_Bozzo Hi, thanks for your answer but i need to do this without modifing the scene,
it’s an additional (sort of Vanilla JS) script that i need to attach to already existing and published packages.

1 Like
4

Yes, you con modify keyboard controls script to control the camera using the same API as the mouse and touch. Eg W and S can be used to reduce and increase the distance on the orbitcamera

1 Like
5

@yaustar as always, thanks for your availability

I’ve managed to perform the Zooming (assigning it to +/- buttons) like this

function ZoomInModel(){
	orbitCamera.distance -= distanceSensitivity * (orbitCamera.distance * 0.1);
}

function ZoomOutModel(){
	orbitCamera.distance += distanceSensitivity * (orbitCamera.distance * 0.1);
}

and a reset function (assigned to spacebar, as per default)

function ResetModel(){
	
	orbitCamera.reset(startYaw, startPitch, startDistance);
	orbitCamera.pivotPoint = startPivotPosition;	
	targetObject.setRotation(pc.Quat.IDENTITY);

}

But i’m struggling with the rotation…
my current code is this (i’m unsure this is the correct approach)

function RotateLeftModel(){
	rotateObject(-orbitSensitivity, 0);
}

function RotateRightModel(){
	rotateObject(orbitSensitivity, 0);
}

function RotateUpModel(){
	rotateObject(0, orbitSensitivity);
}

function RotateDownModel(){
	rotateObject(0, -orbitSensitivity);
}

var horizontalQuat = new pc.Quat();
var verticalQuat = new pc.Quat();
var result1Quat = new pc.Quat();
var result2Quat = new pc.Quat();

function rotateObject(dx, dy) { 

    var horzQuat = horizontalQuat;
    var vertQuat = verticalQuat;
	
    horzQuat.setFromAxisAngle(targetObject.up, dx * orbitSensitivity);
    vertQuat.setFromAxisAngle(camera.right, dy * orbitSensitivity);

    result1Quat.mul2(horzQuat, targetObject.getRotation());
    targetObject.setRotation(result1Quat);
    
    result2Quat.mul2(vertQuat, targetObject.getRotation());
    targetObject.setRotation(result2Quat);
    
};

Which kind of works but, the object rotates on its origin Pivot (not the model center as it would do with the standard mouse/touch-input.js)

6

I think you may be trying to do too much for the rotation.

Look at lines 112 and 113 to see how the mouse controls rotation: https://playcanvas.com/editor/code/438243?tabs=6861120

2 Likes
7

That worked! You’re the best!
I was definitively overthinking it :slight_smile:

Marking as solved

1 Like
8

Hello @Change2 , could you send me the complete line of code or the link to your project? I’m struggling with the same thing and I can’t make the camera even move.

9

Dear @Ricardo_Reyes,
sure this is the code we use, to rotate.


	rotateLeftModel() {
		this.rotateObject(-this.orbitSensitivity, 0)
	}

	rotateRightModel() {
		this.rotateObject(this.orbitSensitivity, 0)
	}

	rotateUpModel() {
		this.rotateObject(0, -this.orbitSensitivity)
	}

	rotateDownModel() {
		this.rotateObject(0, this.orbitSensitivity)
	}

	rotateObject(dx, dy) {
		this.orbitCamera.pitch -= dy * this.orbitSensitivity
		this.orbitCamera.yaw -= dx * this.orbitSensitivity
	}

where:

this.camera = this.app.root.findByName('Camera')
this.orbitCamera = this.camera.script.orbitCamera

Zoom:

currentDistance = this.orbitCamera.distance
const zoomLevel = this.orbitCamera.distance * 0.1 * this.distanceSensitivity

if (zoomIn) {
	if (currentDistance - zoomLevel > this.distanceMin) {
		this.orbitCamera.distance = currentDistance - zoomLevel
	} else {
		this.orbitCamera.distance = this.distanceMin
	}
} else {
	if (currentDistance + zoomLevel < this.distanceMax) {
		this.orbitCamera.distance = currentDistance + zoomLevel
	} else {
		this.orbitCamera.distance = this.distanceMax
	}
}
10

thanks @Change2
How can I make the minus sign and the plus sign change to letters like z which is the minus and x which is the plus?

11

You can use the keyup/down listeners for the button/s you prefer with (a) specific function(s) to run.

Example:

const controller = {
	'+': { ... func: this.zoomInModel.bind(this) },
	'-': { ... func: this.zoomOutModel.bind(this) },
	ArrowLeft: { func: this.rotateLeftModel.bind(this) },
...
}
12

oh, thanks @Change2

13

@Change2 an you help me with my question, this is the link