[SOLVED] Move OrbitCamera with KeyBoard

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


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.

@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

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

@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;	


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());
    result2Quat.mul2(vertQuat, targetObject.getRotation());

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)

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


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

Marking as solved

1 Like

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.

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


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


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

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?

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


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

oh, thanks @Change2

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