diff --git a/src/grasp-seasons/3d-models/common-models.ts b/src/grasp-seasons/3d-models/common-models.ts index d1b528c..94f62cc 100644 --- a/src/grasp-seasons/3d-models/common-models.ts +++ b/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/orbital-sun@3x.png"; + function addEdges(mesh: THREE.Mesh) { const geometry = new THREE.EdgesGeometry(mesh.geometry); const material = new THREE.LineBasicMaterial({ color: 0x000000 }); @@ -56,7 +58,7 @@ 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 }); @@ -64,6 +66,15 @@ export default { 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; diff --git a/src/grasp-seasons/3d-models/constants.ts b/src/grasp-seasons/3d-models/constants.ts index 3dcaeed..0c8da56 100644 --- a/src/grasp-seasons/3d-models/constants.ts +++ b/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; diff --git a/src/grasp-seasons/3d-models/earth.ts b/src/grasp-seasons/3d-models/earth.ts index 21e783d..e2aec1c 100644 --- a/src/grasp-seasons/3d-models/earth.ts +++ b/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; diff --git a/src/grasp-seasons/3d-models/sun-earth-line.ts b/src/grasp-seasons/3d-models/sun-earth-line.ts index a246382..2ddcc12 100644 --- a/src/grasp-seasons/3d-models/sun-earth-line.ts +++ b/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 }); diff --git a/src/grasp-seasons/3d-views/base-view.ts b/src/grasp-seasons/3d-views/base-view.ts index 2fd5722..c3e2bbe 100644 --- a/src/grasp-seasons/3d-views/base-view.ts +++ b/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 = DEF_PROPERTIES, modelType: ModelType = "unknown") { const width = parentEl.clientWidth; const height = parentEl.clientHeight; diff --git a/src/grasp-seasons/3d-views/orbit-view.ts b/src/grasp-seasons/3d-views/orbit-view.ts index ac074ff..dc600e2 100644 --- a/src/grasp-seasons/3d-views/orbit-view.ts +++ b/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); diff --git a/src/grasp-seasons/assets/orbital-sun@3x.png b/src/grasp-seasons/assets/orbital-sun@3x.png new file mode 100644 index 0000000..b81843b Binary files /dev/null and b/src/grasp-seasons/assets/orbital-sun@3x.png differ diff --git a/src/grasp-seasons/translation/en-us.ts b/src/grasp-seasons/translation/en-us.ts index 745106f..2c0e920 100644 --- a/src/grasp-seasons/translation/en-us.ts +++ b/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",