@preference-sl/pref-viewer 2.17.2-beta.0 → 2.17.2-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@preference-sl/pref-viewer",
-    "version": "2.17.2-beta.0",
+    "version": "2.17.2-beta.2",
     "description": "Web Component to preview GLTF models with Babylon.js",
     "author": "Alex Moreno Palacio <amoreno@preference.es>",
     "scripts": {

package/src/babylonjs-controller.js

@@ -3396,7 +3396,8 @@ export default class BabylonJSController {
             getViewport: () => ({ width: this.#canvas.clientWidth, height: this.#canvas.clientHeight }),
             getCulture: this.#viewCubeConfig.getCulture,
             onLayout: this.#viewCubeConfig.onLayout,
-            requestRender: () => this.#requestRender({ frames: 2 }),
+            // A cube drag is pointer interaction like a main-canvas drag: keep the loop continuous for the same window.
+            requestRender: (options) => this.#requestRender({ frames: 2, continuousMs: options?.interaction ? BabylonJSController.config.render.interactionMs : 0 }),
         });
     }
 

package/src/babylonjs-view-cube-controller.js

@@ -139,7 +139,7 @@ export default class BabylonJSViewCubeController {
      * @param {function(import("@babylonjs/core").Camera|null|undefined): boolean} host.isLocked - Reports whether navigation is forbidden for the supplied camera, including unavailable cameras or active XR.
      * @param {function(): (ViewCubeBounds|null)} host.getBounds - Returns current model-only world bounds and their eight corners; null when geometry is unusable. Excludes the environment.
      * @param {function(): {width: number, height: number}} host.getViewport - Returns the current scene viewport dimensions in CSS pixels.
-     * @param {function(): void} host.requestRender - Requests rendering through the host scheduler after accepted navigation.
+     * @param {function(Object=): void} host.requestRender - Requests rendering through the host scheduler after accepted navigation; `{ interaction: true }` marks a pointer drag step, for which the host keeps rendering continuously as it does for its own canvas drags.
      * @param {function(): string} [host.getCulture] - Returns the current localization culture; omitted callbacks use the translator's default culture.
      * @param {function(number, number): void} [host.onLayout] - Receives the measured cube viewport height and scene viewport height, in CSS pixels; zero cube height clears the menu offset, and disposal reports (0, 0).
      * @param {function(ViewCubeRendererOptions): BabylonJSViewCubeRenderer} [host.createRenderer] - Renderer factory, mainly for tests; defaults to a BabylonJSViewCubeRenderer with its own Engine.
@@ -581,7 +581,9 @@ export default class BabylonJSViewCubeController {
             const direction = directionFromAngles(applyDragDelta(angles, dAlpha, dBeta));
             this.#writePose(camera, pose.target.add(new Vector3(direction.x, direction.y, direction.z).scale(pose.distance)), pose.target, pose.distance);
         }
-        this.#host.requestRender();
+        // A drag is pointer interaction: the host keeps its loop continuous for its interaction window, as it does for a
+        // main-canvas drag. A plain one-frame request would let its idle throttle pace the drag (seen at ~8 fps).
+        this.#host.requestRender({ interaction: true });
     }
 
     /**

package/src/babylonjs-view-cube-renderer.js

@@ -168,7 +168,8 @@ export default class BabylonJSViewCubeRenderer {
     /**
      * Orients the cube like the host camera and follows its projection. An orthographic host gives an orthographic
      * cube (radius 5, extents +-1.15). A perspective host gives a perspective cube with the host's vertical fov at
-     * radius 1.15 / tan(fov / 2), so the cube keeps the same on-screen size.
+     * radius 0.5 + 1.15 / tan(fov / 2), so the near face and its corner knobs keep the on-screen size of the
+     * orthographic layout (the rest of the cube foreshortens behind it).
      * @param {{alpha: number, beta: number, mode?: number, fov?: number}} pose - Host camera angles in radians (beta is clamped away from the poles), projection mode (Camera.ORTHOGRAPHIC_CAMERA or Camera.PERSPECTIVE_CAMERA; absent keeps the last one) and vertical field of view in radians (absent or not a finite positive number keeps the last one, 0.8 initially).
      * @returns {void}
      */
@@ -393,13 +394,14 @@ export default class BabylonJSViewCubeRenderer {
         return best?.id ?? null;
     }
 
-    // Orthographic: fixed radius and extents. Perspective: the host fov and the radius that frames the same half extent.
+    // Orthographic: fixed radius and extents. Perspective: the host fov and the radius that frames the same half extent
+    // at the near face plane (CUBE_HALF in front of the centre), where the corner knobs and the face in view are drawn.
     #applyProjection(camera) {
         if (this.#mode === Camera.PERSPECTIVE_CAMERA) {
             camera.mode = Camera.PERSPECTIVE_CAMERA;
             camera.fovMode = Camera.FOVMODE_VERTICAL_FIXED;
             camera.fov = this.#fov;
-            camera.radius = ORTHO_EXTENT / Math.tan(this.#fov / 2);
+            camera.radius = CUBE_HALF + ORTHO_EXTENT / Math.tan(this.#fov / 2);
             // A wide fov brings the camera closer than the margin: keep the near plane positive and before the nearest corner.
             camera.minZ = Math.max(camera.radius - PERSPECTIVE_DEPTH_MARGIN, Math.min(0.1, (camera.radius - CORNER_DISTANCE) / 2));
             camera.maxZ = camera.radius + PERSPECTIVE_DEPTH_MARGIN;