Rename pivot to scenePivot in ModelScene and ARRenderer to avoid conflict with Three.js r183 (#5144)

Author: diegoteran

packages/model-viewer/src/three-components/ARRenderer.ts

@@ -445,7 +445,7 @@ export class ARRenderer extends EventDispatcher<
     const intersection =
         this.placementBox!.controllerIntersection(scene, controller);
     if (intersection != null) {
-      const bbox = new Box3().setFromObject(scene.pivot);
+      const bbox = new Box3().setFromObject(scene.scenePivot);
       const footprintY = bbox.min.y +
           FOOTPRINT__INTERSECT_THRESHOLD;  // Small threshold above base
 
@@ -456,11 +456,11 @@ export class ARRenderer extends EventDispatcher<
           this.selectedXRController.userData.line.visible = false;
           if (scene.canScale && this.isWorldSpaceReady()) {
             this.isTwoHandInteraction = true;
-            this.firstRatio = this.controllerSeparation() / scene.pivot.scale.x;
+            this.firstRatio = this.controllerSeparation() / scene.scenePivot.scale.x;
             this.scaleLine.visible = true;
           }
         } else {
-          controller.attach(scene.pivot);
+          controller.attach(scene.scenePivot);
         }
         this.selectedXRController = controller;
         scene.setShadowIntensity(0.01);
@@ -475,7 +475,7 @@ export class ARRenderer extends EventDispatcher<
             this.xrController2?.userData.isSelected) {
           if (scene.canScale && this.isWorldSpaceReady()) {
             this.isTwoHandInteraction = true;
-            this.firstRatio = this.controllerSeparation() / scene.pivot.scale.x;
+            this.firstRatio = this.controllerSeparation() / scene.scenePivot.scale.x;
             this.scaleLine.visible = true;
           }
         } else {
@@ -510,16 +510,16 @@ export class ARRenderer extends EventDispatcher<
     }
     const scene = this.presentedScene!;
     // drop on floor
-    scene.attach(scene.pivot);
+    scene.attach(scene.scenePivot);
     this.selectedXRController = null;
     this.goalYaw = Math.atan2(
-        scene.pivot.matrix.elements[8], scene.pivot.matrix.elements[10]);
-    this.goalPosition.x = scene.pivot.position.x;
-    this.goalPosition.z = scene.pivot.position.z;
+        scene.scenePivot.matrix.elements[8], scene.scenePivot.matrix.elements[10]);
+    this.goalPosition.x = scene.scenePivot.position.x;
+    this.goalPosition.z = scene.scenePivot.position.z;
 
     // For world-space mode after initial placement, preserve Y position
     if (this.isWorldSpaceReady()) {
-      this.goalPosition.y = scene.pivot.position.y;
+      this.goalPosition.y = scene.scenePivot.position.y;
     }
 
     const menuPanel = this.menuPanel;
@@ -632,10 +632,10 @@ export class ARRenderer extends EventDispatcher<
         this.menuPanel = null;
       }
 
