Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Camera controls #7291

Merged
merged 4 commits into from
Jan 17, 2025
+35 −73
Merged

Refactor Camera controls #7291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
971693c
Updated camera controls to use initialize
kpal81xd Jan 16, 2025
181444a
Merge branch 'main' into camera-controls
kpal81xd Jan 17, 2025
e2eeb8c
Added null checks
kpal81xd Jan 17, 2025
85aa2a3
Merge branch 'main' into camera-controls
marklundin Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/src/examples/camera/fly.example.mjs
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading