From 7532f3aed4d52b326739e30c6f2cf8b8451c791e Mon Sep 17 00:00:00 2001 From: pjanik Date: Mon, 19 Aug 2024 19:58:16 +0200 Subject: [PATCH] fix: move sun-earth line and spokes start points away from (0,0,0) so the sun looks like 3D object [PT-188109240] --- src/grasp-seasons/3d-models/common-models.ts | 10 +++++--- src/grasp-seasons/3d-models/sun-earth-line.ts | 25 ++++--------------- 2 files changed, 12 insertions(+), 23 deletions(-) diff --git a/src/grasp-seasons/3d-models/common-models.ts b/src/grasp-seasons/3d-models/common-models.ts index 861dd1a..cf78a31 100644 --- a/src/grasp-seasons/3d-models/common-models.ts +++ b/src/grasp-seasons/3d-models/common-models.ts @@ -140,10 +140,14 @@ export default { 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; - vertices[i * 6 + 1] = 0; - vertices[i * 6 + 2] = 0; const earthLoc = data.earthEllipseLocationByDay(i * STEP); + // The beginning of the spokes needs to start away from the origin (0,0,0) to avoid rendering artifacts, + // as the sun is infinitely thin. + const startK = 0.17; + vertices[i * 6] = earthLoc.x * startK; + vertices[i * 6 + 1] = earthLoc.y * startK; + vertices[i * 6 + 2] = earthLoc.z * startK; + vertices[i * 6 + 3] = earthLoc.x; vertices[i * 6 + 4] = earthLoc.y; vertices[i * 6 + 5] = earthLoc.z; diff --git a/src/grasp-seasons/3d-models/sun-earth-line.ts b/src/grasp-seasons/3d-models/sun-earth-line.ts index 2ddcc12..a80d954 100644 --- a/src/grasp-seasons/3d-models/sun-earth-line.ts +++ b/src/grasp-seasons/3d-models/sun-earth-line.ts @@ -2,15 +2,12 @@ import * as THREE from "three"; import { IModelParams } from "../types"; import * as c from "./constants"; -const LINE_RADIUS = 20000 * c.SF; -const SIMPLE_LINE_RADIUS = 650000 * c.SF; const POINTER_RADIUS = 200000 * c.SF; const POINTER_TUBE = 60000 * c.SF; export default class { _arrow!: THREE.Object3D; _earthRadius: number; - _lineMesh!: THREE.Mesh; _pointerMesh!: THREE.Object3D; _refVector: THREE.Vector3; rootObject!: THREE.Object3D; @@ -25,24 +22,22 @@ export default class { } setEarthPos(newPos: THREE.Vector3) { - const len = newPos.length() - this._earthRadius; + const sunRealRadius = c.SIMPLE_SUN_RADIUS * 1.41; // match edge of the Sun PNG-based sprite + const len = newPos.length() - this._earthRadius - sunRealRadius; let angleDiff = newPos.angleTo(this._refVector); if (newPos.z < 0) angleDiff *= -1; this.rootObject.rotation.y = angleDiff; - this._lineMesh.scale.y = len; - this._lineMesh.position.x = -len * 0.5; if (this._pointerMesh) { this._pointerMesh.position.x = -len; } - this._arrow.position.x = -len; + this._arrow.position.x = -len - sunRealRadius; + this._arrow.scale.x = len; } _init3DObjects(simple: boolean) { - this._lineMesh = this._initLine(simple); this._arrow = this._initArrow(simple); const container = new THREE.Object3D(); - container.add(this._lineMesh); container.add(this._arrow); const pivot = new THREE.Object3D(); pivot.add(container); @@ -72,18 +67,8 @@ export default class { return container; } - _initLine(simple: boolean) { - const radius = simple ? SIMPLE_LINE_RADIUS : LINE_RADIUS; - const segments = simple ? 4 : 8; - const material = new THREE.MeshPhongMaterial({ emissive: c.SUN_COLOR }); - const geometry = new THREE.CylinderGeometry(radius, radius, 1, segments); - const lineMesh = new THREE.Mesh(geometry, material); - lineMesh.rotation.z = Math.PI * 0.5; - return lineMesh; - } - _initArrow(simple: boolean) { - const HEIGHT = simple ? 115000000 * c.SF : 2500000 * c.SF; + const HEIGHT = 1; // arrow will be rescaled dynamically based on earth-sun distance that changes through the year const RADIUS = simple ? 1500000 * c.SF : 100000 * c.SF; const HEAD_RADIUS = RADIUS * (simple ? 7 : 2); const HEAD_HEIGHT = HEIGHT * 0.2;