Add transformation on the points

react-components/src/architecture/concrete/annotation360/Image360AnnotationCreator.ts

@@ -16,7 +16,18 @@ export class Image360AnnotationCreator extends LineCreator {
   public constructor(tool: BaseTool) {
     const image360Id = tool.renderTarget.viewer.getActive360ImageInfo()?.image360.id;
     assert(image360Id !== undefined, 'Image360AnnotationCreator: image360Id is undefined');
-    super(tool, new Image360AnnotationDomainObject(image360Id));
+
+    // Get the camera position in CDF coordinates
+    const { position } = tool.renderTarget.cameraManager.getCameraState();
+    assert(position !== undefined, 'Camera position unknown');
+
+    const center = position.clone();
+    center.applyMatrix4(tool.renderTarget.fromViewerMatrix);
+
+    const domainObject = new Image360AnnotationDomainObject(image360Id);
+    domainObject.center.copy(center);
+
+    super(tool, domainObject);
   }
 
   // ==================================================
@@ -37,11 +48,9 @@ export class Image360AnnotationCreator extends LineCreator {
 
   protected override transformInputPoint(
     ray: Ray,
-    point: Vector3 | undefined,
+    _point: Vector3 | undefined,
     _isPending: boolean
   ): Vector3 | undefined {
-    point = ray.origin.clone();
-    point.addScaledVector(ray.direction, 5);
-    return point;
+    return ray.direction.clone();
   }
 }

react-components/src/architecture/concrete/annotation360/Image360AnnotationDomainObject.ts

@@ -26,13 +26,13 @@ export class Image360AnnotationDomainObject extends LineDomainObject {
   }
 
   public override getTransformedPoint(point: Vector3): Vector3 {
-    return this.getCopyOfTransformedPoint(point);
+    return this.getCopyOfTransformedPoint(point, new Vector3());
   }
 
-  public override getCopyOfTransformedPoint(point: Vector3): Vector3 {
-    const clone = this.center.clone();
-    clone.addScaledVector(point, 5);
-    return point;
+  public override getCopyOfTransformedPoint(point: Vector3, target: Vector3): Vector3 {
+    target.copy(this.center);
+    target.addScaledVector(point, 5);
+    return target;
   }
 
   // ==================================================

react-components/src/architecture/concrete/primitives/line/LineDomainObject.ts

@@ -49,8 +49,9 @@ export abstract class LineDomainObject extends VisualDomainObject {
     return point;
   }
 
-  public getCopyOfTransformedPoint(point: Vector3): Vector3 {
-    return point;
+  public getCopyOfTransformedPoint(point: Vector3, target: Vector3): Vector3 {
+    target.copy(point);
+    return target;
   }
 
   // ==================================================
@@ -188,10 +189,11 @@ export abstract class LineDomainObject extends VisualDomainObject {
     let prevPoint: Vector3 | undefined;
     let sum = 0.0;
     for (const point of this.points) {
+      const transformedPoint = this.getTransformedPoint(point);
       if (prevPoint !== undefined) {
-        sum += point.distanceTo(prevPoint);
+        sum += transformedPoint.distanceTo(prevPoint);
       }
-      prevPoint = point;
+      prevPoint = transformedPoint;
     }
     return sum;
   }
@@ -208,11 +210,12 @@ export abstract class LineDomainObject extends VisualDomainObject {
     let prevPoint: Vector3 | undefined;
     let sum = 0.0;
     for (const point of this.points) {
+      const transformedPoint = this.getTransformedPoint(point);
       if (prevPoint !== undefined) {
-        sum += horizontalDistanceTo(point, prevPoint);
+        sum += horizontalDistanceTo(transformedPoint, prevPoint);
         continue;
       }
-      prevPoint = point;
+      prevPoint = transformedPoint;
     }
     return sum;
   }
@@ -221,11 +224,12 @@ export abstract class LineDomainObject extends VisualDomainObject {
     let prevPoint: Vector3 | undefined;
     let sum = 0.0;
     for (const point of this.points) {
+      const transformedPoint = this.getTransformedPoint(point);
       if (prevPoint !== undefined) {
-        sum += verticalDistanceTo(point, prevPoint);
+        sum += verticalDistanceTo(transformedPoint, prevPoint);
         continue;
       }
-      prevPoint = point;
+      prevPoint = transformedPoint;
     }
     return sum;
   }
@@ -236,12 +240,12 @@ export abstract class LineDomainObject extends VisualDomainObject {
       return 0;
     }
     let sum = 0.0;
-    const first = points[0];
+    const first = this.getTransformedPoint(points[0]);
     const p0 = new Vector3();
     const p1 = new Vector3();
 
     for (let index = 1; index <= pointCount; index++) {
-      p1.copy(points[index % pointCount]);
+      this.getCopyOfTransformedPoint(points[index % pointCount], p1);
       p1.sub(first); // Translate down to first point, to increase accuracy
       sum += getHorizontalCrossProduct(p0, p1);
       p0.copy(p1);
@@ -251,7 +255,8 @@ export abstract class LineDomainObject extends VisualDomainObject {
 
   public expandBoundingBox(boundingBox: Box3): void {
     for (const point of this.points) {
-      boundingBox.expandByPoint(point);
+      const transformedPoint = this.getTransformedPoint(point);
+      boundingBox.expandByPoint(transformedPoint);
     }
   }
 }

react-components/src/architecture/concrete/primitives/line/LineView.ts

@@ -112,7 +112,7 @@ export class LineView extends GroupThreeView<LineDomainObject> {
     }
     const loopLength = domainObject.loopLength;
     for (let i = 0; i < loopLength; i++) {
-      thisPoint.copy(points[i % pointCount]);
+      domainObject.getCopyOfTransformedPoint(points[i % pointCount], thisPoint);
       thisPoint.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
 
       if (i === 0) {
@@ -162,7 +162,7 @@ export class LineView extends GroupThreeView<LineDomainObject> {
     const direction = new Vector3();
 
     for (let i = 0; i < loopLength; i++) {
-      thisPoint.copy(points[i % pointCount]);
+      domainObject.getCopyOfTransformedPoint(points[i % pointCount], thisPoint);
       thisPoint.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
 
       if (i > 0) {
@@ -230,8 +230,8 @@ export class LineView extends GroupThreeView<LineDomainObject> {
     const loopLength = domainObject.loopLength - 1;
     const center = new Vector3();
     for (let i = 0; i < loopLength; i++) {
-      const point1 = points[i % pointCount];
-      const point2 = points[(i + 1) % pointCount];
+      const point1 = domainObject.getTransformedPoint(points[i % pointCount]);
+      const point2 = domainObject.getTransformedPoint(points[(i + 1) % pointCount]);
       const distance = point1.distanceTo(point2);
 
       center.copy(point1).add(point2).divideScalar(2);
@@ -266,7 +266,7 @@ function createPositions(domainObject: LineDomainObject): number[] | undefined {
   const loopLength = domainObject.loopLength;
 
   for (let i = 0; i < loopLength; i++) {
-    const point = points[i % pointCount].clone();
+    const point = domainObject.getCopyOfTransformedPoint(points[i % pointCount], new Vector3());
     point.applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
     positions.push(...point);
     if (i > 0 && i < loopLength - 1) {