viewer.js

// viewer.js
// ==============================

async function loadImageAsTexture(url, app) {
  return new Promise((resolve, reject) => {
    const img = new window.Image();
    img.crossOrigin = "anonymous";
    img.onload = function () {
      const tex = new pc.Texture(app.graphicsDevice, {
        width: img.width,
        height: img.height,
        format: pc.PIXELFORMAT_R8_G8_B8_A8
      });
      tex.setSource(img);
      resolve(tex);
    };
    img.onerror = reject;
    img.src = url;
  });
}

// --- Patch all window.Image to force crossOrigin="anonymous" ---
(function () {
  const OriginalImage = window.Image;
  window.Image = function (...args) {
    const img = new OriginalImage(...args);
    img.crossOrigin = "anonymous";
    return img;
  };
})();

function hexToRgbaArray(hex) {
  try {
    hex = hex.replace("#", "");
    if (hex.length === 6) hex += "FF";
    if (hex.length !== 8) return [1, 1, 1, 1];
    const num = parseInt(hex, 16);
    return [
      ((num >> 24) & 0xff) / 255,
      ((num >> 16) & 0xff) / 255,
      ((num >> 8) & 0xff) / 255,
      (num & 0xff) / 255
    ];
  } catch (e) {
    alert("hexToRgbaArray error: " + e);
    return [1, 1, 1, 1];
  }
}

// ----- Utility: Recursive scene traversal -----
function traverse(entity, callback) {
  callback(entity);
  if (entity.children) {
    entity.children.forEach((child) => traverse(child, callback));
  }
}

