Update orbit-camera.js

orbit-camera.js

@@ -4,7 +4,7 @@
 /*
  * PlayCanvas Orbit Camera for GSplat/SOGS/GLB viewers.
  * - Handles min/max zoom, pitch, yaw, minY (don't go below ground)
- * - Mouse & touch controls (orbit, pan, zoom)
+ * - Mouse, touch & keyboard controls (orbit, pan, zoom)
  * - Attributes are auto-injected by viewer.js
  */
 
@@ -60,9 +60,11 @@ OrbitCamera.prototype.resetAndLookAtPoint = function (resetPoint, lookAtPoint) {
     distance.sub2(lookAtPoint, resetPoint);
     this.distance = distance.length();
     this.pivotPoint.copy(lookAtPoint);
+
     var cameraQuat = this.entity.getRotation();
     this.yaw = this._calcYaw(cameraQuat);
     this.pitch = this._calcPitch(cameraQuat, this.yaw);
+
     this._removeInertia();
     this._updatePosition();
 };
@@ -83,12 +85,15 @@ OrbitCamera.prototype.resetToPosition = function (position, lookAtPoint) {
     this.entity.setPosition(position);
     this.entity.lookAt(lookAtPoint);
     this._pivotPoint.copy(lookAtPoint);
+
     var distanceVec = new pc.Vec3();
     distanceVec.sub2(position, lookAtPoint);
     this._targetDistance = this._distance = distanceVec.length();
+
     var cameraQuat = this.entity.getRotation();
     this._targetYaw = this._yaw = this._calcYaw(cameraQuat);
     this._targetPitch = this._pitch = this._calcPitch(cameraQuat, this._yaw);
+
     this._removeInertia();
     this._updatePosition();
 };
