Mr.Gay100
/
steelforesight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

@ 

Globe: lighter blue material, brighter dots/atmosphere/lights for visibility

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@
This commit is contained in:
alireza 2026-06-10 16:28:53 +03:30
parent d483ed791b
commit 6f8409b8f0
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/ui/globe.tsx
View File

@ -11,7 +11,6 @@ type Arc = {
arcAlt: number; color: string arcAlt: number; color: string
} }
const NAVY = '#032340'
const COLORS = ['#22ade0', '#3b82f6', '#CD9E53'] const COLORS = ['#22ade0', '#3b82f6', '#CD9E53']
/* steel-trade arcs centred on Tehran/Shanghai */ /* steel-trade arcs centred on Tehran/Shanghai */
@ -33,12 +32,12 @@ function GlobeObject({ countries }: { countries: { features: object[] } }) {
const g = new ThreeGlobe() const g = new ThreeGlobe()
.hexPolygonsData(countries.features) .hexPolygonsData(countries.features)
.hexPolygonResolution(3) .hexPolygonResolution(3)
.hexPolygonMargin(0.7) .hexPolygonMargin(0.62)
.hexPolygonUseDots(true) .hexPolygonUseDots(true)
.hexPolygonColor(() => 'rgba(255,255,255,0.65)') .hexPolygonColor(() => 'rgba(150,200,255,0.95)')
.showAtmosphere(true) .showAtmosphere(true)
.atmosphereColor('#3b82f6') .atmosphereColor('#7cc4ff')
.atmosphereAltitude(0.16) .atmosphereAltitude(0.22)
g.arcsData(ARCS) g.arcsData(ARCS)
.arcStartLat((d: object) => (d as Arc).startLat) .arcStartLat((d: object) => (d as Arc).startLat)
@ -63,14 +62,14 @@ function GlobeObject({ countries }: { countries: { features: object[] } }) {
.pointRadius(0.55) .pointRadius(0.55)
.pointsMerge(true) .pointsMerge(true)
// material → deep navy with faint emissive // material → lighter, distinguishable blue sphere
const mat = g.globeMaterial() as unknown as { const mat = g.globeMaterial() as unknown as {
color: Color; emissive: Color; emissiveIntensity: number; shininess: number color: Color; emissive: Color; emissiveIntensity: number; shininess: number
} }
mat.color = new Color(NAVY) mat.color = new Color('#1b386e')
mat.emissive = new Color('#0a1f4d') mat.emissive = new Color('#23508f')
mat.emissiveIntensity = 0.12 mat.emissiveIntensity = 0.45
mat.shininess = 0.8 mat.shininess = 0.6
return g return g
}, [countries]) }, [countries])
@ -92,10 +91,10 @@ export function World() {
return ( return (
<Canvas camera={{ fov: 50, near: 180, far: 1800, position: [0, 0, 320] }} gl={{ alpha: true, antialias: true }}> <Canvas camera={{ fov: 50, near: 180, far: 1800, position: [0, 0, 320] }} gl={{ alpha: true, antialias: true }}>
<ambientLight color="#bcd4ff" intensity={0.9} /> <ambientLight color="#dce9ff" intensity={1.6} />
<directionalLight color="#ffffff" position={[-400, 200, 400]} intensity={1} /> <directionalLight color="#ffffff" position={[-400, 200, 400]} intensity={1.6} />
<directionalLight color="#22ade0" position={[300, 200, 200]} intensity={0.5} /> <directionalLight color="#6cc4ff" position={[300, 200, 200]} intensity={1} />
<pointLight color="#ffffff" position={[-200, 500, 200]} intensity={0.7} /> <pointLight color="#ffffff" position={[-200, 500, 200]} intensity={1.1} />
{countries && <GlobeObject countries={countries} />} {countries && <GlobeObject countries={countries} />}
<OrbitControls <OrbitControls
enablePan={false} enablePan={false}