// ---------- Enregistre les scripts d’orbite sous des NOMS UNIQUES ----------
function registerOrbitScriptsForInstance(suffix) {
  const ORBIT = "orbitCamera_" + suffix;
  const MOUSE = "orbitCameraInputMouse_" + suffix;
  const TOUCH = "orbitCameraInputTouch_" + suffix;
  const KEYBD = "orbitCameraInputKeyboard_" + suffix;

  // ---------------- OrbitCamera ----------------
  var OrbitCamera = pc.createScript(ORBIT);

  OrbitCamera.attributes.add('distanceMax', { type: 'number', default: 20, title: 'Distance Max' });
  OrbitCamera.attributes.add('distanceMin', { type: 'number', default: 1, title: 'Distance Min' });
  OrbitCamera.attributes.add('pitchAngleMax', { type: 'number', default: 90, title: 'Pitch Angle Max (degrees)' });
  OrbitCamera.attributes.add('pitchAngleMin', { type: 'number', default: 0, title: 'Pitch Angle Min (degrees)' });
  OrbitCamera.attributes.add('yawAngleMax', { type: 'number', default: 360, title: 'Yaw Angle Max (degrees)' });
  OrbitCamera.attributes.add('yawAngleMin', { type: 'number', default: -360, title: 'Yaw Angle Min (degrees)' });
  OrbitCamera.attributes.add('minY', { type: 'number', default: 0, title: 'Minimum Y' });

  OrbitCamera.attributes.add('inertiaFactor', { type: 'number', default: 0.2, title: 'Inertia Factor' });
  OrbitCamera.attributes.add('focusEntity', { type: 'entity', title: 'Focus Entity' });
  OrbitCamera.attributes.add('frameOnStart', { type: 'boolean', default: true, title: 'Frame on Start' });

  Object.defineProperty(OrbitCamera.prototype, 'distance', {
      get: function () { return this._targetDistance; },
      set: function (value) { this._targetDistance = this._clampDistance(value); }
  });

  Object.defineProperty(OrbitCamera.prototype, 'orthoHeight', {
      get: function () { return this.entity.camera.orthoHeight; },
      set: function (value) { this.entity.camera.orthoHeight = Math.max(0, value); }
  });

  Object.defineProperty(OrbitCamera.prototype, 'pitch', {
      get: function () { return this._targetPitch; },
      set: function (value) { this._targetPitch = this._clampPitchAngle(value); }
  });

  Object.defineProperty(OrbitCamera.prototype, 'yaw', {
      get: function () { return this._targetYaw; },
      set: function (value) { this._targetYaw = this._clampYawAngle(value); }
  });

  Object.defineProperty(OrbitCamera.prototype, 'pivotPoint', {
      get: function () { return this._pivotPoint; },
      set: function (value) { this._pivotPoint.copy(value); }
  });

  OrbitCamera.prototype.focus = function (focusEntity) {
      this._buildAabb(focusEntity);
      var halfExtents = this._modelsAabb.halfExtents;
      var radius = Math.max(halfExtents.x, Math.max(halfExtents.y, halfExtents.z));
      this.distance = (radius * 1.5) / Math.sin(0.5 * this.entity.camera.fov * pc.math.DEG_TO_RAD);
      this._removeInertia();
      this._pivotPoint.copy(this._modelsAabb.center);
  };

  OrbitCamera.distanceBetween = new pc.Vec3();

  OrbitCamera.prototype.resetAndLookAtPoint = function (resetPoint, lookAtPoint) {
      this.pivotPoint.copy(lookAtPoint);
      this.entity.setPosition(resetPoint);
      this.entity.lookAt(lookAtPoint);
      var distance = OrbitCamera.distanceBetween;
      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();
  };

  OrbitCamera.prototype.resetAndLookAtEntity = function (resetPoint, entity) {
      this._buildAabb(entity);
      this.resetAndLookAtPoint(resetPoint, this._modelsAabb.center);
  };

  OrbitCamera.prototype.reset = function (yaw, pitch, distance) {
      this.pitch = pitch;
      this.yaw = yaw;
      this.distance = distance;
      this._removeInertia();
  };

  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();
  };

  // Helper: calc cam Y if pivot became 'pivot'
  OrbitCamera.prototype.worldCameraYForPivot = function(pivot) {
      var quat = new pc.Quat();
      quat.setFromEulerAngles(this._pitch, this._yaw, 0);
      var forward = new pc.Vec3();
      quat.transformVector(pc.Vec3.FORWARD, forward);
      var camPos = pivot.clone();
      camPos.add(forward.clone().scale(-this._distance));
      return camPos.y;
  };

  OrbitCamera.prototype.initialize = function () {
      var self = this;
      var onWindowResize = function () { self._checkAspectRatio(); };
      window.addEventListener('resize', onWindowResize, false);
      this._checkAspectRatio();

      this._modelsAabb = new pc.BoundingBox();
      this._buildAabb(this.focusEntity || this.app.root);

      this.entity.lookAt(this._modelsAabb.center);
      this._pivotPoint = new pc.Vec3();
      this._pivotPoint.copy(this._modelsAabb.center);

      var cameraQuat = this.entity.getRotation();
      this._yaw = this._calcYaw(cameraQuat);
      this._pitch = this._clampPitchAngle(this._calcPitch(cameraQuat, this._yaw));
      this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);

      this._distance = 0;
      this._targetYaw = this._yaw;
      this._targetPitch = this._pitch;

      if (this.frameOnStart) {
          this.focus(this.focusEntity || this.app.root);
      } else {
          var distanceBetween = new pc.Vec3();
          distanceBetween.sub2(this.entity.getPosition(), this._pivotPoint);
          this._distance = this._clampDistance(distanceBetween.length());
      }
      this._targetDistance = this._distance;

      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) {
          if (value) { this.focus(this.focusEntity || this.app.root); }
      });

      this.on('destroy', function () { window.removeEventListener('resize', onWindowResize, false); });
  };

  OrbitCamera.prototype.update = function (dt) {
      var t = this.inertiaFactor === 0 ? 1 : Math.min(dt / this.inertiaFactor, 1);
      this._distance = pc.math.lerp(this._distance, this._targetDistance, t);
      this._yaw = pc.math.lerp(this._yaw, this._targetYaw, t);
      this._pitch = pc.math.lerp(this._pitch, this._targetPitch, t);
      this._updatePosition();
  };

  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);
      position.add(this.pivotPoint);

      position.y = Math.max(position.y, this.minY);
      this.entity.setPosition(position);
  };

  OrbitCamera.prototype._removeInertia = function () {
      this._yaw = this._targetYaw;
      this._pitch = this._targetPitch;
      this._distance = this._targetDistance;
  };

  OrbitCamera.prototype._checkAspectRatio = function () {
      var height = this.app.graphicsDevice.height;
      var width = this.app.graphicsDevice.width;
      this.entity.camera.horizontalFov = (height > width);
  };

  OrbitCamera.prototype._buildAabb = function (entity) {
      var i, m, meshInstances = [];

      var renders = entity.findComponents('render');
      for (i = 0; i < renders.length; i++) {
          var render = renders[i];
          for (m = 0; m < render.meshInstances.length; m++) {
              meshInstances.push(render.meshInstances[m]);
          }
      }

      var models = entity.findComponents('model');
      for (i = 0; i < models.length; i++) {
          var model = models[i];
          for (m = 0; m < model.meshInstances.length; m++) {
              meshInstances.push(model.meshInstances[m]);
          }
      }

      var gsplats = entity.findComponents('gsplat');
      for (i = 0; i < gsplats.length; i++) {
          var gsplat = gsplats[i];
          var instance = gsplat.instance;
          if (instance?.meshInstance) {
              meshInstances.push(instance.meshInstance);
          }
      }

      for (i = 0; i < meshInstances.length; i++) {
          if (i === 0) {
              this._modelsAabb.copy(meshInstances[i].aabb);
          } else {
              this._modelsAabb.add(meshInstances[i].aabb);
          }
      }
  };

  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.RAD_TO_DEG;
  };

  OrbitCamera.prototype._clampDistance = function (distance) {
      if (this.distanceMax > 0) {
          return pc.math.clamp(distance, this.distanceMin, this.distanceMax);
      }
      return Math.max(distance, this.distanceMin);
  };

  OrbitCamera.prototype._clampPitchAngle = function (pitch) {
      return pc.math.clamp(pitch, this.pitchAngleMin, this.pitchAngleMax);
  };

  OrbitCamera.prototype._clampYawAngle = function (yaw) {
      return pc.math.clamp(yaw, -this.yawAngleMax, -this.yawAngleMin);
  };

  OrbitCamera.quatWithoutYaw = new pc.Quat();
  OrbitCamera.yawOffset = new pc.Quat();

  OrbitCamera.prototype._calcPitch = function (quat, yaw) {
      var quatWithoutYaw = OrbitCamera.quatWithoutYaw;
      var yawOffset = OrbitCamera.yawOffset;
      yawOffset.setFromEulerAngles(0, -yaw, 0);
      quatWithoutYaw.mul2(yawOffset, quat);
      var transformedForward = new pc.Vec3();
      quatWithoutYaw.transformVector(pc.Vec3.FORWARD, transformedForward);
      return Math.atan2(-transformedForward.y, -transformedForward.z) * pc.math.RAD_TO_DEG;
  };

  // ---------------- Mouse ----------------
  var OrbitCameraInputMouse = pc.createScript(MOUSE);
  OrbitCameraInputMouse.attributes.add('orbitSensitivity', { type: 'number', default: 0.3 });
  OrbitCameraInputMouse.attributes.add('distanceSensitivity', { type: 'number', default: 0.4 });

  OrbitCameraInputMouse.prototype.initialize = function () {
      this.orbitCamera = this.entity.script[ORBIT];

      if (this.orbitCamera) {
          var self = this;
          var onMouseOut = function () { self.onMouseOut(); };

          this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
          this.app.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);
          this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
          this.app.mouse.on(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);
          window.addEventListener('mouseout', onMouseOut, false);

          this.on('destroy', function () {
              this.app.mouse.off(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
              this.app.mouse.off(pc.EVENT_MOUSEUP, this.onMouseUp, this);
              this.app.mouse.off(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
              this.app.mouse.off(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);
              window.removeEventListener('mouseout', onMouseOut, false);
          });
      }

      this.app.mouse.disableContextMenu();

      this.lookButtonDown = false;
      this.panButtonDown = false;
      this.lastPoint = new pc.Vec2();
  };

  OrbitCameraInputMouse.fromWorldPoint = new pc.Vec3();
  OrbitCameraInputMouse.toWorldPoint = new pc.Vec3();
  OrbitCameraInputMouse.worldDiff = new pc.Vec3();

  OrbitCameraInputMouse.prototype.pan = function (screenPoint) {
      var fromWorldPoint = OrbitCameraInputMouse.fromWorldPoint;
      var toWorldPoint = OrbitCameraInputMouse.toWorldPoint;
      var worldDiff = OrbitCameraInputMouse.worldDiff;

      var camera = this.entity.camera;
      var distance = this.orbitCamera.distance;

      camera.screenToWorld(screenPoint.x, screenPoint.y, distance, fromWorldPoint);
      camera.screenToWorld(this.lastPoint.x, this.lastPoint.y, distance, toWorldPoint);

      worldDiff.sub2(toWorldPoint, fromWorldPoint);

      var proposedPivot = this.orbitCamera.pivotPoint.clone().add(worldDiff);
      var minY = this.orbitCamera.minY;
      var resultingY = this.orbitCamera.worldCameraYForPivot(proposedPivot);

      if (resultingY >= minY - 1e-4) {
          this.orbitCamera.pivotPoint.add(worldDiff);
      } else {
          worldDiff.y = 0;
          proposedPivot = this.orbitCamera.pivotPoint.clone().add(worldDiff);
          resultingY = this.orbitCamera.worldCameraYForPivot(proposedPivot);
          if (resultingY >= minY - 1e-4) {
              this.orbitCamera.pivotPoint.add(worldDiff);
          }
      }
  };

  OrbitCameraInputMouse.prototype.onMouseDown = function (event) {
      switch (event.button) {
          case pc.MOUSEBUTTON_LEFT: this.panButtonDown = true; break;
          case pc.MOUSEBUTTON_MIDDLE:
          case pc.MOUSEBUTTON_RIGHT: this.lookButtonDown = true; break;
      }
  };

  OrbitCameraInputMouse.prototype.onMouseUp = function (event) {
      switch (event.button) {
          case pc.MOUSEBUTTON_LEFT: this.panButtonDown = false; break;
          case pc.MOUSEBUTTON_MIDDLE:
          case pc.MOUSEBUTTON_RIGHT: this.lookButtonDown = false; break;
      }
  };

  OrbitCameraInputMouse.prototype.onMouseMove = function (event) {
      if (this.lookButtonDown) {
          var sens = this.orbitSensitivity;

          var deltaPitch = event.dy * sens;
          var deltaYaw = event.dx * sens;

          var currPitch = this.orbitCamera.pitch;
          var currYaw = this.orbitCamera.yaw;
          var currDist = this.orbitCamera.distance;
          var currPivot = this.orbitCamera.pivotPoint.clone();

          var camQuat = new pc.Quat();
          camQuat.setFromEulerAngles(currPitch, currYaw, 0);
          var forward = new pc.Vec3();
          camQuat.transformVector(pc.Vec3.FORWARD, forward);
          var preY = currPivot.y + (-forward.y) * currDist;

          var proposedPitch = currPitch - deltaPitch;
          var testQuat = new pc.Quat();
          testQuat.setFromEulerAngles(proposedPitch, currYaw, 0);
          var testForward = new pc.Vec3();
          testQuat.transformVector(pc.Vec3.FORWARD, testForward);
          var proposedY = currPivot.y + (-testForward.y) * currDist;

          var minY = this.orbitCamera.minY;
          var wouldGoBelow = proposedY < minY - 1e-4;

          if (wouldGoBelow && (proposedY < preY)) {
              this.orbitCamera.yaw = currYaw - deltaYaw;
          } else {
              this.orbitCamera.pitch = proposedPitch;
              this.orbitCamera.yaw = currYaw - deltaYaw;
          }
      } else if (this.panButtonDown) {
          this.pan(new pc.Vec2(event.x, event.y));
      }

      this.lastPoint.set(event.x, event.y);
  };

  OrbitCameraInputMouse.prototype.onMouseWheel = function (event) {
      if (this.entity.camera.projection === pc.PROJECTION_PERSPECTIVE) {
          this.orbitCamera.distance -= event.wheelDelta * this.distanceSensitivity * (this.orbitCamera.distance * 0.1);
      } else {
          this.orbitCamera.orthoHeight -= event.wheelDelta * this.distanceSensitivity * (this.orbitCamera.orthoHeight * 0.1);
      }
      event.event.preventDefault();
  };

  OrbitCameraInputMouse.prototype.onMouseOut = function () {
      this.lookButtonDown = false;
      this.panButtonDown = false;
  };

  // ---------------- Touch ----------------
  var OrbitCameraInputTouch = pc.createScript(TOUCH);
  OrbitCameraInputTouch.attributes.add('orbitSensitivity', { type: 'number', default: 0.6 });
  OrbitCameraInputTouch.attributes.add('distanceSensitivity', { type: 'number', default: 0.5 });

  OrbitCameraInputTouch.prototype.initialize = function () {
      this.orbitCamera = this.entity.script[ORBIT];
      this.lastTouchPoint = new pc.Vec2();
      this.lastPinchMidPoint = new pc.Vec2();
      this.lastPinchDistance = 0;

      if (this.orbitCamera && this.app.touch) {
          this.app.touch.on(pc.EVENT_TOUCHSTART, this.onTouchStartEndCancel, this);
          this.app.touch.on(pc.EVENT_TOUCHEND, this.onTouchStartEndCancel, this);
          this.app.touch.on(pc.EVENT_TOUCHCANCEL, this.onTouchStartEndCancel, this);
          this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);

          this.on('destroy', function () {
              this.app.touch.off(pc.EVENT_TOUCHSTART, this.onTouchStartEndCancel, this);
              this.app.touch.off(pc.EVENT_TOUCHEND, this.onTouchStartEndCancel, this);
              this.app.touch.off(pc.EVENT_TOUCHCANCEL, this.onTouchStartEndCancel, this);
              this.app.touch.off(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
          });
      }
  };

  OrbitCameraInputTouch.prototype.getPinchDistance = function (pointA, pointB) {
      var dx = pointA.x - pointB.x;
      var dy = pointA.y - pointB.y;
      return Math.sqrt((dx * dx) + (dy * dy));
  };

  OrbitCameraInputTouch.prototype.calcMidPoint = function (pointA, pointB, result) {
      result.set(pointB.x - pointA.x, pointB.y - pointA.y);
      result.mulScalar(0.5);
      result.x += pointA.x;
      result.y += pointA.y;
  };

  OrbitCameraInputTouch.prototype.onTouchStartEndCancel = function (event) {
      var touches = event.touches;
      if (touches.length === 1) {
          this.lastTouchPoint.set(touches[0].x, touches[0].y);
      } else if (touches.length === 2) {
          this.lastPinchDistance = this.getPinchDistance(touches[0], touches[1]);
          this.calcMidPoint(touches[0], touches[1], this.lastPinchMidPoint);
      }
  };

  OrbitCameraInputTouch.fromWorldPoint = new pc.Vec3();
  OrbitCameraInputTouch.toWorldPoint = new pc.Vec3();
  OrbitCameraInputTouch.worldDiff = new pc.Vec3();

  OrbitCameraInputTouch.prototype.pan = function (midPoint) {
      var fromWorldPoint = OrbitCameraInputTouch.fromWorldPoint;
      var toWorldPoint = OrbitCameraInputTouch.toWorldPoint;
      var worldDiff = OrbitCameraInputTouch.worldDiff;

      var camera = this.entity.camera;
      var distance = this.orbitCamera.distance;

      camera.screenToWorld(midPoint.x, midPoint.y, distance, fromWorldPoint);
      camera.screenToWorld(this.lastPinchMidPoint.x, this.lastPinchMidPoint.y, distance, toWorldPoint);

      worldDiff.sub2(toWorldPoint, fromWorldPoint);

      var proposedPivot = this.orbitCamera.pivotPoint.clone().add(worldDiff);
      var minY = this.orbitCamera.minY;
      var resultingY = this.orbitCamera.worldCameraYForPivot(proposedPivot);

      if (resultingY >= minY - 1e-4) {
          this.orbitCamera.pivotPoint.add(worldDiff);
      } else {
          worldDiff.y = 0;
          proposedPivot = this.orbitCamera.pivotPoint.clone().add(worldDiff);
          resultingY = this.orbitCamera.worldCameraYForPivot(proposedPivot);
          if (resultingY >= minY - 1e-4) {
              this.orbitCamera.pivotPoint.add(worldDiff);
          }
      }
  };

  OrbitCameraInputTouch.pinchMidPoint = new pc.Vec2();

  OrbitCameraInputTouch.prototype.onTouchMove = function (event) {
      var pinchMidPoint = OrbitCameraInputTouch.pinchMidPoint;
      var touches = event.touches;

      if (touches.length === 1) {
          var touch = touches[0];
          var sens = this.orbitSensitivity;

          var deltaPitch = (touch.y - this.lastTouchPoint.y) * sens;
          var deltaYaw = (touch.x - this.lastTouchPoint.x) * sens;

          var currPitch = this.orbitCamera.pitch;
          var currYaw = this.orbitCamera.yaw;
          var currDist = this.orbitCamera.distance;
          var currPivot = this.orbitCamera.pivotPoint.clone();

          var camQuat = new pc.Quat();
          camQuat.setFromEulerAngles(currPitch, currYaw, 0);
          var forward = new pc.Vec3();
          camQuat.transformVector(pc.Vec3.FORWARD, forward);
          var preY = currPivot.y + (-forward.y) * currDist;

          var proposedPitch = currPitch - deltaPitch;
          var testQuat = new pc.Quat();
          testQuat.setFromEulerAngles(proposedPitch, currYaw, 0);
          var testForward = new pc.Vec3();
          testQuat.transformVector(pc.Vec3.FORWARD, testForward);
          var proposedY = currPivot.y + (-testForward.y) * currDist;

          var minY = this.orbitCamera.minY;
          var wouldGoBelow = proposedY < minY - 1e-4;

          if (wouldGoBelow && (proposedY < preY)) {
              this.orbitCamera.yaw = currYaw - deltaYaw;
          } else {
              this.orbitCamera.pitch = proposedPitch;
              this.orbitCamera.yaw = currYaw - deltaYaw;
          }

          this.lastTouchPoint.set(touch.x, touch.y);
      } else if (touches.length === 2) {
          var currentPinchDistance = this.getPinchDistance(touches[0], touches[1]);
          var diffInPinchDistance = currentPinchDistance - this.lastPinchDistance;
          this.lastPinchDistance = currentPinchDistance;

          this.orbitCamera.distance -= (diffInPinchDistance * this.distanceSensitivity * 0.1) * (this.orbitCamera.distance * 0.1);

          this.calcMidPoint(touches[0], touches[1], pinchMidPoint);
          this.pan(pinchMidPoint);
          this.lastPinchMidPoint.copy(pinchMidPoint);
      }
  };

  // ---------------- Keyboard (par canvas) ----------------
  var OrbitCameraInputKeyboard = pc.createScript(KEYBD);

  OrbitCameraInputKeyboard.attributes.add('forwardSpeed', { type: 'number', default: 1.2 });
  OrbitCameraInputKeyboard.attributes.add('strafeSpeed',  { type: 'number', default: 1.2 });
  OrbitCameraInputKeyboard.attributes.add('orbitPitchSpeedDeg', { type: 'number', default: 90  });
  OrbitCameraInputKeyboard.attributes.add('orbitYawSpeedDeg',   { type: 'number', default: 120 });
  OrbitCameraInputKeyboard.attributes.add('zoomKeySensitivity', { type: 'number', default: 3.0 });

  OrbitCameraInputKeyboard.prototype.initialize = function () {
      this.orbitCamera = this.entity.script[ORBIT];

      this._keys = Object.create(null);
      this._active = false;

      var el = this.app.graphicsDevice.canvas;
      if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');

      var shouldBlock = function(ev) {
          if (!ev) return false;
          var k = ev.key;
          return k === 'ArrowUp' || k === 'ArrowDown' || k === 'ArrowLeft' || k === 'ArrowRight' ||
                 k === 'PageUp'  || k === 'PageDown' || k === 'Home'      || k === 'End' ||
                 k === ' ' || k === 'Spacebar' || (ev.ctrlKey && (k === 'ArrowUp' || k === 'ArrowDown'));
      };

      this._onKeyDown = (ev) => {
          if (!this._active) return;
          this._keys[ev.key] = true;
          if (shouldBlock(ev)) ev.preventDefault();
      };

      this._onKeyUp = (ev) => { this._keys[ev.key] = false; };
      this._onBlur = () => { this._keys = Object.create(null); };

      this._onEnter = () => {
          this._active = true;
          try { el.focus({ preventScroll: true }); } catch(e) { el.focus(); }
      };

      this._onLeave = () => {
          this._active = false;
          el.blur();
          this._keys = Object.create(null);
      };

      el.addEventListener('keydown', this._onKeyDown);
      el.addEventListener('keyup', this._onKeyUp);
      el.addEventListener('blur', this._onBlur);
      el.addEventListener('pointerenter', this._onEnter);
      el.addEventListener('pointerleave', this._onLeave);

      this.on('destroy', function () {
          el.removeEventListener('keydown', this._onKeyDown);
          el.removeEventListener('keyup', this._onKeyUp);
          el.removeEventListener('blur', this._onBlur);
          el.removeEventListener('pointerenter', this._onEnter);
          el.removeEventListener('pointerleave', this._onLeave);
      }, this);
  };

  OrbitCameraInputKeyboard.prototype._pressed = function(name) {
      return !!(this._keys[name] || this._keys[name + 'Left'] || this._keys[name + 'Right']);
  };

  OrbitCameraInputKeyboard.prototype.update = function (dt) {
      if (!this.orbitCamera) return;

      var up = !!this._keys['ArrowUp'];
      var dn = !!this._keys['ArrowDown'];
      var lt = !!this._keys['ArrowLeft'];
      var rt = !!this._keys['ArrowRight'];

      var shift = this._pressed('Shift');
      var ctrl  = this._pressed('Control');

      if (shift && (up || dn || lt || rt)) {
          var yawDir = (rt ? 1 : 0) - (lt ? 1 : 0);
          if (yawDir !== 0) {
              var dYaw = yawDir * this.orbitYawSpeedDeg * dt;
              this.orbitCamera.yaw = this.orbitCamera.yaw + dYaw;
          }

          var pitchDir = (up ? 1 : 0) - (dn ? 1 : 0);
          if (pitchDir !== 0) {
              var dPitch = pitchDir * this.orbitPitchSpeedDeg * dt;

              var currPitch = this.orbitCamera.pitch;
              var currYaw   = this.orbitCamera.yaw;
              var currDist  = this.orbitCamera.distance;
              var currPivot = this.orbitCamera.pivotPoint.clone();

              var camQuat = new pc.Quat().setFromEulerAngles(currPitch, currYaw, 0);
              var forward = new pc.Vec3(); camQuat.transformVector(pc.Vec3.FORWARD, forward);
              var preY = currPivot.y + (-forward.y) * currDist;

              var testPitch = currPitch + dPitch;
              var testQuat = new pc.Quat().setFromEulerAngles(testPitch, currYaw, 0);
              var testForward = new pc.Vec3(); testQuat.transformVector(pc.Vec3.FORWARD, testForward);
              var proposedY = currPivot.y + (-testForward.y) * currDist;

              var minY = this.orbitCamera.minY;
              var wouldGoBelow = proposedY < minY - 1e-4;

              if (!(wouldGoBelow && (proposedY < preY))) {
                  this.orbitCamera.pitch = testPitch;
              }
          }
          return;
      }

      if (ctrl && (up || dn)) {
          var zoomSign = (up ? 1 : 0) - (dn ? 1 : 0);
          if (zoomSign !== 0) {
              if (this.entity.camera.projection === pc.PROJECTION_PERSPECTIVE) {
                  var dz = zoomSign * this.zoomKeySensitivity * (this.orbitCamera.distance * 0.5) * dt;
                  this.orbitCamera.distance -= dz;
              } else {
                  var doh = zoomSign * this.zoomKeySensitivity * (this.orbitCamera.orthoHeight * 0.5) * dt;
                  this.orbitCamera.orthoHeight -= doh;
              }
          }
          return;
      }

      var moveVert = (up ? 1 : 0) - (dn ? 1 : 0);
      var moveRight = (rt ? 1 : 0) - (lt ? 1 : 0);

      if (moveVert === 0 && moveRight === 0) return;

      var dist = Math.max(0.1, this.orbitCamera.distance);
      var speedV = this.forwardSpeed * dist;
      var speedR = this.strafeSpeed  * dist;

      var dy = moveVert * speedV * dt;
      if (dy !== 0) {
          var currentCamY = this.orbitCamera.worldCameraYForPivot(this.orbitCamera.pivotPoint);
          var minY = this.orbitCamera.minY;
          var proposedCamY = currentCamY + dy;
          if (proposedCamY < minY) {
              dy = Math.max(dy, minY - currentCamY);
          }
          if (dy !== 0) {
              this.orbitCamera._pivotPoint.y += dy;
          }
      }

      var right = this.entity.right.clone(); right.y = 0; if (right.lengthSq() > 1e-8) right.normalize();
      var dx = moveRight * speedR * dt;
      if (dx !== 0) {
          this.orbitCamera._pivotPoint.add(right.mulScalar(dx));
      }
  };

  // renvoie les noms pour créer les scripts
  return { ORBIT, MOUSE, TOUCH, KEYBD };
}