@@ -105,6 +110,7 @@ OrbitCamera.prototype.worldCameraYForPivot = function(pivot) {
 
 OrbitCamera.prototype.initialize = function () {
     var self = this;
+
     var onWindowResize = function () { self._checkAspectRatio(); };
     window.addEventListener('resize', onWindowResize, false);
     this._checkAspectRatio();
@@ -118,7 +124,7 @@ OrbitCamera.prototype.initialize = function () {
     this._pivotPoint.copy(this._modelsAabb.center);
 
     var cameraQuat = this.entity.getRotation();
-    this._yaw = this._calcYaw(cameraQuat);
+    this._yaw = this._calcYaw(cameraQuat);                          // degrees
     this._pitch = this._clampPitchAngle(this._calcPitch(cameraQuat, this._yaw));
     this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);
 
@@ -135,15 +141,15 @@ OrbitCamera.prototype.initialize = function () {
     }
     this._targetDistance = this._distance;
 
-    this.on('attr:distanceMin', function (value, prev) { this._distance = this._clampDistance(this._distance); });
-    this.on('attr:distanceMax', function (value, prev) { this._distance = this._clampDistance(this._distance); });
-    this.on('attr:pitchAngleMin', function (value, prev) { this._pitch = this._clampPitchAngle(this._pitch); });
-    this.on('attr:pitchAngleMax', function (value, prev) { this._pitch = this._clampPitchAngle(this._pitch); });
-    this.on('attr:focusEntity', function (value, prev) {
+    this.on('attr:distanceMin', function () { this._distance = this._clampDistance(this._distance); });
+    this.on('attr:distanceMax', function () { this._distance = this._clampDistance(this._distance); });
+    this.on('attr:pitchAngleMin', function () { this._pitch = this._clampPitchAngle(this._pitch); });
+    this.on('attr:pitchAngleMax', function () { this._pitch = this._clampPitchAngle(this._pitch); });
+    this.on('attr:focusEntity', function (value) {
         if (this.frameOnStart) { this.focus(value || this.app.root); }
         else { this.resetAndLookAtEntity(this.entity.getPosition(), value || this.app.root); }
     });
-    this.on('attr:frameOnStart', function (value, prev) {
+    this.on('attr:frameOnStart', function (value) {
         if (value) { this.focus(this.focusEntity || this.app.root); }
     });
 
@@ -163,6 +169,7 @@ OrbitCamera.prototype.update = function (dt) {
 OrbitCamera.prototype._updatePosition = function () {
     this.entity.setLocalPosition(0, 0, 0);
     this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);
+
     var position = this.entity.getPosition();
     position.copy(this.entity.forward);
     position.mulScalar(-this._distance);
@@ -209,7 +216,7 @@ OrbitCamera.prototype._buildAabb = function (entity) {
     for (i = 0; i < gsplats.length; i++) {
         var gsplat = gsplats[i];
         var instance = gsplat.instance;
-        if (instance?.meshInstance) {
+        if (instance && instance.meshInstance) {
             meshInstances.push(instance.meshInstance);
         }
     }
@@ -224,9 +231,10 @@ OrbitCamera.prototype._buildAabb = function (entity) {
 };
 
 OrbitCamera.prototype._calcYaw = function (quat) {
-    var transformedForward = new pc.Vec3();
-    quat.transformVector(pc.Vec3.FORWARD, transformedForward);
-    return Math.atan2(-transformedForward.x, -transformedForward.z) * pc.math.DEG_TO_RAD * 180 / Math.PI;
+    // FIX: return degrees (was effectively radians before)
+    var f = new pc.Vec3();
+    quat.transformVector(pc.Vec3.FORWARD, f);
+    return Math.atan2(-f.x, -f.z) * pc.math.RAD_TO_DEG;
 };
 
 OrbitCamera.prototype._clampDistance = function (distance) {
@@ -394,7 +402,7 @@ OrbitCameraInputMouse.prototype.onMouseWheel = function (event) {
     }
     event.event.preventDefault();
 };
-OrbitCameraInputMouse.prototype.onMouseOut = function (event) {
+OrbitCameraInputMouse.prototype.onMouseOut = function () {
     this.lookButtonDown = false;
     this.panButtonDown = false;
 };
@@ -537,25 +545,30 @@ OrbitCameraInputTouch.prototype.onTouchMove = function (event) {
 var OrbitCameraInputKeyboard = pc.createScript('orbitCameraInputKeyboard');
 
 /**
- * Réglages :
+ * Réglages clavier :
  * - orbitDegreesPerSecond : vitesse d’orbite (deg/s) pour yaw/pitch
- * - zoomFactorPerSecond   : agressivité du zoom (facteur/s, proportionnel à la distance/orthoHeight)
- * - panUnitsPerSecond     : vitesse de pan (en fraction de la distance/s)
+ * - zoomFactorPerSecond   : facteur de zoom (proportionnel à la distance) par seconde
+ * - panUnitsPerSecond     : vitesse de pan (en unités monde = distance * facteur) par seconde
  */
-OrbitCameraInputKeyboard.attributes.add('orbitDegreesPerSecond', { type: 'number', default: 90,  title: 'Orbit Degrees / s' });
-OrbitCameraInputKeyboard.attributes.add('zoomFactorPerSecond',   { type: 'number', default: 1.6, title: 'Zoom Factor / s' });
-OrbitCameraInputKeyboard.attributes.add('panUnitsPerSecond',     { type: 'number', default: 0.8, title: 'Pan (distance frac) / s' });
+OrbitCameraInputKeyboard.attributes.add('orbitDegreesPerSecond', { type: 'number', default: 180, title: 'Orbit Degrees / s' });
+OrbitCameraInputKeyboard.attributes.add('zoomFactorPerSecond',   { type: 'number', default: 2.0, title: 'Zoom Factor / s' });
+OrbitCameraInputKeyboard.attributes.add('panUnitsPerSecond',     { type: 'number', default: 1.0, title: 'Pan (distance frac) / s' });
 
 OrbitCameraInputKeyboard.prototype.initialize = function () {
     this.orbitCamera = this.entity.script.orbitCamera;
 
+    // S’assure que le clavier est bien attaché (certains viewers ne l’initialisent pas)
+    if (!this.app.keyboard) {
+        this.app.keyboard = new pc.Keyboard(window);
+    }
+
+    // Empêche le scroll de la page avec les flèches quand la scène a le focus
     var self = this;
     this._preventDefault = function (e) {
         var tag = (e.target && e.target.tagName) ? e.target.tagName.toUpperCase() : '';
         if (tag === 'INPUT' || tag === 'TEXTAREA' || e.isContentEditable) return;
-
-        var code = e.key || '';
-        if (code === 'ArrowUp' || code === 'ArrowDown' || code === 'ArrowLeft' || code === 'ArrowRight') {
+        var key = e.key || '';
+        if (key === 'ArrowUp' || key === 'ArrowDown' || key === 'ArrowLeft' || key === 'ArrowRight') {
             e.preventDefault();
         }
     };
@@ -566,9 +579,10 @@ OrbitCameraInputKeyboard.prototype.initialize = function () {
     });
 };
 
-// Teste si un pitch proposé ferait passer la caméra sous minY (même logique que souris/touch)
+// Teste si un pitch proposé ferait passer la caméra sous minY (même logique que la souris)
 OrbitCameraInputKeyboard.prototype._wouldGoBelowMinYWithPitch = function (proposedPitch) {
     var cam = this.orbitCamera;
+
     var currPitch = cam.pitch;
     var currYaw = cam.yaw;
     var currDist = cam.distance;
@@ -590,7 +604,7 @@ OrbitCameraInputKeyboard.prototype._wouldGoBelowMinYWithPitch = function (propos
     return { wouldGoBelow: proposedY < minY - 1e-4, preY: preY, proposedY: proposedY };
 };
 
-// Pan latéral (droite/gauche) avec respect de minY
+// Pan latéral (⇧ + ←/→) avec respect de minY
 OrbitCameraInputKeyboard.prototype._panSideways = function (delta) {
     var cam = this.orbitCamera;
 
@@ -625,18 +639,18 @@ OrbitCameraInputKeyboard.prototype.update = function (dt) {
 
     // --------- Avec SHIFT : zoom & pan latéral ----------
     if (shift) {
-        // Zoom (⇧+↑ / ⇧+↓)
+        // Zoom (⇧+↑ / ⇧+↓) — proportionnel à la distance / orthoHeight
         if (kb.isPressed(pc.KEY_UP) || kb.isPressed(pc.KEY_DOWN)) {
             var k = this.zoomFactorPerSecond;
 
             if (this.entity.camera.projection === pc.PROJECTION_PERSPECTIVE) {
-                var amount = k * dt * (cam.distance * 0.8);
-                if (kb.isPressed(pc.KEY_UP))   cam.distance = cam.distance - amount;
-                if (kb.isPressed(pc.KEY_DOWN)) cam.distance = cam.distance + amount;
+                var dz = k * dt * (cam.distance * 0.8);
+                if (kb.isPressed(pc.KEY_UP))   cam.distance = cam.distance - dz;
+                if (kb.isPressed(pc.KEY_DOWN)) cam.distance = cam.distance + dz;
             } else {
-                var amountO = k * dt * (this.entity.camera.orthoHeight * 0.8);
-                if (kb.isPressed(pc.KEY_UP))   this.entity.camera.orthoHeight -= amountO;
-                if (kb.isPressed(pc.KEY_DOWN)) this.entity.camera.orthoHeight += amountO;
+                var dh = k * dt * (this.entity.camera.orthoHeight * 0.8);
+                if (kb.isPressed(pc.KEY_UP))   this.entity.camera.orthoHeight -= dh;
+                if (kb.isPressed(pc.KEY_DOWN)) this.entity.camera.orthoHeight += dh;
             }
         }
 
@@ -653,13 +667,13 @@ OrbitCameraInputKeyboard.prototype.update = function (dt) {
     // --------- Sans SHIFT : orbite yaw/pitch ----------
     var orbitRate = this.orbitDegreesPerSecond * dt;
 
-    // Pitch (↑/↓) — protège minY
+    // Pitch (↑/↓) — protège minY exactement comme la souris
     if (kb.isPressed(pc.KEY_UP) || kb.isPressed(pc.KEY_DOWN)) {
-        var dir = kb.isPressed(pc.KEY_UP) ? -1 : 1; // ↑ = diminuer le pitch (monter l’orbite)
-        var proposedPitch = cam.pitch + dir * orbitRate;
+        var dir = kb.isPressed(pc.KEY_UP) ? -1 : 1; // ↑ = réduire le pitch (orbiter vers le nord)
+        var currPitch = cam.pitch;
+        var proposedPitch = currPitch + dir * orbitRate;
 
         var test = this._wouldGoBelowMinYWithPitch(proposedPitch);
-
         if (!(test.wouldGoBelow && (test.proposedY < test.preY))) {
             cam.pitch = proposedPitch;
         }