Browse Source

Improve globe grid visuals and rim light styling

- Add visible intersection dots at all grid crossings
- Skip 0°/180° longitude in front view (no center vertical line)
- Increase perspective pitch to -28° for stronger top-down view
- Smart drag-to-back: detect nearest snap on both hemispheres
- Increase dashed line visibility (opacity 0.6, wider dash spacing)
- Add pole marker dots in perspective view
- Make rim light source dot match main source style (black core, white glow)
TEST-x
xuzhijie 2 months ago
parent
commit
bfc623644b
  1. 24
      src/components/lighting/LightingEffectModal.tsx

24
src/components/lighting/LightingEffectModal.tsx

@ -229,7 +229,7 @@ const RIM_LIGHT_STOPS: LightControlPoint[] = [
const DEFAULT_RIM_LIGHT_POSITION = { x: 0, y: 0, z: -1 }; const DEFAULT_RIM_LIGHT_POSITION = { x: 0, y: 0, z: -1 };
const VIEW_ROTATION: Record<LightingViewMode, { pitch: number; yaw: number }> = { const VIEW_ROTATION: Record<LightingViewMode, { pitch: number; yaw: number }> = {
perspective: { pitch: -18, yaw: 0 }, perspective: { pitch: -28, yaw: 0 },
front: { pitch: 0, yaw: 0 }, front: { pitch: 0, yaw: 0 },
}; };
@ -382,7 +382,11 @@ function buildVisualGlobeLines(
}; };
}); });
const longitudeLines = LONGITUDE_DEGREES.map((longitude) => { const longitudeLines = LONGITUDE_DEGREES.filter((longitude) => {
// In front view, 0° and 180° project as a straight vertical line through
// the center with no visible curvature — skip them.
return !(isFront && (longitude === 0 || longitude === 180));
}).map((longitude) => {
const points: Array<{ left: number; top: number; depth: number }> = []; const points: Array<{ left: number; top: number; depth: number }> = [];
for (let i = 0; i < SAMPLES_PER_LINE; i++) { for (let i = 0; i < SAMPLES_PER_LINE; i++) {
const latitude = -90 + (i / SAMPLES_PER_LINE) * 180; const latitude = -90 + (i / SAMPLES_PER_LINE) * 180;
@ -665,6 +669,20 @@ function LightingPreview({
})()} })()}
</> </>
)} )}
{LATITUDE_DEGREES.flatMap((latitude) =>
LONGITUDE_DEGREES.map((longitude) => {
const pt = projectSpherePoint(latitude, longitude, settings.viewMode);
return (
<circle
key={`dot-lat-${latitude}-lon-${longitude}`}
cx={pt.left}
cy={pt.top}
r={0.9}
fill="rgba(255,255,255,0.45)"
/>
);
})
)}
</svg> </svg>
{MAIN_LIGHT_STOPS.map((stop) => { {MAIN_LIGHT_STOPS.map((stop) => {
@ -770,7 +788,7 @@ function LightingPreview({
{settings.rimLight && ( {settings.rimLight && (
<div <div
data-testid="lighting-preview-rim-source" data-testid="lighting-preview-rim-source"
className="absolute z-50 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 cursor-grab rounded-full bg-cyan-100 shadow-[0_0_0_1px_rgba(8,145,178,0.9),0_0_16px_rgba(103,232,249,0.9)] active:cursor-grabbing" className="absolute z-50 h-3.5 w-3.5 -translate-x-1/2 -translate-y-1/2 cursor-grab rounded-full bg-black shadow-[0_0_0_2px_rgba(255,255,255,0.95),0_0_18px_rgba(255,255,255,0.88)] active:cursor-grabbing"
style={{ style={{
left: `${rimProjected.left}%`, left: `${rimProjected.left}%`,
top: `${rimProjected.top}%`, top: `${rimProjected.top}%`,

Loading…
Cancel
Save