Update Orbit view to follow UI specs

src/grasp-seasons/3d-models/common-models.ts

@@ -6,6 +6,8 @@ import * as data from "../utils/solar-system-data";
 import * as c from "./constants";
 import { IModelParams } from "../types";
 
+import SunPNG from "../assets/[email protected]";
+
 function addEdges(mesh: THREE.Mesh) {
   const geometry = new THREE.EdgesGeometry(mesh.geometry);
   const material = new THREE.LineBasicMaterial({ color: 0x000000 });
@@ -56,14 +58,23 @@ export default {
     return light;
   },
 
-  sun (params: IModelParams) {
+  sun2 (params: IModelParams) {
     const radius = params.type === "orbit-view" ? c.SIMPLE_SUN_RADIUS : c.SUN_RADIUS;
     const geometry = new THREE.SphereGeometry(radius, 32, 32);
     const material = new THREE.MeshPhongMaterial({ emissive: c.SUN_COLOR, color: 0x000000 });
     const mesh = new THREE.Mesh(geometry, material);
     return mesh;
   },
 
+  sun (params: IModelParams) {
+    const texture = new THREE.TextureLoader().load(SunPNG);
+    const material = new THREE.SpriteMaterial({ map: texture, transparent: true, depthTest: false });
+    const sprite = new THREE.Sprite(material);
+    sprite.renderOrder = 1;
+    sprite.scale.set(100000000 * c.SF, 100000000 * c.SF, 1);
+    return sprite;
+  },
+
   earth (params: IModelParams) {
     const simple = params.type === "orbit-view";
     const RADIUS = simple ? c.SIMPLE_EARTH_RADIUS : c.EARTH_RADIUS;
@@ -96,13 +107,13 @@ export default {
     // Load font in a sync way, using webpack raw-loader. Based on async THREE JS loader:
     // https://github.com/mrdoob/three.js/blob/ddab1fda4fd1e21babf65aa454fc0fe15bfabc33/src/loaders/FontLoader.js#L20
     const font = new Font(museo500FontDef as any);
-    const SIZE = 16000000;
+    const SIZE = 13000000;
     const HEIGHT = 1000000;
-    const SIZE_SMALL = SIZE / 2;
-    const HEIGHT_SMALL = HEIGHT / 2;
+    const SIZE_SMALL = SIZE;
+    const HEIGHT_SMALL = HEIGHT;
 
     const COLOR = 0xffff00;
-    const COLOR_SMALL = 0x999966;
+    const COLOR_SMALL = 0xffffff;
 
     const geometry = new TextGeometry(txt, {
       size: small ? SIZE_SMALL * c.SF : SIZE * c.SF,
@@ -122,12 +133,11 @@ export default {
   },
 
   grid (params: IModelParams) {
-    const simple = params.type === "orbit-view";
-    const RAY_COUNT = 24;
+    const RAY_COUNT = 12;
     const DAY_COUNT = 365;
     const STEP = DAY_COUNT / RAY_COUNT;
     const geometry = new THREE.BufferGeometry();
-    const material = new THREE.LineBasicMaterial({ color: 0xffff00, transparent: true, opacity: simple ? 0.4 : 0.6 });
+    const material = new THREE.LineBasicMaterial({ color: 0xffff00, transparent: true, opacity: 0.7 });
     const vertices = new Float32Array(2 * RAY_COUNT * 3);
     for (let i = 0; i < RAY_COUNT; ++i) {
       vertices[i * 6] = 0;

src/grasp-seasons/3d-models/constants.ts

@@ -5,13 +5,13 @@ import * as data from "../utils/solar-system-data";
 export const SF = 1 / data.SCALE_FACTOR;
 
 export const EARTH_RADIUS = 7000000 * SF;
-export const SIMPLE_EARTH_RADIUS = 10000000 * SF;
+export const SIMPLE_EARTH_RADIUS = 13000000 * SF;
 export const SUN_RADIUS = 4000000 * SF;
-export const SIMPLE_SUN_RADIUS = 15000000 * SF;
+export const SIMPLE_SUN_RADIUS = 25000000 * SF;
 export const LATLNG_MARKER_RADIUS = 300000 * SF;
 
 export const LAT_LINE_THICKNESS = 0.01;
 
-export const SUN_COLOR = 0xCB671F;
+export const SUN_COLOR = 0xdcdca3;
 export const HIGHLIGHT_COLOR = 0xff0000;
 export const HIGHLIGHT_EMISSIVE = 0xbb3333;

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

@@ -16,6 +16,7 @@ export default class Earth {
   _orbitRotationObject: THREE.Object3D;
   _posObject: THREE.Object3D;
   _tiltObject: THREE.Object3D;
+
   constructor(params: IModelParams) {
     const simple = params.type === "orbit-view";
     const RADIUS = simple ? c.SIMPLE_EARTH_RADIUS : c.EARTH_RADIUS;

src/grasp-seasons/3d-models/sun-earth-line.ts

@@ -83,9 +83,9 @@ export default class {
   }
 
   _initArrow(simple: boolean) {
-    const HEIGHT = simple ? 25000000 * c.SF : 2500000 * c.SF;
+    const HEIGHT = simple ? 115000000 * c.SF : 2500000 * c.SF;
     const RADIUS = simple ? 1500000 * c.SF : 100000 * c.SF;
-    const HEAD_RADIUS = RADIUS * (simple ? 2.5 : 2);
+    const HEAD_RADIUS = RADIUS * (simple ? 7 : 2);
     const HEAD_HEIGHT = HEIGHT * 0.2;
     const geometry = new THREE.CylinderGeometry(RADIUS, RADIUS, HEIGHT, 32);
     const material = new THREE.MeshPhongMaterial({ color: 0xff0000, emissive: c.SUN_COLOR });

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

@@ -32,6 +32,7 @@ export default class BaseView {
   scene: THREE.Scene;
   sunEarthLine!: SunEarthLine;
   type: ModelType;
+
   constructor(parentEl: HTMLElement, props: Partial<ISimState> = DEF_PROPERTIES, modelType: ModelType = "unknown") {
     const width = parentEl.clientWidth;
     const height = parentEl.clientHeight;

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

@@ -119,7 +119,7 @@ export default class OrbitView extends BaseView {
   }
 
   getInitialCameraPosition() {
-    return new THREE.Vector3(0, 360000000 / data.SCALE_FACTOR, 0);
+    return new THREE.Vector3(0, 440000000 / data.SCALE_FACTOR, 0);
   }
 
   _setInitialCamPos() {
@@ -200,12 +200,12 @@ export default class OrbitView extends BaseView {
     const months = this.months;
     const segments = months.length;
     const arc = 2 * Math.PI / segments;
-    const labelRadius = data.EARTH_ORBITAL_RADIUS * 1.15;
+    const labelRadius = data.EARTH_ORBITAL_RADIUS * 1.22;
 
     const monthLabels: THREE.Object3D[] = [];
 
     for (let i = 0; i < months.length; i++) {
-      const monthLbl = models.label(months[i], months[i].length === 3);
+      const monthLbl = models.label(months[i], i % 3 !== 0);
       const angle = i * arc;
       monthLbl.position.x = labelRadius * Math.sin(angle);
       monthLbl.position.z = labelRadius * Math.cos(angle);

src/grasp-seasons/translation/en-us.ts

@@ -13,10 +13,10 @@ export default {
     "Oct", "Nov", "Dec"
   ],
   "~MONTHS_MIXED": [
-    "March", "Apr", "May",
-    "June", "Jul", "Aug",
-    "September", "Oct", "Nov",
-    "December", "Jan", "Feb"
+    "Mar", "Apr", "May",
+    "Jun", "Jul", "Aug",
+    "Sep", "Oct", "Nov",
+    "Dec", "Jan", "Feb"
   ],
   "~VIEW_SUBSOLAR_POINT": "View Subsolar Point",
   "~ROTATING":"Rotating",