feat(web): lighten tabletop scene and tune contact shadows

Replace the dark surface plane with a grey background and a spotlight,
size the contact shadow to the table, and scale its blur and fade with
the shadow plane. Disable depth test on the stacking curve overlay.
This commit is contained in:
2026-08-10 00:57:32 +08:00
parent 50c6df48b5
commit 5a3a9c1fcc
6 changed files with 32 additions and 39 deletions
@@ -29,11 +29,11 @@ export function StackingCurve({ route }: { route: Route }) {
return (
<group>
<Line points={points} color="#f59e0b" lineWidth={2} />
<Line points={points} color="#f59e0b" lineWidth={2} depthTest={false} />
{/* Marker at the curve's start, showing its direction. */}
<mesh position={[start[0], 0.01, start[2]]}>
<sphereGeometry args={[0.01, 8, 8]} />
<meshBasicMaterial color="#f59e0b" />
<meshBasicMaterial color="#f59e0b" depthTest={false} />
</mesh>
</group>
);
@@ -1,24 +0,0 @@
/**
* `SurfacePlane` — a visible table surface.
*
* A flat rectangle at the surface's reference `size` (mm, converted to world
* units), centered on the mount anchor. Gives the parts a scale reference and
* reads as the table the game is played on. Rendered only when `showSurface`
* is enabled.
*/
import type { Surface } from '@tts/bgm';
import { MM_TO_WORLD } from '../part.js';
export function SurfacePlane({ surface }: { surface: Surface }) {
if (!surface.size) return null;
const [w, h] = surface.size;
const width = w * MM_TO_WORLD;
const height = h * MM_TO_WORLD;
return (
<mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
<planeGeometry args={[width, height]} />
<meshStandardMaterial color="#1c1f26" roughness={0.9} metalness={0} />
</mesh>
);
}
@@ -12,7 +12,6 @@ import { PartPlacement } from '../placement.js';
import type { MountNode } from '../mount.js';
import { MM_TO_WORLD, DEG_TO_RAD } from '../part.js';
import { SurfaceBounds } from './SurfaceBounds.js';
import { SurfacePlane } from './SurfacePlane.js';
import { StackingCurve } from './StackingCurve.js';
export function WorldSurfaceView({
@@ -47,7 +46,6 @@ export function SurfaceNode({
>
{showSurface && (
<>
<SurfacePlane surface={node.surface} />
<SurfaceBounds surface={node.surface} />
{node.surface.layout.map((route, i) =>
route.stacking ? <StackingCurve key={i} route={route} /> : null,