// ---------------------------------------------------------------------------

let pc;
export let app = null;
let cameraEntity = null;
let modelEntity = null;
let viewerInitialized = false;
let resizeObserver = null;

let chosenCameraX, chosenCameraY, chosenCameraZ;
let minZoom, maxZoom, minAngle, maxAngle, minAzimuth, maxAzimuth, minPivotY, minY;
let modelX, modelY, modelZ, modelScale, modelRotationX, modelRotationY, modelRotationZ;

let presentoirScaleX, presentoirScaleY, presentoirScaleZ;

let sogsUrl, glbUrl, presentoirUrl;

let color_bg_hex, color_bg, espace_expo_bool;

export async function initializeViewer(config, instanceId) {
  if (viewerInitialized) return;

  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
  const isMobile = isIOS || /Android/i.test(navigator.userAgent);

  // Params
  sogsUrl = config.sogs_json_url;
  glbUrl = (config.glb_url !== undefined) ? config.glb_url : "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/ressources/espace_expo/sol_blanc_2.glb";
  presentoirUrl = (config.presentoir_url !== undefined) ? config.presentoir_url : "https://huggingface.co/datasets/MikaFil/viewer_gs/resolve/main/ressources/espace_expo/sol_blanc_2.glb";
  minZoom = parseFloat(config.minZoom || "1");
  maxZoom = parseFloat(config.maxZoom || "20");
  minAngle = parseFloat(config.minAngle || "-45");
  maxAngle = parseFloat(config.maxAngle || "90");
  minAzimuth = (config.minAzimuth !== undefined) ? parseFloat(config.minAzimuth) : -360;
  maxAzimuth = (config.maxAzimuth !== undefined) ? parseFloat(config.maxAzimuth) : 360;
  minPivotY = parseFloat(config.minPivotY || "0");
  minY = (config.minY !== undefined) ? parseFloat(config.minY) : 0;

  modelX = (config.modelX !== undefined) ? parseFloat(config.modelX) : 0;
  modelY = (config.modelY !== undefined) ? parseFloat(config.modelY) : 0;
  modelZ = (config.modelZ !== undefined) ? parseFloat(config.modelZ) : 0;
  modelScale = (config.modelScale !== undefined) ? parseFloat(config.modelScale) : 1;
  modelRotationX = (config.modelRotationX !== undefined) ? parseFloat(config.modelRotationX) : 0;
  modelRotationY = (config.modelRotationY !== undefined) ? parseFloat(config.modelRotationY) : 0;
  modelRotationZ = (config.modelRotationZ !== undefined) ? parseFloat(config.modelRotationZ) : 0;

  presentoirScaleX = (config.presentoirScaleX !== undefined) ? parseFloat(config.presentoirScaleX) : 0;
  presentoirScaleY = (config.presentoirScaleY !== undefined) ? parseFloat(config.presentoirScaleY) : 0;
  presentoirScaleZ = (config.presentoirScaleZ !== undefined) ? parseFloat(config.presentoirScaleZ) : 0;

  const cameraX = (config.cameraX !== undefined) ? parseFloat(config.cameraX) : 0;
  const cameraY = (config.cameraY !== undefined) ? parseFloat(config.cameraY) : 2;
  const cameraZ = (config.cameraZ !== undefined) ? parseFloat(config.cameraZ) : 5;
  const cameraXPhone = (config.cameraXPhone !== undefined) ? parseFloat(config.cameraXPhone) : cameraX;
  const cameraYPhone = (config.cameraYPhone !== undefined) ? parseFloat(config.cameraYPhone) : cameraY;
  const cameraZPhone = (config.cameraZPhone !== undefined) ? parseFloat(config.cameraZPhone) : (cameraZ * 1.5);

  color_bg_hex = (config.canvas_background !== undefined) ? config.canvas_background : "#FFFFFF";
  espace_expo_bool = (config.espace_expo_bool !== undefined) ? config.espace_expo_bool : false;
  color_bg = hexToRgbaArray(color_bg_hex);

  chosenCameraX = isMobile ? cameraXPhone : cameraX;
  chosenCameraY = isMobile ? cameraYPhone : cameraY;
  chosenCameraZ = isMobile ? cameraZPhone : cameraZ;

  // Canvas
  const canvasId = "canvas-" + instanceId;
  const progressDialog = document.getElementById("progress-dialog-" + instanceId);
  const progressIndicator = document.getElementById("progress-indicator-" + instanceId);
  const viewerContainer = document.getElementById("viewer-container-" + instanceId);

  let oldCanvas = document.getElementById(canvasId);
  if (oldCanvas) oldCanvas.remove();

  const canvas = document.createElement("canvas");
  canvas.id = canvasId;
  canvas.className = "ply-canvas";
  canvas.style.width = "100%";
  canvas.style.height = "100%";
  canvas.setAttribute("tabindex", "0");
  viewerContainer.insertBefore(canvas, progressDialog);

  canvas.style.touchAction = "none";
  canvas.style.webkitTouchCallout = "none";
  canvas.addEventListener("gesturestart", (e) => e.preventDefault());
  canvas.addEventListener("gesturechange", (e) => e.preventDefault());
  canvas.addEventListener("gestureend", (e) => e.preventDefault());
  canvas.addEventListener("dblclick", (e) => e.preventDefault());
  canvas.addEventListener("touchstart", (e) => {
    if (e.touches.length > 1) e.preventDefault();
  }, { passive: false });
  canvas.addEventListener("wheel", (e) => { e.preventDefault(); }, { passive: false });

  // focus / blur au survol (pour clavier local)
  const focusCanvas = () => { try { canvas.focus({ preventScroll: true }); } catch (e) { canvas.focus(); } };
  canvas.addEventListener('pointerenter', focusCanvas);
  canvas.addEventListener('pointerleave', () => canvas.blur());

  progressDialog.style.display = "block";

  if (!pc) {
    pc = await import("https://esm.run/playcanvas");
    window.pc = pc;
  }

  // Create app
  const device = await pc.createGraphicsDevice(canvas, {
    deviceTypes: ["webgl2"],
    glslangUrl: "https://playcanvas.vercel.app/static/lib/glslang/glslang.js",
    twgslUrl: "https://playcanvas.vercel.app/static/lib/twgsl/twgsl.js",
    antialias: false
  });
  device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);

  const opts = new pc.AppOptions();
  opts.graphicsDevice = device;
  opts.mouse = new pc.Mouse(canvas);
  opts.touch = new pc.TouchDevice(canvas);
  // ⚠️ on ne crée PAS pc.Keyboard ici ; notre clavier est par-canvas dans le script
  opts.componentSystems = [
    pc.RenderComponentSystem,
    pc.CameraComponentSystem,
    pc.LightComponentSystem,
    pc.ScriptComponentSystem,
    pc.GSplatComponentSystem,
    pc.CollisionComponentSystem,
    pc.RigidbodyComponentSystem
  ];
  opts.resourceHandlers = [
    pc.TextureHandler,
    pc.ContainerHandler,
    pc.ScriptHandler,
    pc.GSplatHandler
  ];

  app = new pc.Application(canvas, opts);
  app.setCanvasFillMode(pc.FILLMODE_NONE);
  app.setCanvasResolution(pc.RESOLUTION_AUTO);

  resizeObserver = new ResizeObserver((entries) => {
    entries.forEach((entry) => {
      app.resizeCanvas(entry.contentRect.width, entry.contentRect.height);
    });
  });
  resizeObserver.observe(viewerContainer);

  window.addEventListener("resize", () =>
    app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight)
  );

  app.on("destroy", () => {
    resizeObserver.disconnect();
    canvas.removeEventListener('pointerenter', focusCanvas);
    canvas.removeEventListener('pointerleave', () => canvas.blur());
  });

  // Assets (sans orbit-camera.js)
  const assets = {
    sogs: new pc.Asset("gsplat", "gsplat", { url: sogsUrl }),
    glb: new pc.Asset("glb", "container", { url: glbUrl }),
    presentoir: new pc.Asset("presentoir", "container", { url: presentoirUrl })
  };
  for (const key in assets) app.assets.add(assets[key]);

  const loader = new pc.AssetListLoader(Object.values(assets), app.assets);
  loader.load(async () => {
    // Enregistre les scripts d’orbite pour CETTE instance
    const ScriptNames = registerOrbitScriptsForInstance(instanceId);

    app.start();
    progressDialog.style.display = "none";

    modelEntity = new pc.Entity("model");
    modelEntity.addComponent("gsplat", { asset: assets.sogs });
    modelEntity.setLocalPosition(modelX, modelY, modelZ);
    modelEntity.setLocalEulerAngles(modelRotationX, modelRotationY, modelRotationZ);
    modelEntity.setLocalScale(modelScale, modelScale, modelScale);
    app.root.addChild(modelEntity);

    const glbEntity = assets.glb.resource.instantiateRenderEntity();
    app.root.addChild(glbEntity);

    const presentoirEntity = assets.presentoir.resource.instantiateRenderEntity();
    presentoirEntity.setLocalScale(presentoirScaleX, presentoirScaleY, presentoirScaleZ);
    app.root.addChild(presentoirEntity);

    if (!espace_expo_bool) {
      let matSol = new pc.StandardMaterial();
      matSol.blendType = pc.BLEND_NONE;
      matSol.emissive = new pc.Color(color_bg);
      matSol.emissiveIntensity = 1;
      matSol.useLighting = false;
      matSol.update();

      traverse(presentoirEntity, (node) => {
        if (node.render && node.render.meshInstances) {
          for (let mi of node.render.meshInstances) mi.material = matSol;
        }
      });
      traverse(glbEntity, (node) => {
        if (node.render && node.render.meshInstances) {
          for (let mi of node.render.meshInstances) mi.material = matSol;
        }
      });
    }

    cameraEntity = new pc.Entity("camera");
    cameraEntity.addComponent("camera", {
      clearColor: new pc.Color(color_bg),
      nearClip: 0.001,
      farClip: 100
    });
    cameraEntity.setPosition(chosenCameraX, chosenCameraY, chosenCameraZ);
    cameraEntity.lookAt(modelEntity.getPosition());
    cameraEntity.addComponent("script");
    cameraEntity.script.create(ScriptNames.ORBIT, {
      attributes: {
        focusEntity: modelEntity,
        inertiaFactor: 0.2,
        distanceMax: maxZoom,
        distanceMin: minZoom,
        pitchAngleMax: maxAngle,
        pitchAngleMin: minAngle,
        yawAngleMax: maxAzimuth,
        yawAngleMin: minAzimuth,
        minY: minY,
        frameOnStart: false
      }
    });
    cameraEntity.script.create(ScriptNames.MOUSE);
    cameraEntity.script.create(ScriptNames.TOUCH);
    cameraEntity.script.create(ScriptNames.KEYBD, {
      attributes: {
        forwardSpeed: 1.2,
        strafeSpeed: 1.2
      }
    });
    app.root.addChild(cameraEntity);

    app.resizeCanvas(viewerContainer.clientWidth, viewerContainer.clientHeight);
    app.once("update", () => resetViewerCamera());

    // Tooltips
    try {
      if (config.tooltips_url) {
        import("./tooltips.js")
          .then((tooltipsModule) => {
            tooltipsModule.initializeTooltips({
              app,
              cameraEntity,
              modelEntity,
              tooltipsUrl: config.tooltips_url,
              defaultVisible: !!config.showTooltipsDefault,
              moveDuration: config.tooltipMoveDuration || 0.6
            });
          })
          .catch(() => {});
      }
    } catch (e) {}

    viewerInitialized = true;
  });
}

