Skip to content

Commit

Permalink
Refactor Camera controls (#7291)
Browse files Browse the repository at this point in the history 
* Updated camera controls to use initialize

* Added null checks

---------

Co-authored-by: Mark Lundin <[email protected]>
  • Loading branch information
@kpal81xd @marklundin
2 people authored and Martin Valigursky committed Jan 17, 2025
1 parent 1edd5cf commit 395ea7e
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 73 deletions.
2 changes: 1 addition & 1 deletion examples/src/examples/camera/fly.example.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const createFlyCamera = (focus) => {

/** @type {CameraControls} */
const script = camera.script.create(CameraControls, {
attributes: {
properties: {
enableOrbit: false,
enablePan: false,
focusPoint: bbox.center,
Expand Down
2 changes: 1 addition & 1 deletion examples/src/examples/camera/multi.example.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const createMultiCamera = (focus) => {

/** @type {CameraControls} */
const script = camera.script.create(CameraControls, {
attributes: {
properties: {
focusPoint: bbox.center,
sceneSize: bbox.halfExtents.length()
}
Expand Down
2 changes: 1 addition & 1 deletion examples/src/examples/camera/orbit.example.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const createOrbitCamera = (focus) => {

/** @type {CameraControls} */
const script = camera.script.create(CameraControls, {
attributes: {
properties: {
enableFly: false,
focusPoint: bbox.center,
sceneSize: bbox.halfExtents.length()
Expand Down
2 changes: 1 addition & 1 deletion examples/src/examples/misc/editor.example.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const cameraOffset = 4 * camera.camera?.aspectRatio;
camera.setPosition(cameraOffset, cameraOffset, cameraOffset);
app.root.addChild(camera);
const cameraControls = /** @type {CameraControls} */ (camera.script.create(CameraControls, {
attributes: {
properties: {
focusPoint: pc.Vec3.ZERO,
sceneSize: 5
}
Expand Down
100 changes: 31 additions & 69 deletions scripts/esm/camera-controls.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ class CameraControls extends Script {
* @type {HTMLElement}
* @private
*/
_element;
_element = this.app.graphicsDevice.canvas;

/**
* @type {Mat4}
Expand Down Expand Up @@ -302,54 +302,7 @@ class CameraControls extends Script {
*/
zoomScaleMin = 0;

/**
* @param {object} args - The script arguments.
*/
constructor(args) {
super(args);
const {
element,
focusPoint,
pitchRange,
sceneSize,
enableOrbit,
enablePan,
enableFly,
rotateSpeed,
rotateDamping,
moveSpeed,
moveFastSpeed,
moveSlowSpeed,
moveDamping,
zoomSpeed,
zoomPinchSens,
zoomDamping,
zoomMin,
zoomMax,
zoomScaleMin
} = args.attributes;

this._element = element ?? this.app.graphicsDevice.canvas;

this.enableOrbit = enableOrbit ?? this.enableOrbit;
this.enablePan = enablePan ?? this.enablePan;
this.enableFly = enableFly ?? this.enableFly;

this.sceneSize = sceneSize ?? this.sceneSize;

this.rotateSpeed = rotateSpeed ?? this.rotateSpeed;
this.rotateDamping = rotateDamping ?? this.rotateDamping;

this.moveSpeed = moveSpeed ?? this.moveSpeed;
this.moveFastSpeed = moveFastSpeed ?? this.moveFastSpeed;
this.moveSlowSpeed = moveSlowSpeed ?? this.moveSlowSpeed;
this.moveDamping = moveDamping ?? this.moveDamping;

this.zoomSpeed = zoomSpeed ?? this.zoomSpeed;
this.zoomPinchSens = zoomPinchSens ?? this.zoomPinchSens;
this.zoomDamping = zoomDamping ?? this.zoomDamping;
this.zoomScaleMin = zoomScaleMin ?? this.zoomScaleMin;

initialize() {
this._onWheel = this._onWheel.bind(this);
this._onKeyDown = this._onKeyDown.bind(this);
this._onKeyUp = this._onKeyUp.bind(this);
Expand All @@ -363,10 +316,10 @@ class CameraControls extends Script {
}
this.attach(this.entity.camera);

this.focusPoint = focusPoint ?? this.focusPoint;
this.pitchRange = pitchRange ?? this.pitchRange;
this.zoomMin = zoomMin ?? this.zoomMin;
this.zoomMax = zoomMax ?? this.zoomMax;
this.focusPoint = this._origin ?? this.focusPoint;
this.pitchRange = this._pitchRange ?? this.pitchRange;
this.zoomMin = this._zoomMin ?? this.zoomMin;
this.zoomMax = this._zoomMax ?? this.zoomMax;
}

/**
Expand Down Expand Up @@ -395,9 +348,12 @@ class CameraControls extends Script {
*/
set focusPoint(point) {
if (!this._camera) {
if (point instanceof Vec3) {
this._origin.copy(point);
}
return;
}
this.focus(point, this._camera.entity.getPosition(), false);
this.focus(point, this.entity.getPosition(), false);
}

get focusPoint() {
Expand All @@ -413,6 +369,9 @@ class CameraControls extends Script {
* @default [-360, 360]
*/
set pitchRange(value) {
if (!(value instanceof Vec2)) {
return;
}
this._pitchRange.copy(value);
this._clampAngles(this._dir);
this._smoothTransform(-1);
Expand All @@ -430,7 +389,7 @@ class CameraControls extends Script {
* @default 0
*/
set zoomMin(value) {
this._zoomMin = value;
this._zoomMin = value ?? this._zoomMin;
this._zoomDist = this._clampZoom(this._zoomDist);
this._smoothZoom(-1);
}
Expand All @@ -448,7 +407,7 @@ class CameraControls extends Script {
* @default 0
*/
set zoomMax(value) {
this._zoomMax = value;
this._zoomMax = value ?? this._zoomMax;
this._zoomDist = this._clampZoom(this._zoomDist);
this._smoothZoom(-1);

Expand All @@ -464,7 +423,7 @@ class CameraControls extends Script {
* @returns {Vec3} - The focus vector.
*/
_focusDir(out) {
return out.copy(this._camera.entity.forward).mulScalar(this._zoomDist);
return out.copy(this.entity.forward).mulScalar(this._zoomDist);
}

/**
Expand Down Expand Up @@ -600,7 +559,7 @@ class CameraControls extends Script {
if (startFly) {
// start fly
this._zoomDist = this._cameraDist;
this._origin.copy(this._camera.entity.getPosition());
this._origin.copy(this.entity.getPosition());
this._position.copy(this._origin);
this._cameraTransform.setTranslate(0, 0, 0);
this._flying = true;
Expand Down Expand Up @@ -782,22 +741,22 @@ class CameraControls extends Script {

tmpV1.set(0, 0, 0);
if (this._key.forward) {
tmpV1.add(this._camera.entity.forward);
tmpV1.add(this.entity.forward);
}
if (this._key.backward) {
tmpV1.sub(this._camera.entity.forward);
tmpV1.sub(this.entity.forward);
}
if (this._key.left) {
tmpV1.sub(this._camera.entity.right);
tmpV1.sub(this.entity.right);
}
if (this._key.right) {
tmpV1.add(this._camera.entity.right);
tmpV1.add(this.entity.right);
}
if (this._key.up) {
tmpV1.add(this._camera.entity.up);
tmpV1.add(this.entity.up);
}
if (this._key.down) {
tmpV1.sub(this._camera.entity.up);
tmpV1.sub(this.entity.up);
}
tmpV1.normalize();
this._moving = tmpV1.length() > 0;
Expand Down Expand Up @@ -840,8 +799,11 @@ class CameraControls extends Script {
* @param {Vec3} point - The output point.
*/
_screenToWorldPan(pos, point) {
if (!this._camera) {
return;
}
const mouseW = this._camera.screenToWorld(pos.x, pos.y, 1);
const cameraPos = this._camera.entity.getPosition();
const cameraPos = this.entity.getPosition();

const focusDir = this._focusDir(tmpV1);
const focalPos = tmpV2.add2(cameraPos, focusDir);
Expand Down Expand Up @@ -923,8 +885,8 @@ class CameraControls extends Script {
*/
_updateTransform() {
tmpM1.copy(this._baseTransform).mul(this._cameraTransform);
this._camera.entity.setPosition(tmpM1.getTranslation());
this._camera.entity.setEulerAngles(tmpM1.getEulerAngles());
this.entity.setPosition(tmpM1.getTranslation());
this.entity.setEulerAngles(tmpM1.getEulerAngles());
}

/**
Expand Down Expand Up @@ -958,8 +920,8 @@ class CameraControls extends Script {

this._cameraTransform.setTranslate(0, 0, 0);

const pos = this._camera.entity.getPosition();
const rot = this._camera.entity.getRotation();
const pos = this.entity.getPosition();
const rot = this.entity.getRotation();
this._baseTransform.setTRS(pos, rot, Vec3.ONE);

this._zoomDist = this._clampZoom(tmpV1.length());
Expand Down

0 comments on commit 395ea7e

Please sign in to comment.