feat: fix civil line width aspect

ThatOpen · May 22, 2024 · a2c83a5 · a2c83a5
1 parent b86e2c4
commit a2c83a5
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 13 deletions.
diff --git a/packages/core/src/core/OrthoPerspectiveCamera/example.ts b/packages/core/src/core/OrthoPerspectiveCamera/example.ts
@@ -24,7 +24,6 @@ import * as THREE from "three";
 import * as BUI from "@thatopen/ui";
 import * as OBC from "../..";
 
-
 /* MD
   ### 🌎 Setting up the world AND the camera
   ---
@@ -47,11 +46,14 @@ world.scene = new OBC.SimpleScene(components);
 world.renderer = new OBC.SimpleRenderer(components, container);
 world.camera = new OBC.OrthoPerspectiveCamera(components);
 
-components.init();
-
 world.scene.setup();
 
-world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
+await world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
+
+// await world.camera.projection.set("Perspective");
+// await world.camera.projection.set("Orthographic");
+
+components.init();
 
 /* MD
 
@@ -76,8 +78,6 @@ world.meshes.add(cube);
 const grids = components.get(OBC.Grids);
 const grid = grids.create(world);
 
-
-
 /* MD
   ### 🎟️ Using camera events
   ---
@@ -118,7 +118,6 @@ world.camera.projection.onChanged.add(() => {
     
 */
 
-
 BUI.Manager.init();
 
 const panel = BUI.Component.create<BUI.PanelSection>(() => {
@@ -206,4 +205,4 @@ world.renderer.onAfterUpdate.add(() => stats.end());
 
   That's it! We have created an OrthoPerspective camera that can be used to navigate a 3D scene with multiple projections and navigation modes, as well as a neat UI to control it. Great job!
 
-*/
+*/
diff --git a/packages/front/src/civil/Civil3DNavigator/index.ts b/packages/front/src/civil/Civil3DNavigator/index.ts
@@ -148,15 +148,21 @@ export class Civil3DNavigator extends OBC.Component {
     }
     const dom = this.world.renderer.three.domElement;
 
+    this.world.renderer?.onResize.remove(this.updateLinesResolution);
+    dom.removeEventListener("click", this.onClick);
+    dom.removeEventListener("mousemove", this.onMouseMove);
+
     if (active) {
       dom.addEventListener("click", this.onClick);
       dom.addEventListener("mousemove", this.onMouseMove);
-    } else {
-      dom.removeEventListener("click", this.onClick);
-      dom.removeEventListener("mousemove", this.onMouseMove);
+      this.world.renderer?.onResize.add(this.updateLinesResolution);
     }
   }
 
+  private updateLinesResolution = (size: THREE.Vector2) => {
+    this.highlighter?.setResolution(size);
+  };
+
   private onClick = (event: MouseEvent) => {
     if (!this.enabled || !this._highlighter) {
       return;

diff --git a/packages/front/src/civil/CivilNavigator/index.ts b/packages/front/src/civil/CivilNavigator/index.ts
@@ -240,6 +240,7 @@ export abstract class CivilNavigator extends OBC.Component {
     const canvas = this._world.renderer.three.domElement;
     const container = canvas.parentElement as HTMLElement;
 
+    this._world.renderer?.onResize.remove(this.updateLinesResolution);
     container.removeEventListener("mousemove", this.onMouseMove);
     container.removeEventListener("click", this.onClick);
     if (this._world.camera.hasCameraControls()) {
@@ -250,13 +251,20 @@ export abstract class CivilNavigator extends OBC.Component {
     if (active) {
       container.addEventListener("mousemove", this.onMouseMove);
       container.addEventListener("click", this.onClick);
+
+      this._world.renderer?.onResize.add(this.updateLinesResolution);
+
       if (this._world.camera.hasCameraControls()) {
         const controls = this._world.camera.controls;
         controls.addEventListener("update", this.onControlsUpdated);
       }
     }
   }
 
+  private updateLinesResolution = (size: THREE.Vector2) => {
+    this.highlighter?.setResolution(size);
+  };
+
   private newMouseMarker(color: string, world: OBC.World) {
     if (!this._world) {
       throw new Error("No world was given for this navigator!");

diff --git a/packages/front/src/civil/CivilNavigator/src/curve-highlighter.ts b/packages/front/src/civil/CivilNavigator/src/curve-highlighter.ts
@@ -102,6 +102,11 @@ export class CurveHighlighter {
     this.hoverPoints.removeFromParent();
   }
 
+  setResolution({ x, y }: THREE.Vector2) {
+    this.selectCurve.material.resolution.set(x / y, 1);
+    this.hoverCurve.material.resolution.set(x / y, 1);
+  }
+
   protected highlight(
     mesh: FRAGS.CurveMesh,
     curve: Line2,

diff --git a/packages/front/src/civil/CivilPlanNavigator/example.html b/packages/front/src/civil/CivilPlanNavigator/example.html
@@ -27,8 +27,7 @@
       .top-scene {
           position: absolute;
           top: 0;
-          left: 0;
-          right: 0;
+          width: 80%;
           height: 18rem;
       }
   </style>

diff --git a/packages/front/src/civil/CivilPlanNavigator/example.ts b/packages/front/src/civil/CivilPlanNavigator/example.ts
@@ -87,6 +87,13 @@ if (!world2D.world) {
 }
 planNavigator.world = world2D.world;
 
+world2D.world.camera.controls.setLookAt(0, 0, 1, 0, 0, 0).then(() => {
+  world2D.world.camera.projection.set("Orthographic").then(() => {
+    world2D._grid.regenerate();
+    console.log("kdfkajdfkafjl")
+  });
+});
+
 await planNavigator.draw(model);
 
 /*