export function resetViewerCamera() {
  try {
    if (!cameraEntity || !modelEntity || !app) return;
    // le nom du script d’orbite dépend de l’instance ; on le retrouve automatiquement
    const orbitKey = Object.keys(cameraEntity.script._scriptsIndex).find(k => k.startsWith('orbitCamera_'));
    if (!orbitKey) return;
    const orbitCam = cameraEntity.script[orbitKey];
    if (!orbitCam) return;

    const modelPos = modelEntity.getPosition();
    const tempEnt = new pc.Entity();
    tempEnt.setPosition(cameraEntity.getPosition());
    tempEnt.lookAt(modelPos);

    const dist = new pc.Vec3()
      .sub2(new pc.Vec3(cameraEntity.getPosition().x, cameraEntity.getPosition().y, cameraEntity.getPosition().z), modelPos)
      .length();

    cameraEntity.setPosition(cameraEntity.getPosition());
    cameraEntity.lookAt(modelPos);

    orbitCam.pivotPoint = modelPos.clone();
    orbitCam._targetDistance = dist;
    orbitCam._distance = dist;

    const rot = tempEnt.getRotation();
    const fwd = new pc.Vec3();
    rot.transformVector(pc.Vec3.FORWARD, fwd);

    const yaw = Math.atan2(-fwd.x, -fwd.z) * pc.math.RAD_TO_DEG;
    const yawQuat = new pc.Quat().setFromEulerAngles(0, -yaw, 0);
    const rotNoYaw = new pc.Quat().mul2(yawQuat, rot);
    const fNoYaw = new pc.Vec3();
    rotNoYaw.transformVector(pc.Vec3.FORWARD, fNoYaw);
    const pitch = Math.atan2(fNoYaw.y, -fNoYaw.z) * pc.math.RAD_TO_DEG;

    orbitCam._targetYaw = yaw;
    orbitCam._yaw = yaw;
    orbitCam._targetPitch = pitch;
    orbitCam._pitch = pitch;
    if (orbitCam._updatePosition) orbitCam._updatePosition();

    tempEnt.destroy();
  } catch (e) {
    console.error("[VIEWER DEBUG] resetViewerCamera error", e);
  }
}