-      scene.add(scene.pivot);
-      scene.pivot.quaternion.set(0, 0, 0, 1);
-      scene.pivot.position.set(0, 0, 0);
-      scene.pivot.scale.set(1, 1, 1);
+      scene.add(scene.scenePivot);
+      scene.scenePivot.quaternion.set(0, 0, 0, 1);
+      scene.scenePivot.position.set(0, 0, 0);
+      scene.scenePivot.scale.set(1, 1, 1);
       scene.setShadowOffset(0);
       const yaw = this.turntableRotation;
       if (yaw != null) {
@@ -753,8 +753,8 @@ export class ARRenderer extends EventDispatcher<
 
   private placeInitially() {
     const scene = this.presentedScene!;
-    const {pivot, element} = scene;
-    const {position} = pivot;
+    const {scenePivot, element} = scene;
+    const {position} = scenePivot;
     const xrCamera = scene.getCamera();
 
     const {width, height} = this.overlay!.getBoundingClientRect();
@@ -786,7 +786,7 @@ export class ARRenderer extends EventDispatcher<
 
       // Set initial position and scale immediately for world-space
       position.copy(optimalPosition);
-      pivot.scale.set(optimalScale, optimalScale, optimalScale);
+      scenePivot.scale.set(optimalScale, optimalScale, optimalScale);
 
       // Mark that initial placement is done
       this.worldSpaceInitialPlacementDone = true;
@@ -926,7 +926,7 @@ export class ARRenderer extends EventDispatcher<
       const {separation, angle} = this.fingerPolar(fingers);
       this.lastAngle = angle;  // Initialize lastAngle, do not update goalYaw
       if (this.firstRatio === 0) {
-        this.firstRatio = separation / scene.pivot.scale.x;
+        this.firstRatio = separation / scene.scenePivot.scale.x;
       }
       if (scene.canScale) {
         this.setScale(separation);
@@ -982,7 +982,7 @@ export class ARRenderer extends EventDispatcher<
     }
     const fingers = frame.getHitTestResultsForTransientInput(hitSource);
     const scene = this.presentedScene!;
-    const scale = scene.pivot.scale.x;
+    const scale = scene.scenePivot.scale.x;
 
     // Robust two-finger gesture handling
     if (fingers.length === 2) {
@@ -1072,14 +1072,14 @@ export class ARRenderer extends EventDispatcher<
     }
   }
 
-  private applyXRControllerRotation(controller: XRController, pivot: Object3D) {
+  private applyXRControllerRotation(controller: XRController, scenePivot: Object3D) {
     if (!controller.userData.turning) {
       return;
     }
     const angle = (controller.position.x - controller.userData.initialX) *
         ROTATION_SENSIVITY;
     this.deltaRotation.setFromAxisAngle(AXIS_Y, angle);
-    pivot.quaternion.multiplyQuaternions(this.deltaRotation, pivot.quaternion);
+    scenePivot.quaternion.multiplyQuaternions(this.deltaRotation, scenePivot.quaternion);
   }
 
   private handleScalingInXR(scene: ModelScene, delta: number) {
@@ -1095,20 +1095,20 @@ export class ARRenderer extends EventDispatcher<
       this.scaleLine.scale.z = -dist;
       this.scaleLine.lookAt(this.xrController2.position);
     }
-    const oldScale = scene.pivot.scale.x;
+    const oldScale = scene.scenePivot.scale.x;
     if (this.goalScale !== oldScale) {
       const newScale =
           this.scaleDamper.update(oldScale, this.goalScale, delta, 1);
-      scene.pivot.scale.set(newScale, newScale, newScale);
+      scene.scenePivot.scale.set(newScale, newScale, newScale);
     }
   }
 
   private updatePivotPosition(scene: ModelScene, delta: number) {
-    const {pivot} = scene;
+    const {scenePivot} = scene;
     const box = this.placementBox!;
     const boundingRadius = scene.boundingSphere.radius;
     const goal = this.goalPosition;
-    const position = pivot.position;
+    const position = scenePivot.position;
 
     let source = ChangeSource.NONE;
     if (!goal.equals(position)) {
@@ -1122,7 +1122,7 @@ export class ARRenderer extends EventDispatcher<
       if (this.xrMode === XRMode.SCREEN_SPACE && !this.isTranslating) {
         const offset = goal.y - y;
         if (this.placementComplete && this.placeOnWall === false) {
-          box.offsetHeight = offset / scene.pivot.scale.x;
+          box.offsetHeight = offset / scene.scenePivot.scale.x;
           scene.setShadowOffset(offset);
         } else if (offset === 0) {
           this.placementComplete = true;
@@ -1146,10 +1146,10 @@ export class ARRenderer extends EventDispatcher<
     // placement
     if (this.xrMode === XRMode.WORLD_SPACE &&
         !this.worldSpaceInitialPlacementDone &&
-        this.goalScale !== pivot.scale.x) {
+        this.goalScale !== scenePivot.scale.x) {
       const newScale =
-          this.scaleDamper.update(pivot.scale.x, this.goalScale, delta, 1);
-      pivot.scale.set(newScale, newScale, newScale);
+          this.scaleDamper.update(scenePivot.scale.x, this.goalScale, delta, 1);
+      scenePivot.scale.set(newScale, newScale, newScale);
     }
 
     scene.updateTarget(delta);
@@ -1161,9 +1161,9 @@ export class ARRenderer extends EventDispatcher<
   private updateYaw(scene: ModelScene, delta: number) {
     // yaw must be updated last, since this also updates the shadow position.
     quaternion.setFromAxisAngle(vector3.set(0, 1, 0), this.goalYaw);
-    const angle = scene.pivot.quaternion.angleTo(quaternion);
+    const angle = scene.scenePivot.quaternion.angleTo(quaternion);
     const angleStep = angle - this.yawDamper.update(angle, 0, delta, Math.PI);
-    scene.pivot.quaternion.rotateTowards(quaternion, angleStep);
+    scene.scenePivot.quaternion.rotateTowards(quaternion, angleStep);
   }
 
   private updateMenuPanel(scene: ModelScene, box: PlacementBox, delta: number) {
@@ -1175,15 +1175,15 @@ export class ARRenderer extends EventDispatcher<
 
   private applyXRInputToScene(delta: number) {
     const scene = this.presentedScene!;
-    const pivot = scene.pivot;
+    const scenePivot = scene.scenePivot;
     const box = this.placementBox!;
 
     this.updatePlacementBoxOpacity(box, delta);
     this.updateTwoHandInteractionState();
-    this.applyXRControllerRotations(pivot);
+    this.applyXRControllerRotations(scenePivot);
     this.handleScalingInXR(scene, delta);
 
-    if (pivot.parent !== scene) {
+    if (scenePivot.parent !== scene) {
       // attached to controller instead
       // when moving the model, the menu panel should disapear
       this.updateMenuPanel(scene, box, delta);
@@ -1217,12 +1217,12 @@ export class ARRenderer extends EventDispatcher<
     this.isTwoHandInteraction = !!bothSelected;
   }
 
-  private applyXRControllerRotations(pivot: Object3D) {
+  private applyXRControllerRotations(scenePivot: Object3D) {
     if (!this.isTwoHandInteraction) {
       if (this.xrController1)
-        this.applyXRControllerRotation(this.xrController1, pivot);
+        this.applyXRControllerRotation(this.xrController1, scenePivot);
       if (this.xrController2)
-        this.applyXRControllerRotation(this.xrController2, pivot);
+        this.applyXRControllerRotation(this.xrController2, scenePivot);
     }
   }
 

packages/model-viewer/src/three-components/ModelScene.ts

@@ -90,7 +90,7 @@ export class ModelScene extends Scene {
 
   url: string|null = null;
   extraUrls: string[] = [];
-  pivot = new Object3D();
+  scenePivot = new Object3D();
   target = new Object3D();
   animationNames: Array<string> = [];
   boundingBox = new Box3();
@@ -139,10 +139,10 @@ export class ModelScene extends Scene {
     this.camera = new PerspectiveCamera(45, 1, 0.1, 100);
     this.camera.name = 'MainCamera';
 
-    this.add(this.pivot);
-    this.pivot.name = 'Pivot';
+    this.add(this.scenePivot);
+    this.scenePivot.name = 'Pivot';
 
-    this.pivot.add(this.target);
+    this.scenePivot.add(this.target);
 
     this.setSize(width, height);
 
@@ -793,13 +793,13 @@ export class ModelScene extends Scene {
    * center.
    */
   set yaw(radiansY: number) {
-    this.pivot.rotation.y = radiansY;
+    this.scenePivot.rotation.y = radiansY;
     this.groundedSkybox.rotation.y = -radiansY;
     this.queueRender();
   }
 
   get yaw(): number {
-    return this.pivot.rotation.y;
+    return this.scenePivot.rotation.y;
   }
 
   set animationTime(value: number) {