feat: adjust the size of the Earth's axis and lat/long markers in the…

… close-up view [PT-188090705]

src/grasp-seasons/3d-models/earth-axis.ts

@@ -0,0 +1,36 @@
+import * as THREE from "three";
+import * as c from "./constants";
+
+export default class EarthAxis {
+  rootObject: THREE.Object3D;
+  arrowHead: THREE.Mesh;
+  axis: THREE.Mesh;
+
+  constructor() {
+    const HEIGHT = 35000000 * c.SF;
+    const RADIUS = 1200000 * c.SF;
+    const HEAD_RADIUS = RADIUS * 2.5;
+    const EMISSIVE_COL = 0x770000;
+    const geometry = new THREE.CylinderGeometry(RADIUS, RADIUS, HEIGHT, 32);
+    const material = new THREE.MeshPhongMaterial({ color: 0xff0000, emissive: EMISSIVE_COL });
+    this.axis = new THREE.Mesh(geometry, material);
+
+    const arrowHeadGeo = new THREE.SphereGeometry(HEAD_RADIUS, 32, 32);
+    this.arrowHead = new THREE.Mesh(arrowHeadGeo, material);
+    this.arrowHead.position.y = HEIGHT * 0.5;
+
+    this.rootObject = new THREE.Object3D();
+    this.rootObject.add(this.axis);
+    this.rootObject.add(this.arrowHead);
+  }
+
+  setCloseUpStyle() {
+    this.arrowHead.scale.set(0.5, 0.5, 0.5);
+    this.axis.scale.set(0.5, 1, 0.5);
+  }
+
+  setOrbitViewStyle() {
+    this.arrowHead.scale.set(1, 1, 1);
+    this.axis.scale.set(1, 1, 1);
+  }
+}

src/grasp-seasons/3d-models/lat-long-marker.ts

@@ -12,7 +12,7 @@ export default class LatLongMarker {
   mesh: THREE.Mesh;
   rootObject: THREE.Object3D;
   constructor(simple?: boolean) {
-    this.markerRadius = simple ? c.LATLNG_MARKER_RADIUS * 5 : c.LATLNG_MARKER_RADIUS;
+    this.markerRadius = simple ? c.LATLNG_MARKER_RADIUS * 9 : c.LATLNG_MARKER_RADIUS;
     const geometry = new THREE.SphereGeometry(this.markerRadius, 32, 32);
     const material = new THREE.MeshPhongMaterial({ emissive: DEF_EMISSIVE });
     const mesh = new THREE.Mesh(geometry, material);
@@ -41,4 +41,12 @@ export default class LatLongMarker {
     this.material.color.setHex(v ? c.HIGHLIGHT_COLOR : DEF_COLOR);
     this.material.emissive.setHex(v ? c.HIGHLIGHT_EMISSIVE : DEF_EMISSIVE);
   }
+
+  setCloseUpStyle() {
+    this.mesh.scale.set(0.5, 0.5, 0.5);
+  }
+
+  setOrbitViewStyle() {
+    this.mesh.scale.set(1, 1, 1);
+  }
 }

src/grasp-seasons/3d-models/latitude-line.ts

@@ -13,7 +13,9 @@ export default class LatitudeLine {
   constructor(equator?: boolean, simple?: boolean) {
     let torusRadius = equator ? c.LAT_LINE_THICKNESS / 5 : c.LAT_LINE_THICKNESS;
     this.earthRadius = simple ? c.SIMPLE_EARTH_RADIUS * 1.03: c.EARTH_RADIUS;
-    if (simple) torusRadius = torusRadius * 6;
+    if (simple) {
+      torusRadius = torusRadius * 3;
+    }
     const geometry = new THREE.TorusGeometry(this.earthRadius, this.earthRadius * torusRadius, 16, 100);
     const material = new THREE.MeshPhongMaterial({ emissive: DEF_EMISSIVE });
     const mesh = new THREE.Mesh(geometry, material);

src/grasp-seasons/3d-views/base-view.ts

@@ -9,6 +9,7 @@ import SunEarthLine from "../3d-models/sun-earth-line";
 import * as data from "../utils/solar-system-data";
 import t, { Language } from "../translation/translate";
 import { ISimState, ModelType } from "../types";
+import EarthAxis from "../3d-models/earth-axis";
 
 const DEF_PROPERTIES = {
   lang: "en_us",
@@ -24,7 +25,7 @@ export default class BaseView {
   controls: OrbitControls;
   dispatch: EventEmitter;
   earth!: Earth;
-  earthAxis!: THREE.Mesh;
+  earthAxis!: EarthAxis;
   lang: Language;
   months: string[];
   props: Partial<ISimState>;
@@ -190,8 +191,8 @@ export default class BaseView {
     this.scene.add(models.sun(basicProps));
 
     this.earth = new Earth(basicProps);
-    this.earthAxis = models.earthAxis(basicProps);
-    this.earth.earthObject.add(this.earthAxis);
+    this.earthAxis = new EarthAxis();
+    this.earth.earthObject.add(this.earthAxis.rootObject);
     this.scene.add(this.earth.rootObject);
 
     this.sunEarthLine = new SunEarthLine(basicProps);

src/grasp-seasons/3d-views/orbit-view.ts

@@ -123,12 +123,16 @@ export default class OrbitView extends BaseView {
     this.registerInteractionHandler(this.latLogDraggingInteraction);
     this.sunEarthLine.rootObject.visible = false;
     this.monthLabels.forEach((label) => label.visible = false);
+    this.earthAxis.setCloseUpStyle();
+    this.latLongMarker.setCloseUpStyle();
   }
 
   setupOrbitView() {
     this.registerInteractionHandler(this.earthDraggingInteraction);
     this.sunEarthLine.rootObject.visible = true;
     this.monthLabels.forEach((label) => label.visible = true);
+    this.earthAxis.setOrbitViewStyle();
+    this.latLongMarker.setOrbitViewStyle();
   }
 
   render(timestamp: number) {