@mcolabs/threebox-plugin 4.0.2 → 4.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mcolabs/threebox-plugin",
-    "version": "4.0.2",
+    "version": "4.0.4",
     "type": "module",
     "description": "A Three.js plugin for Mapbox GL JS, using the CustomLayerInterface feature. Provides convenient methods to manage objects in lnglat coordinates, and to synchronize the map and scene cameras.",
     "main": "dist/threebox.cjs",

package/src/animation/AnimationManager.js

@@ -456,7 +456,6 @@ AnimationManager.prototype = {
 					if (item.type === 'playDefault') {
 						object.activateAllActions();
 						object.isPlaying = true;
-						object.animationMethod = requestAnimationFrame(this.update);
 						object.mixer.update(object.clock.getDelta());
 						object.threebox.map.repaint = true;
 					}

package/src/camera/CameraSync.js

@@ -13,13 +13,11 @@ function CameraSync(map, camera, world) {
     this.active = true;
 
     this.camera.matrixAutoUpdate = false; // We're in charge of the camera now!
-    this.camera.matrixWorldAutoUpdate = false; // Three.js r150+: prevent auto world matrix recalculation
 
     // Postion and configure the world group so we can scale it appropriately when the camera zooms
     this.world = world || new THREE.Group();
     this.world.position.x = this.world.position.y = ThreeboxConstants.WORLD_SIZE / 2
     this.world.matrixAutoUpdate = false;
-    this.world.matrixWorldAutoUpdate = false; // Three.js r150+: prevent auto world matrix recalculation
 
     // set up basic camera state
     this.state = {
@@ -60,6 +58,17 @@ CameraSync.prototype = {
 
         const t = this.map.transform;
         this.camera.aspect = t.width / t.height; //bug fixed, if aspect is not reset raycast will fail on map resize
+
+        // Check if canvas size changed and update renderer for correct raycasting
+        if (this.map.tb && this.map.tb.renderer) {
+            const canvas = this.map.getCanvas();
+            if (this._lastCanvasWidth !== canvas.clientWidth || this._lastCanvasHeight !== canvas.clientHeight) {
+                this._lastCanvasWidth = canvas.clientWidth;
+                this._lastCanvasHeight = canvas.clientHeight;
+                this.map.tb.renderer.setSize(canvas.clientWidth, canvas.clientHeight);
+            }
+        }
+
         const offset = t.centerOffset || new THREE.Vector3(); //{ x: t.width / 2, y: t.height / 2 };
         let farZ = 0;
         let furthestDistance = 0;
@@ -114,6 +123,8 @@ CameraSync.prototype = {
         }
         this.camera.projectionMatrix.elements[8] = -offset.x * 2 / t.width;
         this.camera.projectionMatrix.elements[9] = offset.y * 2 / t.height;
+        // Update inverse projection matrix for raycasting
+        this.camera.projectionMatrixInverse.copy(this.camera.projectionMatrix).invert();
 
         // Unlike the Mapbox GL JS camera, separate camera translation and rotation out into its world matrix
         // If this is applied directly to the projection matrix, it will work OK but break raycasting