1908 lines
56 KiB
TypeScript
1908 lines
56 KiB
TypeScript
import { type PointerEvent, useEffect, useRef, useState } from 'react';
|
|
|
|
import type {
|
|
Match3DItemSnapshot,
|
|
Match3DRunSnapshot,
|
|
} from '../../../packages/shared/src/contracts/match3dRuntime';
|
|
import {
|
|
isItemState,
|
|
resolveRenderableItemFrame,
|
|
} from './match3dRuntimePresentation';
|
|
import {
|
|
resolveGeometryAsset,
|
|
type Match3DGeometryAsset,
|
|
type Match3DGeometryShape,
|
|
} from './match3dVisualAssets';
|
|
|
|
type Match3DPhysicsBoardProps = {
|
|
run: Match3DRunSnapshot;
|
|
disabled: boolean;
|
|
onClickItem: (item: Match3DItemSnapshot) => void;
|
|
onFallback: () => void;
|
|
};
|
|
|
|
type ThreeModule = typeof import('three');
|
|
type CannonModule = typeof import('cannon-es');
|
|
type PhysicsBody = import('cannon-es').Body;
|
|
type CannonShape = import('cannon-es').Shape;
|
|
type PhysicsWorld = import('cannon-es').World;
|
|
type ThreeObject3D = import('three').Object3D;
|
|
type ThreeScene = import('three').Scene;
|
|
type ThreeRenderer = import('three').WebGLRenderer;
|
|
type ThreeCamera = import('three').OrthographicCamera;
|
|
|
|
type PhysicsEntry = {
|
|
boundaryRadius: number;
|
|
colliderHeight: number;
|
|
item: Match3DItemSnapshot;
|
|
body: PhysicsBody;
|
|
lockReadableTop: boolean;
|
|
mesh: ThreeObject3D;
|
|
renderSignature: string;
|
|
spawnStartedAt: number;
|
|
targetY: number;
|
|
topRotationY: number;
|
|
};
|
|
|
|
type PendingPhysicsSpawn = {
|
|
activeLayerRank: number;
|
|
item: Match3DItemSnapshot;
|
|
renderSignature: string;
|
|
spawnAtMs: number;
|
|
layerCapacity: number;
|
|
targetY: number;
|
|
};
|
|
|
|
type StackHeightTarget = {
|
|
activeLayerRank: number;
|
|
targetY: number;
|
|
};
|
|
|
|
type BoardDepthPlan = {
|
|
activeDepth: number;
|
|
activeItemCount: number;
|
|
baseY: number;
|
|
initialDepth: number;
|
|
layerCapacity: number;
|
|
layerCount: number;
|
|
layerStep: number;
|
|
maxVerticalSpeed: number;
|
|
surfaceY: number;
|
|
};
|
|
|
|
type PhysicsStabilityPlan = {
|
|
angularDamping: number;
|
|
contactFriction: number;
|
|
contactRestitution: number;
|
|
linearDamping: number;
|
|
maxHorizontalSpeed: number;
|
|
maxVerticalSpeed: number;
|
|
solverIterations: number;
|
|
solverTolerance: number;
|
|
};
|
|
|
|
type Match3DSpawnTimingPlan = {
|
|
frameSpawnLimit: number;
|
|
initialDelayMs: number;
|
|
layerDelayMs: number;
|
|
burstSize: number;
|
|
staggerMs: number;
|
|
};
|
|
|
|
type Match3DSpawnHeightObstacle = {
|
|
boundaryRadius: number;
|
|
colliderHeight: number;
|
|
x: number;
|
|
y: number;
|
|
z: number;
|
|
};
|
|
|
|
type PhysicsRuntime = {
|
|
animationId: number | null;
|
|
camera: ThreeCamera;
|
|
entries: Map<string, PhysicsEntry>;
|
|
pendingSpawns: Map<string, PendingPhysicsSpawn>;
|
|
raycaster: import('three').Raycaster;
|
|
renderer: ThreeRenderer;
|
|
scene: ThreeScene;
|
|
spawnTimingPlan: Match3DSpawnTimingPlan;
|
|
stabilityPlan: PhysicsStabilityPlan;
|
|
world: PhysicsWorld;
|
|
three: ThreeModule;
|
|
cannon: CannonModule;
|
|
};
|
|
|
|
type Match3DStackHeightPlan = {
|
|
layerCapacity: number;
|
|
targets: Map<string, StackHeightTarget>;
|
|
};
|
|
|
|
const MATCH3D_POT_FLOOR_RADIUS = 4.75;
|
|
const MATCH3D_POT_INNER_RADIUS = 4.52;
|
|
const MATCH3D_POT_OUTER_RADIUS = 5.18;
|
|
const MATCH3D_POT_WALL_HEIGHT = 2.15;
|
|
const MATCH3D_ITEM_ACTIVITY_RADIUS = 3.58;
|
|
const MATCH3D_ITEM_POSITION_RADIUS = 3.34;
|
|
const MATCH3D_ITEM_BASE_HEIGHT = 1.18;
|
|
const MATCH3D_ITEM_VERTICAL_DEPTH_BASE = 2.8;
|
|
const MATCH3D_ITEM_VERTICAL_DEPTH_SQRT_SCALE = 0.52;
|
|
const MATCH3D_ITEM_VERTICAL_DEPTH_COUNT_SCALE = 0.032;
|
|
const MATCH3D_ITEM_VERTICAL_DEPTH_MAX_BASE = 12;
|
|
const MATCH3D_ITEM_VERTICAL_DEPTH_MAX_COUNT_SCALE = 0.04;
|
|
const MATCH3D_ITEM_VERTICAL_LAYER_CAPACITY_BASE = 18;
|
|
const MATCH3D_ITEM_VERTICAL_LAYER_CAPACITY_MIN = 10;
|
|
const MATCH3D_ITEM_VERTICAL_LAYER_STEP_MAX = 1.04;
|
|
const MATCH3D_ITEM_LIFT_FORCE_SCALE = 18;
|
|
const MATCH3D_ITEM_LIFT_MAX_SPEED = 4.2;
|
|
const MATCH3D_ITEM_SPAWN_RISE_OFFSET = 0.42;
|
|
const MATCH3D_ITEM_SPAWN_LAYER_DELAY_MS = 54;
|
|
const MATCH3D_ITEM_SPAWN_STAGGER_MS = 4;
|
|
const MATCH3D_ITEM_SPAWN_STACK_CLEARANCE = 0.14;
|
|
const MATCH3D_ITEM_SPAWN_STACK_RADIUS_PADDING = 0.08;
|
|
const MATCH3D_ITEM_SPAWN_ANIMATION_MS = 260;
|
|
const MATCH3D_ITEM_EXTREME_VERTICAL_SPEED_LIMIT = 8.6;
|
|
const MATCH3D_ITEM_EXTREME_HORIZONTAL_SPEED_LIMIT = 4.4;
|
|
const MATCH3D_CENTER_GRAVITY_COEFFICIENT = 0;
|
|
const MATCH3D_BOARD_CENTER = 0.5;
|
|
const MATCH3D_PHYSICS_STEP = 1 / 60;
|
|
const MATCH3D_CAMERA_HALF_SIZE = 6.15;
|
|
export const MATCH3D_EXTRUDED_READABLE_SHAPES: ReadonlySet<Match3DGeometryShape> =
|
|
new Set([
|
|
'ring',
|
|
'arch',
|
|
]);
|
|
|
|
function hasWebGLSupport() {
|
|
try {
|
|
const canvas = document.createElement('canvas');
|
|
return Boolean(
|
|
canvas.getContext('webgl2') ?? canvas.getContext('webgl'),
|
|
);
|
|
} catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function toWorldPosition(item: Match3DItemSnapshot) {
|
|
const frame = resolveRenderableItemFrame(item);
|
|
const radius = Math.max(0.28, frame.radius * MATCH3D_POT_FLOOR_RADIUS * 1.02);
|
|
let x = (frame.x - MATCH3D_BOARD_CENTER) * MATCH3D_ITEM_POSITION_RADIUS * 2;
|
|
let z = (frame.y - MATCH3D_BOARD_CENTER) * MATCH3D_ITEM_POSITION_RADIUS * 2;
|
|
const horizontalDistance = Math.hypot(x, z);
|
|
const maxDistance = Math.max(0, MATCH3D_ITEM_ACTIVITY_RADIUS - radius * 1.1);
|
|
if (horizontalDistance > maxDistance && horizontalDistance > 0) {
|
|
const ratio = maxDistance / horizontalDistance;
|
|
x *= ratio;
|
|
z *= ratio;
|
|
}
|
|
return {
|
|
x,
|
|
z,
|
|
radius,
|
|
};
|
|
}
|
|
|
|
export function resolveMatch3DBoardDepthPlan(
|
|
totalItemCount: number,
|
|
activeItemCount: number,
|
|
): BoardDepthPlan {
|
|
const normalizedTotalItemCount = Math.max(
|
|
1,
|
|
Math.round(Number.isFinite(totalItemCount) ? totalItemCount : 1),
|
|
);
|
|
const normalizedActiveItemCount = Math.max(
|
|
0,
|
|
Math.min(
|
|
normalizedTotalItemCount,
|
|
Math.round(Number.isFinite(activeItemCount) ? activeItemCount : 0),
|
|
),
|
|
);
|
|
const volumePressure = Math.max(0, normalizedTotalItemCount - 90);
|
|
const depthMax =
|
|
MATCH3D_ITEM_VERTICAL_DEPTH_MAX_BASE +
|
|
volumePressure * MATCH3D_ITEM_VERTICAL_DEPTH_MAX_COUNT_SCALE;
|
|
const initialDepth = Math.min(
|
|
depthMax,
|
|
MATCH3D_ITEM_VERTICAL_DEPTH_BASE +
|
|
Math.sqrt(normalizedTotalItemCount) *
|
|
MATCH3D_ITEM_VERTICAL_DEPTH_SQRT_SCALE +
|
|
normalizedTotalItemCount * MATCH3D_ITEM_VERTICAL_DEPTH_COUNT_SCALE,
|
|
);
|
|
const remainingRatio =
|
|
normalizedActiveItemCount / normalizedTotalItemCount;
|
|
const activeDepth =
|
|
normalizedActiveItemCount <= 1 ? 0 : initialDepth * remainingRatio;
|
|
const pressureRatio = Math.min(1, volumePressure / 210);
|
|
const layerCapacity = Math.max(
|
|
MATCH3D_ITEM_VERTICAL_LAYER_CAPACITY_MIN,
|
|
Math.round(
|
|
MATCH3D_ITEM_VERTICAL_LAYER_CAPACITY_BASE - pressureRatio * 8,
|
|
),
|
|
);
|
|
const layerCount = Math.max(
|
|
1,
|
|
Math.ceil(normalizedActiveItemCount / layerCapacity),
|
|
);
|
|
const layerStep =
|
|
layerCount <= 1
|
|
? 0
|
|
: Math.min(
|
|
MATCH3D_ITEM_VERTICAL_LAYER_STEP_MAX,
|
|
activeDepth / Math.max(1, layerCount - 1),
|
|
);
|
|
|
|
return {
|
|
activeDepth,
|
|
activeItemCount: normalizedActiveItemCount,
|
|
baseY: MATCH3D_ITEM_BASE_HEIGHT,
|
|
initialDepth,
|
|
layerCapacity,
|
|
layerCount,
|
|
layerStep,
|
|
maxVerticalSpeed:
|
|
MATCH3D_ITEM_EXTREME_VERTICAL_SPEED_LIMIT + pressureRatio * 2.4,
|
|
surfaceY: MATCH3D_ITEM_BASE_HEIGHT + initialDepth,
|
|
};
|
|
}
|
|
|
|
export function resolveMatch3DStackTargetY(
|
|
totalItemCount: number,
|
|
activeItemCount: number,
|
|
activeLayerRank: number,
|
|
) {
|
|
const depthPlan = resolveMatch3DBoardDepthPlan(
|
|
totalItemCount,
|
|
activeItemCount,
|
|
);
|
|
if (depthPlan.activeItemCount <= 1) {
|
|
return depthPlan.surfaceY;
|
|
}
|
|
const clampedRank = Math.max(
|
|
0,
|
|
Math.min(depthPlan.activeItemCount - 1, activeLayerRank),
|
|
);
|
|
const layerIndex = Math.floor(
|
|
(clampedRank / Math.max(1, depthPlan.activeItemCount - 1)) *
|
|
(depthPlan.layerCount - 1),
|
|
);
|
|
|
|
return (
|
|
depthPlan.surfaceY -
|
|
(depthPlan.layerCount - 1 - layerIndex) * depthPlan.layerStep
|
|
);
|
|
}
|
|
|
|
export function resolveMatch3DBoundaryRadius(
|
|
asset: Match3DGeometryAsset,
|
|
radius: number,
|
|
) {
|
|
const bounds = resolveMatch3DColliderBounds(asset, radius);
|
|
return Math.hypot(bounds.width / 2, bounds.depth / 2);
|
|
}
|
|
|
|
export function resolveMatch3DSpawnY(
|
|
plannedSpawnY: number,
|
|
colliderHeight: number,
|
|
boundaryRadius: number,
|
|
position: Pick<Match3DSpawnHeightObstacle, 'x' | 'z'>,
|
|
obstacles: readonly Match3DSpawnHeightObstacle[],
|
|
) {
|
|
const normalizedPlannedY = Number.isFinite(plannedSpawnY)
|
|
? plannedSpawnY
|
|
: MATCH3D_ITEM_BASE_HEIGHT;
|
|
const selfHalfHeight = Math.max(0, colliderHeight / 2);
|
|
const selfBoundaryRadius = Math.max(0, boundaryRadius);
|
|
|
|
return obstacles.reduce((spawnY, obstacle) => {
|
|
const horizontalDistance = Math.hypot(
|
|
position.x - obstacle.x,
|
|
position.z - obstacle.z,
|
|
);
|
|
const overlapDistance =
|
|
selfBoundaryRadius +
|
|
Math.max(0, obstacle.boundaryRadius) +
|
|
MATCH3D_ITEM_SPAWN_STACK_RADIUS_PADDING;
|
|
if (horizontalDistance > overlapDistance) {
|
|
return spawnY;
|
|
}
|
|
|
|
// 中文注释：新物体生成时先避开同位置已有堆叠顶部，避免最后一波直接塞进未稳定的上层模型。
|
|
const obstacleTopY =
|
|
obstacle.y + Math.max(0, obstacle.colliderHeight) / 2;
|
|
return Math.max(
|
|
spawnY,
|
|
obstacleTopY + selfHalfHeight + MATCH3D_ITEM_SPAWN_STACK_CLEARANCE,
|
|
);
|
|
}, normalizedPlannedY);
|
|
}
|
|
|
|
export function resolveMatch3DSpawnDelay(
|
|
activeLayerRank: number,
|
|
layerCapacity = MATCH3D_ITEM_VERTICAL_LAYER_CAPACITY_BASE,
|
|
timingPlan?: Pick<
|
|
Match3DSpawnTimingPlan,
|
|
'burstSize' | 'layerDelayMs' | 'staggerMs'
|
|
>,
|
|
) {
|
|
const normalizedLayerCapacity = Math.max(1, layerCapacity);
|
|
const normalizedLayerRank = Math.max(0, activeLayerRank);
|
|
const layerDelayMs =
|
|
timingPlan?.layerDelayMs ?? MATCH3D_ITEM_SPAWN_LAYER_DELAY_MS;
|
|
const staggerMs = timingPlan?.staggerMs ?? MATCH3D_ITEM_SPAWN_STAGGER_MS;
|
|
const burstSize = Math.max(
|
|
1,
|
|
timingPlan?.burstSize ?? normalizedLayerCapacity,
|
|
);
|
|
const layerIndex = Math.floor(
|
|
normalizedLayerRank / normalizedLayerCapacity,
|
|
);
|
|
const burstIndex = Math.floor(normalizedLayerRank / burstSize);
|
|
return (
|
|
Math.max(layerIndex, burstIndex) * layerDelayMs +
|
|
(normalizedLayerRank % burstSize) * staggerMs
|
|
);
|
|
}
|
|
|
|
export function resolveMatch3DSpawnTimingPlan(
|
|
totalItemCount: number,
|
|
): Match3DSpawnTimingPlan {
|
|
const normalizedTotalItemCount = Math.max(
|
|
1,
|
|
Math.round(Number.isFinite(totalItemCount) ? totalItemCount : 1),
|
|
);
|
|
const crowdPressureRatio = Math.min(
|
|
1,
|
|
Math.max(0, normalizedTotalItemCount - 50) / 250,
|
|
);
|
|
const highCrowdRatio = Math.pow(crowdPressureRatio, 0.82);
|
|
const midCrowdRatio = Math.min(
|
|
1,
|
|
Math.max(0, normalizedTotalItemCount - 30) / 20,
|
|
);
|
|
|
|
return {
|
|
frameSpawnLimit:
|
|
normalizedTotalItemCount < 30
|
|
? 4
|
|
: normalizedTotalItemCount <= 120
|
|
? 2
|
|
: 1,
|
|
initialDelayMs: Math.round(
|
|
normalizedTotalItemCount < 30
|
|
? 220
|
|
: normalizedTotalItemCount <= 50
|
|
? 240 + midCrowdRatio * 40
|
|
: 260 + highCrowdRatio * 140,
|
|
),
|
|
layerDelayMs: Math.round(
|
|
normalizedTotalItemCount < 30
|
|
? MATCH3D_ITEM_SPAWN_LAYER_DELAY_MS
|
|
: normalizedTotalItemCount <= 50
|
|
? 96 + midCrowdRatio * 24
|
|
: 110 + highCrowdRatio * 50,
|
|
),
|
|
burstSize:
|
|
normalizedTotalItemCount < 30
|
|
? 8
|
|
: normalizedTotalItemCount <= 50
|
|
? 5
|
|
: normalizedTotalItemCount <= 120
|
|
? 7
|
|
: 6,
|
|
staggerMs: Math.round(
|
|
normalizedTotalItemCount < 30
|
|
? MATCH3D_ITEM_SPAWN_STAGGER_MS
|
|
: normalizedTotalItemCount <= 50
|
|
? 9 + midCrowdRatio * 3
|
|
: 12 + highCrowdRatio * 6,
|
|
),
|
|
};
|
|
}
|
|
|
|
function buildMatch3DStackHeightTargets(
|
|
run: Match3DRunSnapshot,
|
|
): Match3DStackHeightPlan {
|
|
const activeItems = run.items
|
|
.filter((item) => isItemState(item.state, 'in_board'))
|
|
.sort((left, right) => {
|
|
if (left.layer !== right.layer) {
|
|
return left.layer - right.layer;
|
|
}
|
|
return left.itemInstanceId.localeCompare(right.itemInstanceId);
|
|
});
|
|
const targets = new Map<string, StackHeightTarget>();
|
|
const depthPlan = resolveMatch3DBoardDepthPlan(
|
|
run.totalItemCount,
|
|
activeItems.length,
|
|
);
|
|
activeItems.forEach((item, activeLayerRank) => {
|
|
targets.set(
|
|
item.itemInstanceId,
|
|
{
|
|
activeLayerRank,
|
|
targetY: resolveMatch3DStackTargetY(
|
|
run.totalItemCount,
|
|
activeItems.length,
|
|
activeLayerRank,
|
|
),
|
|
},
|
|
);
|
|
});
|
|
return {
|
|
layerCapacity: depthPlan.layerCapacity,
|
|
targets,
|
|
};
|
|
}
|
|
|
|
export function resolveMatch3DPhysicsStabilityPlan(
|
|
totalItemCount: number,
|
|
): PhysicsStabilityPlan {
|
|
const normalizedTotalItemCount = Math.max(
|
|
1,
|
|
Math.round(Number.isFinite(totalItemCount) ? totalItemCount : 1),
|
|
);
|
|
const pressureRatio = Math.min(
|
|
1,
|
|
Math.max(0, normalizedTotalItemCount - 90) / 210,
|
|
);
|
|
|
|
return {
|
|
angularDamping: 0.48 + pressureRatio * 0.18,
|
|
contactFriction: 0.55 + pressureRatio * 0.22,
|
|
contactRestitution: 0.28 - pressureRatio * 0.14,
|
|
linearDamping: 0.38 + pressureRatio * 0.2,
|
|
maxHorizontalSpeed:
|
|
MATCH3D_ITEM_EXTREME_HORIZONTAL_SPEED_LIMIT - pressureRatio * 0.9,
|
|
maxVerticalSpeed:
|
|
MATCH3D_ITEM_EXTREME_VERTICAL_SPEED_LIMIT + pressureRatio * 2.4,
|
|
solverIterations: Math.round(10 + pressureRatio * 8),
|
|
solverTolerance: 0.001 - pressureRatio * 0.0006,
|
|
};
|
|
}
|
|
|
|
function applyDynamicStackLift(entry: PhysicsEntry) {
|
|
const liftDistance = entry.targetY - entry.body.position.y;
|
|
if (liftDistance <= 0.04) {
|
|
return;
|
|
}
|
|
const liftSpeed = Math.min(
|
|
MATCH3D_ITEM_LIFT_MAX_SPEED,
|
|
Math.max(0.7, liftDistance * 1.8),
|
|
);
|
|
|
|
// 中文注释：纵深只作为隐藏的表现层支撑；消除后给低层物体向上的托举，避免它们长期陷在锅底。
|
|
entry.body.force.y +=
|
|
entry.body.mass * liftDistance * MATCH3D_ITEM_LIFT_FORCE_SCALE;
|
|
entry.body.velocity.y = Math.max(entry.body.velocity.y, liftSpeed);
|
|
entry.body.wakeUp();
|
|
}
|
|
|
|
function applyStabilityPlanToBody(
|
|
entry: PhysicsEntry,
|
|
stabilityPlan: PhysicsStabilityPlan,
|
|
) {
|
|
const horizontalSpeed = Math.hypot(
|
|
entry.body.velocity.x,
|
|
entry.body.velocity.z,
|
|
);
|
|
if (horizontalSpeed > stabilityPlan.maxHorizontalSpeed) {
|
|
const ratio = stabilityPlan.maxHorizontalSpeed / horizontalSpeed;
|
|
entry.body.velocity.x *= ratio;
|
|
entry.body.velocity.z *= ratio;
|
|
}
|
|
entry.body.velocity.y = Math.max(
|
|
-stabilityPlan.maxVerticalSpeed,
|
|
Math.min(stabilityPlan.maxVerticalSpeed, entry.body.velocity.y),
|
|
);
|
|
}
|
|
|
|
function syncRuntimeStabilityPlan(
|
|
runtime: PhysicsRuntime,
|
|
totalItemCount: number,
|
|
) {
|
|
const stabilityPlan = resolveMatch3DPhysicsStabilityPlan(totalItemCount);
|
|
runtime.stabilityPlan = stabilityPlan;
|
|
runtime.world.defaultContactMaterial.friction =
|
|
stabilityPlan.contactFriction;
|
|
runtime.world.defaultContactMaterial.restitution =
|
|
stabilityPlan.contactRestitution;
|
|
const solver = runtime.world.solver as import('cannon-es').GSSolver;
|
|
solver.iterations = stabilityPlan.solverIterations;
|
|
solver.tolerance = stabilityPlan.solverTolerance;
|
|
|
|
runtime.entries.forEach((entry) => {
|
|
entry.body.angularDamping = stabilityPlan.angularDamping;
|
|
entry.body.linearDamping = stabilityPlan.linearDamping;
|
|
entry.body.sleepSpeedLimit = Math.max(
|
|
0.08,
|
|
0.16 - Math.min(1, totalItemCount / 300) * 0.05,
|
|
);
|
|
entry.body.sleepTimeLimit = 0.18;
|
|
});
|
|
}
|
|
|
|
function constrainBodyInsidePot(entry: PhysicsEntry) {
|
|
// 中文注释：空气墙按真实碰撞外接半径收束，长条积木不能再只按近似圆半径贴近锅边。
|
|
const maxDistance = Math.max(
|
|
0,
|
|
MATCH3D_ITEM_ACTIVITY_RADIUS - entry.boundaryRadius,
|
|
);
|
|
const horizontalDistance = Math.hypot(
|
|
entry.body.position.x,
|
|
entry.body.position.z,
|
|
);
|
|
if (horizontalDistance <= maxDistance || horizontalDistance <= 0) {
|
|
return;
|
|
}
|
|
|
|
const normalX = entry.body.position.x / horizontalDistance;
|
|
const normalZ = entry.body.position.z / horizontalDistance;
|
|
entry.body.position.x = normalX * maxDistance;
|
|
entry.body.position.z = normalZ * maxDistance;
|
|
|
|
const outwardSpeed =
|
|
entry.body.velocity.x * normalX + entry.body.velocity.z * normalZ;
|
|
if (outwardSpeed > 0) {
|
|
entry.body.velocity.x -= normalX * outwardSpeed * 1.35;
|
|
entry.body.velocity.z -= normalZ * outwardSpeed * 1.35;
|
|
}
|
|
}
|
|
|
|
function resolveSpawnAnimationProgress(entry: PhysicsEntry, now: number) {
|
|
return Math.min(
|
|
1,
|
|
Math.max(
|
|
0,
|
|
(now - entry.spawnStartedAt) / MATCH3D_ITEM_SPAWN_ANIMATION_MS,
|
|
),
|
|
);
|
|
}
|
|
|
|
function applyCenterGravity(entry: PhysicsEntry) {
|
|
if (MATCH3D_CENTER_GRAVITY_COEFFICIENT <= 0) {
|
|
return;
|
|
}
|
|
|
|
const horizontalDistance = Math.hypot(
|
|
entry.body.position.x,
|
|
entry.body.position.z,
|
|
);
|
|
if (horizontalDistance <= 0.08) {
|
|
return;
|
|
}
|
|
|
|
const visualRadius = toWorldPosition(entry.item).radius;
|
|
const maxDistance = Math.max(
|
|
0.1,
|
|
MATCH3D_ITEM_ACTIVITY_RADIUS - visualRadius * 1.05,
|
|
);
|
|
const edgePressure = Math.min(1, horizontalDistance / maxDistance);
|
|
const centerFalloff = Math.min(1, Math.max(0, (horizontalDistance - 1.15) / maxDistance));
|
|
const forceStrength =
|
|
MATCH3D_CENTER_GRAVITY_COEFFICIENT *
|
|
entry.body.mass *
|
|
(10.5 + edgePressure * 13) *
|
|
centerFalloff;
|
|
|
|
// 中文注释：中心引力只拉水平面，垂直方向仍交给锅底重力和物体堆叠处理。
|
|
entry.body.force.x +=
|
|
(-entry.body.position.x / horizontalDistance) * forceStrength;
|
|
entry.body.force.z +=
|
|
(-entry.body.position.z / horizontalDistance) * forceStrength;
|
|
}
|
|
|
|
export function resolveMatch3DColliderBounds(
|
|
asset: Match3DGeometryAsset,
|
|
radius: number,
|
|
) {
|
|
switch (asset.shape) {
|
|
case 'cylinder':
|
|
return {
|
|
depth: radius * 1.16,
|
|
height: radius * 1.312,
|
|
width: radius * 1.16,
|
|
};
|
|
case 'cone':
|
|
return {
|
|
depth: radius * 1.36,
|
|
height: radius * 1.48,
|
|
width: radius * 1.36,
|
|
};
|
|
case 'ring':
|
|
return {
|
|
depth: radius * 1.84,
|
|
height: radius * 0.42,
|
|
width: radius * 1.84,
|
|
};
|
|
case 'arch':
|
|
return {
|
|
depth: radius * 1.5,
|
|
height: radius * 0.42,
|
|
width: radius * 2,
|
|
};
|
|
case 'slope':
|
|
return {
|
|
depth: radius * (0.95 + asset.studsY * 0.62),
|
|
height: radius * asset.heightScale + radius * 0.12,
|
|
width: radius * (1 + asset.studsX * 0.66),
|
|
};
|
|
case 'tile':
|
|
return {
|
|
depth: radius * (0.9 + asset.studsY * 0.62),
|
|
height: Math.max(radius * 0.24, radius * asset.heightScale),
|
|
width: radius * (0.9 + asset.studsX * 0.62),
|
|
};
|
|
case 'brick':
|
|
default:
|
|
return {
|
|
depth: radius * (0.9 + asset.studsY * 0.62),
|
|
height: Math.max(radius * 0.24, radius * asset.heightScale) + radius * 0.12,
|
|
width: radius * (0.9 + asset.studsX * 0.62),
|
|
};
|
|
}
|
|
}
|
|
|
|
export function createMatch3DCannonShape(
|
|
cannon: CannonModule,
|
|
asset: Match3DGeometryAsset,
|
|
radius: number,
|
|
): CannonShape {
|
|
const bounds = resolveMatch3DColliderBounds(asset, radius);
|
|
switch (asset.shape) {
|
|
case 'cylinder':
|
|
case 'ring':
|
|
return new cannon.Cylinder(
|
|
bounds.width / 2,
|
|
bounds.width / 2,
|
|
bounds.height,
|
|
asset.shape === 'ring' ? 24 : 18,
|
|
);
|
|
case 'cone':
|
|
return new cannon.Cylinder(0, bounds.width / 2, bounds.height, 24);
|
|
default:
|
|
return new cannon.Box(
|
|
new cannon.Vec3(
|
|
bounds.width / 2,
|
|
bounds.height / 2,
|
|
bounds.depth / 2,
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
function buildPointShape(
|
|
three: ThreeModule,
|
|
radius: number,
|
|
points: Array<[number, number]>,
|
|
) {
|
|
const shape = new three.Shape();
|
|
points.forEach(([x, y], index) => {
|
|
if (index === 0) {
|
|
shape.moveTo(x * radius, y * radius);
|
|
} else {
|
|
shape.lineTo(x * radius, y * radius);
|
|
}
|
|
});
|
|
shape.closePath();
|
|
return shape;
|
|
}
|
|
|
|
function buildRingShape(three: ThreeModule, radius: number) {
|
|
const shape = new three.Shape();
|
|
shape.absarc(0, 0, radius * 0.92, 0, Math.PI * 2, false);
|
|
const hole = new three.Path();
|
|
hole.absarc(0, 0, radius * 0.43, 0, Math.PI * 2, true);
|
|
shape.holes.push(hole);
|
|
return shape;
|
|
}
|
|
|
|
function buildReadableShape(
|
|
three: ThreeModule,
|
|
shape: Match3DGeometryShape,
|
|
radius: number,
|
|
) {
|
|
switch (shape) {
|
|
case 'ring':
|
|
return buildRingShape(three, radius);
|
|
case 'arch':
|
|
return buildPointShape(three, radius, [
|
|
[-1, 0.8],
|
|
[1, 0.8],
|
|
[1, -0.7],
|
|
[0.42, -0.7],
|
|
[0.42, 0.24],
|
|
[-0.42, 0.24],
|
|
[-0.42, -0.7],
|
|
[-1, -0.7],
|
|
]);
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function createExtrudedReadableGeometry(
|
|
three: ThreeModule,
|
|
shape: Match3DGeometryShape,
|
|
radius: number,
|
|
) {
|
|
const path = buildReadableShape(three, shape, radius);
|
|
if (!path) {
|
|
return null;
|
|
}
|
|
const geometry = new three.ExtrudeGeometry(path, {
|
|
bevelEnabled: true,
|
|
bevelSegments: 2,
|
|
bevelSize: radius * 0.045,
|
|
bevelThickness: radius * 0.04,
|
|
depth: radius * 0.42,
|
|
steps: 1,
|
|
});
|
|
geometry.center();
|
|
geometry.rotateX(-Math.PI / 2);
|
|
return geometry;
|
|
}
|
|
|
|
export function createMatch3DThreeGeometry(
|
|
three: ThreeModule,
|
|
shape: Match3DGeometryShape,
|
|
radius: number,
|
|
) {
|
|
const readableGeometry = createExtrudedReadableGeometry(three, shape, radius);
|
|
if (readableGeometry) {
|
|
return readableGeometry;
|
|
}
|
|
|
|
switch (shape) {
|
|
case 'cylinder':
|
|
return new three.CylinderGeometry(radius * 0.72, radius * 0.72, radius * 1.35, 26);
|
|
case 'cone':
|
|
return new three.ConeGeometry(radius * 0.78, radius * 1.62, 28);
|
|
case 'tile':
|
|
case 'brick':
|
|
case 'slope':
|
|
case 'arch':
|
|
default:
|
|
return new three.BoxGeometry(radius * 1.8, radius * 0.9, radius * 1.2);
|
|
}
|
|
}
|
|
|
|
function createRoundedBlockBase(
|
|
three: ThreeModule,
|
|
asset: Match3DGeometryAsset,
|
|
radius: number,
|
|
) {
|
|
const width = radius * (0.9 + asset.studsX * 0.62);
|
|
const depth = radius * (0.9 + asset.studsY * 0.62);
|
|
const height = Math.max(radius * 0.24, radius * asset.heightScale);
|
|
return new three.BoxGeometry(width, height, depth);
|
|
}
|
|
|
|
function createStudGeometry(three: ThreeModule, radius: number) {
|
|
return new three.CylinderGeometry(radius * 0.18, radius * 0.18, radius * 0.12, 20);
|
|
}
|
|
|
|
function createSlopeGeometry(
|
|
three: ThreeModule,
|
|
asset: Match3DGeometryAsset,
|
|
radius: number,
|
|
) {
|
|
const width = radius * (1 + asset.studsX * 0.66);
|
|
const depth = radius * (0.95 + asset.studsY * 0.62);
|
|
const height = radius * asset.heightScale;
|
|
const halfW = width / 2;
|
|
const halfD = depth / 2;
|
|
const halfH = height / 2;
|
|
const vertices = new Float32Array([
|
|
-halfW, -halfH, -halfD,
|
|
halfW, -halfH, -halfD,
|
|
halfW, -halfH, halfD,
|
|
-halfW, -halfH, halfD,
|
|
halfW, halfH, -halfD,
|
|
halfW, halfH, halfD,
|
|
]);
|
|
const indices = [
|
|
0, 1, 2, 0, 2, 3,
|
|
1, 4, 5, 1, 5, 2,
|
|
3, 2, 5, 3, 5, 0,
|
|
0, 5, 4, 0, 4, 1,
|
|
];
|
|
const geometry = new three.BufferGeometry();
|
|
geometry.setAttribute('position', new three.BufferAttribute(vertices, 3));
|
|
geometry.setIndex(indices);
|
|
geometry.computeVertexNormals();
|
|
return geometry;
|
|
}
|
|
|
|
function addBrickStuds(
|
|
three: ThreeModule,
|
|
group: import('three').Group,
|
|
asset: Match3DGeometryAsset,
|
|
radius: number,
|
|
material: import('three').Material,
|
|
) {
|
|
if (asset.shape === 'tile') {
|
|
return;
|
|
}
|
|
const studGeometry = createStudGeometry(three, radius);
|
|
const width = radius * (0.9 + asset.studsX * 0.62);
|
|
const depth = radius * (0.9 + asset.studsY * 0.62);
|
|
const y = Math.max(radius * 0.24, radius * asset.heightScale) / 2 + radius * 0.06;
|
|
for (let row = 0; row < asset.studsY; row += 1) {
|
|
for (let column = 0; column < asset.studsX; column += 1) {
|
|
const stud = new three.Mesh(studGeometry.clone(), material);
|
|
stud.position.set(
|
|
((column + 0.5) / asset.studsX - 0.5) * width * 0.74,
|
|
y,
|
|
((row + 0.5) / asset.studsY - 0.5) * depth * 0.72,
|
|
);
|
|
group.add(stud);
|
|
}
|
|
}
|
|
}
|
|
|
|
function createBlockMesh(
|
|
three: ThreeModule,
|
|
asset: Match3DGeometryAsset,
|
|
radius: number,
|
|
material: import('three').Material,
|
|
) {
|
|
const group = new three.Group();
|
|
let baseGeometry: import('three').BufferGeometry;
|
|
if (asset.shape === 'slope') {
|
|
baseGeometry = createSlopeGeometry(three, asset, radius);
|
|
} else if (asset.shape === 'cylinder') {
|
|
baseGeometry = new three.CylinderGeometry(radius * 0.58, radius * 0.58, radius * 1.18, 28);
|
|
} else if (asset.shape === 'cone') {
|
|
baseGeometry = new three.ConeGeometry(radius * 0.68, radius * 1.48, 30);
|
|
} else if (MATCH3D_EXTRUDED_READABLE_SHAPES.has(asset.shape)) {
|
|
baseGeometry = createMatch3DThreeGeometry(three, asset.shape, radius);
|
|
} else {
|
|
baseGeometry = createRoundedBlockBase(three, asset, radius);
|
|
}
|
|
const base = new three.Mesh(baseGeometry, material);
|
|
group.add(base);
|
|
|
|
if (asset.shape === 'brick' || asset.shape === 'slope') {
|
|
addBrickStuds(three, group, asset, radius, material);
|
|
}
|
|
if (asset.shape === 'cylinder') {
|
|
const topStud = new three.Mesh(createStudGeometry(three, radius * 1.2), material);
|
|
topStud.position.y = radius * 0.65;
|
|
group.add(topStud);
|
|
}
|
|
if (asset.shape === 'cone') {
|
|
const lip = new three.Mesh(
|
|
new three.TorusGeometry(radius * 0.38, radius * 0.07, 8, 24),
|
|
material,
|
|
);
|
|
lip.rotation.x = Math.PI / 2;
|
|
lip.position.y = radius * 0.52;
|
|
group.add(lip);
|
|
}
|
|
return group;
|
|
}
|
|
|
|
function markObjectForItem(object: ThreeObject3D, itemInstanceId: string) {
|
|
object.userData.itemInstanceId = itemInstanceId;
|
|
object.traverse((child) => {
|
|
child.userData.itemInstanceId = itemInstanceId;
|
|
child.castShadow = true;
|
|
child.receiveShadow = true;
|
|
});
|
|
}
|
|
|
|
function disposeThreeObject(object: ThreeObject3D) {
|
|
object.traverse((child) => {
|
|
const maybeMesh = child as import('three').Mesh;
|
|
maybeMesh.geometry?.dispose();
|
|
const material = maybeMesh.material;
|
|
if (Array.isArray(material)) {
|
|
material.forEach((item) => item.dispose());
|
|
} else {
|
|
material?.dispose();
|
|
}
|
|
});
|
|
}
|
|
|
|
export function createMatch3DItemMesh(
|
|
three: ThreeModule,
|
|
item: Match3DItemSnapshot,
|
|
) {
|
|
const asset = resolveGeometryAsset(item.visualKey);
|
|
const position = toWorldPosition(item);
|
|
const material = new three.MeshStandardMaterial({
|
|
color: asset.fill,
|
|
emissive: asset.fill,
|
|
emissiveIntensity: 0.08,
|
|
metalness: 0.16,
|
|
opacity: asset.transparent ? 0.58 : 1,
|
|
roughness: 0.46,
|
|
transparent: Boolean(asset.transparent),
|
|
side: MATCH3D_EXTRUDED_READABLE_SHAPES.has(asset.shape)
|
|
? three.DoubleSide
|
|
: three.FrontSide,
|
|
});
|
|
const mesh = createBlockMesh(three, asset, position.radius, material);
|
|
markObjectForItem(mesh, item.itemInstanceId);
|
|
return {
|
|
lockReadableTop: MATCH3D_EXTRUDED_READABLE_SHAPES.has(asset.shape),
|
|
mesh,
|
|
radius: position.radius,
|
|
shape: asset.shape,
|
|
topRotationY: ((item.layer % 12) / 12) * Math.PI * 2,
|
|
position,
|
|
};
|
|
}
|
|
|
|
function createItemMesh(
|
|
three: ThreeModule,
|
|
item: Match3DItemSnapshot,
|
|
) {
|
|
return createMatch3DItemMesh(three, item);
|
|
}
|
|
|
|
export function buildMatch3DPhysicsEntrySignature(
|
|
runId: string,
|
|
item: Match3DItemSnapshot,
|
|
) {
|
|
return [
|
|
runId,
|
|
item.itemInstanceId,
|
|
item.itemTypeId,
|
|
item.visualKey,
|
|
item.radius.toFixed(5),
|
|
item.layer,
|
|
].join(':');
|
|
}
|
|
|
|
function removePhysicsEntry(
|
|
runtime: PhysicsRuntime,
|
|
itemInstanceId: string,
|
|
entry: PhysicsEntry,
|
|
) {
|
|
runtime.scene.remove(entry.mesh);
|
|
runtime.world.removeBody(entry.body);
|
|
disposeThreeObject(entry.mesh);
|
|
runtime.entries.delete(itemInstanceId);
|
|
}
|
|
|
|
function createPhysicsEntryFromPendingSpawn(
|
|
runtime: PhysicsRuntime,
|
|
pendingSpawn: PendingPhysicsSpawn,
|
|
now: number,
|
|
) {
|
|
const visual = createItemMesh(runtime.three, pendingSpawn.item);
|
|
const asset = resolveGeometryAsset(pendingSpawn.item.visualKey);
|
|
const colliderBounds = resolveMatch3DColliderBounds(asset, visual.radius);
|
|
const boundaryRadius = resolveMatch3DBoundaryRadius(asset, visual.radius);
|
|
const position = visual.position;
|
|
const maxDistance = Math.max(0, MATCH3D_ITEM_ACTIVITY_RADIUS - boundaryRadius);
|
|
const horizontalDistance = Math.hypot(position.x, position.z);
|
|
if (horizontalDistance > maxDistance && horizontalDistance > 0) {
|
|
const ratio = maxDistance / horizontalDistance;
|
|
position.x *= ratio;
|
|
position.z *= ratio;
|
|
}
|
|
const spawnLayerIndex = Math.floor(
|
|
Math.max(0, pendingSpawn.activeLayerRank) /
|
|
pendingSpawn.layerCapacity,
|
|
);
|
|
const plannedSpawnY =
|
|
pendingSpawn.targetY +
|
|
MATCH3D_ITEM_SPAWN_RISE_OFFSET +
|
|
Math.min(spawnLayerIndex * 0.05, 0.62);
|
|
const spawnY = resolveMatch3DSpawnY(
|
|
plannedSpawnY,
|
|
colliderBounds.height,
|
|
boundaryRadius,
|
|
position,
|
|
[...runtime.entries.values()].map((entry) => ({
|
|
boundaryRadius: entry.boundaryRadius,
|
|
colliderHeight: entry.colliderHeight,
|
|
x: entry.body.position.x,
|
|
y: entry.body.position.y,
|
|
z: entry.body.position.z,
|
|
})),
|
|
);
|
|
const body = new runtime.cannon.Body({
|
|
angularDamping: runtime.stabilityPlan.angularDamping,
|
|
allowSleep: true,
|
|
linearDamping: runtime.stabilityPlan.linearDamping,
|
|
mass: 1 + visual.radius * 0.7,
|
|
shape: createMatch3DCannonShape(runtime.cannon, asset, visual.radius),
|
|
sleepSpeedLimit: 0.12,
|
|
sleepTimeLimit: 0.18,
|
|
position: new runtime.cannon.Vec3(
|
|
position.x,
|
|
spawnY,
|
|
position.z,
|
|
),
|
|
});
|
|
body.velocity.set(
|
|
((pendingSpawn.item.layer % 5) - 2) * 0.06,
|
|
-0.35,
|
|
(((pendingSpawn.item.layer + 2) % 5) - 2) * 0.06,
|
|
);
|
|
body.angularVelocity.set(
|
|
0.1 + (pendingSpawn.item.layer % 3) * 0.025,
|
|
0.08,
|
|
0.08 + (pendingSpawn.item.layer % 4) * 0.02,
|
|
);
|
|
visual.mesh.scale.setScalar(0.82);
|
|
|
|
runtime.world.addBody(body);
|
|
runtime.scene.add(visual.mesh);
|
|
runtime.entries.set(pendingSpawn.item.itemInstanceId, {
|
|
body,
|
|
boundaryRadius,
|
|
colliderHeight: colliderBounds.height,
|
|
item: pendingSpawn.item,
|
|
lockReadableTop: visual.lockReadableTop,
|
|
mesh: visual.mesh,
|
|
renderSignature: pendingSpawn.renderSignature,
|
|
spawnStartedAt: now,
|
|
targetY: pendingSpawn.targetY,
|
|
topRotationY: visual.topRotationY,
|
|
});
|
|
}
|
|
|
|
function flushPendingPhysicsSpawns(runtime: PhysicsRuntime, now: number) {
|
|
const readySpawns = [...runtime.pendingSpawns.entries()]
|
|
.filter(([, pendingSpawn]) => now >= pendingSpawn.spawnAtMs)
|
|
.sort((left, right) => {
|
|
if (left[1].spawnAtMs !== right[1].spawnAtMs) {
|
|
return left[1].spawnAtMs - right[1].spawnAtMs;
|
|
}
|
|
if (left[1].activeLayerRank !== right[1].activeLayerRank) {
|
|
return left[1].activeLayerRank - right[1].activeLayerRank;
|
|
}
|
|
return left[0].localeCompare(right[0]);
|
|
});
|
|
const spawnBudget = runtime.spawnTimingPlan.frameSpawnLimit;
|
|
readySpawns.slice(0, spawnBudget).forEach(([itemInstanceId, pendingSpawn]) => {
|
|
runtime.pendingSpawns.delete(itemInstanceId);
|
|
createPhysicsEntryFromPendingSpawn(runtime, pendingSpawn, now);
|
|
});
|
|
}
|
|
|
|
function disposeRuntime(runtime: PhysicsRuntime | null) {
|
|
if (!runtime) {
|
|
return;
|
|
}
|
|
if (runtime.animationId !== null) {
|
|
window.cancelAnimationFrame(runtime.animationId);
|
|
}
|
|
runtime.entries.forEach((entry) => {
|
|
disposeThreeObject(entry.mesh);
|
|
});
|
|
runtime.renderer.dispose();
|
|
runtime.renderer.domElement.remove();
|
|
}
|
|
|
|
type TrayPreviewRuntime = {
|
|
animationId: number | null;
|
|
camera: ThreeCamera;
|
|
entries: Map<string, ThreeObject3D>;
|
|
renderer: ThreeRenderer;
|
|
scene: ThreeScene;
|
|
three: ThreeModule;
|
|
};
|
|
|
|
const MATCH3D_TRAY_SLOT_COUNT = 7;
|
|
const MATCH3D_TRAY_CAMERA_VERTICAL_HALF_SIZE = 0.5;
|
|
export const MATCH3D_TRAY_MODEL_TARGET_SIZE = 0.86;
|
|
export const MATCH3D_TRAY_MODEL_MIN_RELATIVE_SIZE = 0.9;
|
|
|
|
function buildTrayPreviewMeasureKey(item: Match3DItemSnapshot) {
|
|
return `${item.visualKey}:${item.radius.toFixed(5)}`;
|
|
}
|
|
|
|
function buildTrayPreviewSignature(
|
|
item: Match3DItemSnapshot,
|
|
referenceMaxDimension: number,
|
|
) {
|
|
return [
|
|
item.visualKey,
|
|
item.radius.toFixed(5),
|
|
referenceMaxDimension.toFixed(5),
|
|
MATCH3D_TRAY_MODEL_TARGET_SIZE.toFixed(5),
|
|
MATCH3D_TRAY_MODEL_MIN_RELATIVE_SIZE.toFixed(5),
|
|
].join(':');
|
|
}
|
|
|
|
export function measureMatch3DItemPreviewDimension(
|
|
three: ThreeModule,
|
|
item: Match3DItemSnapshot,
|
|
) {
|
|
const preview = createMatch3DItemMesh(three, item);
|
|
const bounds = new three.Box3().setFromObject(preview.mesh);
|
|
const size = bounds.getSize(new three.Vector3());
|
|
disposeThreeObject(preview.mesh);
|
|
return Math.max(size.x, size.y, size.z, 0.001);
|
|
}
|
|
|
|
export function resolveMatch3DTrayPreviewReferenceDimension(
|
|
three: ThreeModule,
|
|
referenceItems: Match3DItemSnapshot[],
|
|
) {
|
|
const measuredDimensions = new Map<string, number>();
|
|
let maxDimension = 0;
|
|
for (const item of referenceItems) {
|
|
const key = buildTrayPreviewMeasureKey(item);
|
|
const dimension =
|
|
measuredDimensions.get(key) ??
|
|
measureMatch3DItemPreviewDimension(three, item);
|
|
measuredDimensions.set(key, dimension);
|
|
maxDimension = Math.max(maxDimension, dimension);
|
|
}
|
|
return Math.max(maxDimension, 0.001);
|
|
}
|
|
|
|
export function resolveMatch3DTrayPreviewRotation(visualKey: string) {
|
|
const asset = resolveGeometryAsset(visualKey);
|
|
const yaw =
|
|
asset.studsX >= asset.studsY ? Math.PI / 4 : Math.PI / 5;
|
|
|
|
// 中文注释：托盘里用轻微俯视 3/4 姿态展示体积，固定朝向只影响 UI 预览，不反写场内物理姿态。
|
|
switch (asset.shape) {
|
|
case 'tile':
|
|
case 'ring':
|
|
return {
|
|
x: -0.28,
|
|
y: yaw,
|
|
z: 0.22,
|
|
};
|
|
case 'slope':
|
|
case 'arch':
|
|
return {
|
|
x: -0.34,
|
|
y: yaw,
|
|
z: 0.24,
|
|
};
|
|
case 'cylinder':
|
|
case 'cone':
|
|
return {
|
|
x: -0.3,
|
|
y: Math.PI / 4,
|
|
z: 0.2,
|
|
};
|
|
case 'brick':
|
|
default:
|
|
return {
|
|
x: -0.32,
|
|
y: yaw,
|
|
z: 0.24,
|
|
};
|
|
}
|
|
}
|
|
|
|
export function resolveMatch3DTrayPreviewScale(
|
|
itemDimension: number,
|
|
referenceMaxDimension: number,
|
|
) {
|
|
const maxScale = MATCH3D_TRAY_MODEL_TARGET_SIZE / Math.max(referenceMaxDimension, 0.001);
|
|
const readableScale =
|
|
(MATCH3D_TRAY_MODEL_TARGET_SIZE * MATCH3D_TRAY_MODEL_MIN_RELATIVE_SIZE) /
|
|
Math.max(itemDimension, 0.001);
|
|
return Math.max(
|
|
maxScale,
|
|
readableScale,
|
|
);
|
|
}
|
|
|
|
function disposeTrayPreview(runtime: TrayPreviewRuntime | null) {
|
|
if (!runtime) {
|
|
return;
|
|
}
|
|
if (runtime.animationId !== null) {
|
|
window.cancelAnimationFrame(runtime.animationId);
|
|
}
|
|
runtime.entries.forEach((mesh) => {
|
|
disposeThreeObject(mesh);
|
|
});
|
|
runtime.entries.clear();
|
|
runtime.renderer.dispose();
|
|
runtime.renderer.domElement.remove();
|
|
}
|
|
|
|
function positionTrayPreviewObject(
|
|
runtime: TrayPreviewRuntime,
|
|
object: ThreeObject3D,
|
|
slotIndex: number,
|
|
) {
|
|
const slotWidth =
|
|
(runtime.camera.right - runtime.camera.left) / MATCH3D_TRAY_SLOT_COUNT;
|
|
const slotCenter = runtime.camera.left + slotWidth * (slotIndex + 0.5);
|
|
const screenX = new runtime.three.Vector3(1, 0, 0).applyQuaternion(
|
|
runtime.camera.quaternion,
|
|
);
|
|
// 中文注释：托盘模型按相机屏幕横轴排布，保留斜视角但不让 UI 格子投影成斜线。
|
|
object.position.copy(screenX.multiplyScalar(slotCenter));
|
|
}
|
|
|
|
function relayoutTrayPreviewEntries(runtime: TrayPreviewRuntime) {
|
|
runtime.entries.forEach((object) => {
|
|
const slotIndex =
|
|
typeof object.userData.traySlotIndex === 'number'
|
|
? object.userData.traySlotIndex
|
|
: 0;
|
|
positionTrayPreviewObject(runtime, object, slotIndex);
|
|
});
|
|
}
|
|
|
|
export function Match3DTrayPreviewBoard({
|
|
onFallback,
|
|
referenceItems,
|
|
slotItems,
|
|
}: {
|
|
onFallback: () => void;
|
|
referenceItems: Match3DItemSnapshot[];
|
|
slotItems: Array<Match3DItemSnapshot | null>;
|
|
}) {
|
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
const runtimeRef = useRef<TrayPreviewRuntime | null>(null);
|
|
const [ready, setReady] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
let cleanupResize: (() => void) | undefined;
|
|
|
|
async function setup() {
|
|
const container = containerRef.current;
|
|
if (!container || !hasWebGLSupport()) {
|
|
onFallback();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const three = await import('three');
|
|
if (cancelled || !containerRef.current) {
|
|
return;
|
|
}
|
|
|
|
const renderer = new three.WebGLRenderer({
|
|
alpha: true,
|
|
antialias: true,
|
|
});
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.8));
|
|
renderer.outputColorSpace = three.SRGBColorSpace;
|
|
renderer.domElement.style.display = 'block';
|
|
renderer.domElement.style.height = '100%';
|
|
renderer.domElement.style.inset = '0';
|
|
renderer.domElement.style.position = 'absolute';
|
|
renderer.domElement.style.width = '100%';
|
|
container.appendChild(renderer.domElement);
|
|
const handleContextLost = (event: Event) => {
|
|
event.preventDefault();
|
|
onFallback();
|
|
};
|
|
renderer.domElement.addEventListener(
|
|
'webglcontextlost',
|
|
handleContextLost,
|
|
false,
|
|
);
|
|
|
|
const scene = new three.Scene();
|
|
scene.background = null;
|
|
const camera = new three.OrthographicCamera(
|
|
-4.4,
|
|
4.4,
|
|
MATCH3D_TRAY_CAMERA_VERTICAL_HALF_SIZE,
|
|
-MATCH3D_TRAY_CAMERA_VERTICAL_HALF_SIZE,
|
|
0.1,
|
|
40,
|
|
);
|
|
camera.position.set(4.1, 5.4, 4.45);
|
|
camera.lookAt(0, 0, 0);
|
|
|
|
scene.add(new three.AmbientLight(0xffffff, 0.82));
|
|
const keyLight = new three.DirectionalLight(0xffffff, 3.1);
|
|
keyLight.position.set(-3.4, 5.2, 3.8);
|
|
scene.add(keyLight);
|
|
const fillLight = new three.DirectionalLight(0xfef3c7, 0.55);
|
|
fillLight.position.set(3.2, 2.4, -3.2);
|
|
scene.add(fillLight);
|
|
const rimLight = new three.DirectionalLight(0xffffff, 0.75);
|
|
rimLight.position.set(1.2, 2.2, -4.4);
|
|
scene.add(rimLight);
|
|
|
|
const resize = () => {
|
|
const rect = container.getBoundingClientRect();
|
|
const width = Math.max(1, rect.width);
|
|
const height = Math.max(1, rect.height);
|
|
const aspect = width / height;
|
|
camera.top = MATCH3D_TRAY_CAMERA_VERTICAL_HALF_SIZE;
|
|
camera.bottom = -MATCH3D_TRAY_CAMERA_VERTICAL_HALF_SIZE;
|
|
camera.left = -MATCH3D_TRAY_CAMERA_VERTICAL_HALF_SIZE * aspect;
|
|
camera.right = MATCH3D_TRAY_CAMERA_VERTICAL_HALF_SIZE * aspect;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(width, height, false);
|
|
relayoutTrayPreviewEntries({
|
|
animationId: null,
|
|
camera,
|
|
entries: runtimeRef.current?.entries ?? new Map(),
|
|
renderer,
|
|
scene,
|
|
three,
|
|
});
|
|
renderer.render(scene, camera);
|
|
};
|
|
resize();
|
|
|
|
const ro = new ResizeObserver(resize);
|
|
ro.observe(container);
|
|
|
|
const animate = () => {
|
|
const activeRuntime = runtimeRef.current;
|
|
if (!activeRuntime) {
|
|
return;
|
|
}
|
|
renderer.render(scene, camera);
|
|
activeRuntime.animationId = window.requestAnimationFrame(animate);
|
|
};
|
|
runtimeRef.current = {
|
|
animationId: window.requestAnimationFrame(animate),
|
|
camera,
|
|
entries: new Map(),
|
|
renderer,
|
|
scene,
|
|
three,
|
|
};
|
|
setReady(true);
|
|
|
|
cleanupResize = () => {
|
|
renderer.domElement.removeEventListener(
|
|
'webglcontextlost',
|
|
handleContextLost,
|
|
false,
|
|
);
|
|
ro.disconnect();
|
|
};
|
|
} catch {
|
|
onFallback();
|
|
}
|
|
}
|
|
|
|
void setup();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
cleanupResize?.();
|
|
disposeTrayPreview(runtimeRef.current);
|
|
runtimeRef.current = null;
|
|
setReady(false);
|
|
};
|
|
}, [onFallback]);
|
|
|
|
useEffect(() => {
|
|
const runtime = runtimeRef.current;
|
|
if (!runtime) {
|
|
return;
|
|
}
|
|
const activeIds = new Set(
|
|
slotItems
|
|
.filter((item): item is Match3DItemSnapshot => Boolean(item))
|
|
.map((item) => item.itemInstanceId),
|
|
);
|
|
|
|
runtime.entries.forEach((mesh, itemInstanceId) => {
|
|
if (!activeIds.has(itemInstanceId)) {
|
|
runtime.scene.remove(mesh);
|
|
disposeThreeObject(mesh);
|
|
runtime.entries.delete(itemInstanceId);
|
|
}
|
|
});
|
|
|
|
const referenceMaxDimension = resolveMatch3DTrayPreviewReferenceDimension(
|
|
runtime.three,
|
|
referenceItems.length > 0
|
|
? referenceItems
|
|
: slotItems.filter(
|
|
(item): item is Match3DItemSnapshot => Boolean(item),
|
|
),
|
|
);
|
|
|
|
slotItems.forEach((item, slotIndex) => {
|
|
if (!item) {
|
|
return;
|
|
}
|
|
const previewSignature = buildTrayPreviewSignature(
|
|
item,
|
|
referenceMaxDimension,
|
|
);
|
|
let mesh = runtime.entries.get(item.itemInstanceId);
|
|
if (mesh && mesh.userData.trayPreviewSignature !== previewSignature) {
|
|
runtime.scene.remove(mesh);
|
|
disposeThreeObject(mesh);
|
|
runtime.entries.delete(item.itemInstanceId);
|
|
mesh = undefined;
|
|
}
|
|
if (!mesh) {
|
|
const preview = createMatch3DItemMesh(runtime.three, item);
|
|
const model = preview.mesh;
|
|
const rotation = resolveMatch3DTrayPreviewRotation(item.visualKey);
|
|
model.rotation.set(rotation.x, rotation.y, rotation.z);
|
|
|
|
// 中文注释：模型先在自身 pivot 内居中，再把 pivot 放进对应格子，避免非对称积木偏出 UI 栏。
|
|
const itemBounds = new runtime.three.Box3().setFromObject(model);
|
|
const itemSize = itemBounds.getSize(new runtime.three.Vector3());
|
|
const itemDimension = Math.max(
|
|
itemSize.x,
|
|
itemSize.y,
|
|
itemSize.z,
|
|
0.001,
|
|
);
|
|
model.scale.multiplyScalar(
|
|
resolveMatch3DTrayPreviewScale(
|
|
itemDimension,
|
|
referenceMaxDimension,
|
|
),
|
|
);
|
|
const centeredBounds = new runtime.three.Box3().setFromObject(model);
|
|
const center = centeredBounds.getCenter(new runtime.three.Vector3());
|
|
model.position.sub(center);
|
|
mesh = new runtime.three.Group();
|
|
mesh.add(model);
|
|
mesh.userData.trayPreviewSignature = previewSignature;
|
|
runtime.scene.add(mesh);
|
|
runtime.entries.set(item.itemInstanceId, mesh);
|
|
}
|
|
const activeMesh = mesh;
|
|
activeMesh.userData.traySlotIndex = slotIndex;
|
|
positionTrayPreviewObject(runtime, activeMesh, slotIndex);
|
|
});
|
|
|
|
runtime.renderer.render(runtime.scene, runtime.camera);
|
|
}, [ready, referenceItems, slotItems]);
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="pointer-events-none absolute inset-0 z-10"
|
|
data-testid="match3d-tray-model-board"
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function Match3DPhysicsBoard({
|
|
run,
|
|
disabled,
|
|
onClickItem,
|
|
onFallback,
|
|
}: Match3DPhysicsBoardProps) {
|
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
|
const runtimeRef = useRef<PhysicsRuntime | null>(null);
|
|
const disabledRef = useRef(disabled);
|
|
const fallbackRef = useRef(onFallback);
|
|
const runRef = useRef(run);
|
|
const [ready, setReady] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fallbackRef.current = onFallback;
|
|
}, [onFallback]);
|
|
|
|
useEffect(() => {
|
|
disabledRef.current = disabled;
|
|
}, [disabled]);
|
|
|
|
useEffect(() => {
|
|
runRef.current = run;
|
|
}, [run]);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
async function setup() {
|
|
const container = containerRef.current;
|
|
if (!container || !hasWebGLSupport()) {
|
|
fallbackRef.current();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const [three, cannon] = await Promise.all([
|
|
import('three'),
|
|
import('cannon-es'),
|
|
]);
|
|
if (cancelled || !containerRef.current) {
|
|
return;
|
|
}
|
|
|
|
const renderer = new three.WebGLRenderer({
|
|
alpha: true,
|
|
antialias: true,
|
|
});
|
|
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.8));
|
|
renderer.shadowMap.enabled = true;
|
|
renderer.outputColorSpace = three.SRGBColorSpace;
|
|
container.appendChild(renderer.domElement);
|
|
const handleContextLost = (event: Event) => {
|
|
event.preventDefault();
|
|
fallbackRef.current();
|
|
};
|
|
renderer.domElement.addEventListener(
|
|
'webglcontextlost',
|
|
handleContextLost,
|
|
false,
|
|
);
|
|
|
|
const scene = new three.Scene();
|
|
scene.background = null;
|
|
|
|
const camera = new three.OrthographicCamera(
|
|
-MATCH3D_CAMERA_HALF_SIZE,
|
|
MATCH3D_CAMERA_HALF_SIZE,
|
|
MATCH3D_CAMERA_HALF_SIZE,
|
|
-MATCH3D_CAMERA_HALF_SIZE,
|
|
0.1,
|
|
80,
|
|
);
|
|
camera.position.set(0, 17.5, 0.01);
|
|
camera.lookAt(0, 0, 0);
|
|
|
|
const ambient = new three.AmbientLight(0xffffff, 1.28);
|
|
scene.add(ambient);
|
|
const keyLight = new three.DirectionalLight(0xffffff, 2.35);
|
|
keyLight.position.set(-3.5, 10, 3.2);
|
|
keyLight.castShadow = true;
|
|
scene.add(keyLight);
|
|
const fillLight = new three.DirectionalLight(0xfef3c7, 1.05);
|
|
fillLight.position.set(4, 6, -4.5);
|
|
scene.add(fillLight);
|
|
|
|
const floor = new three.Mesh(
|
|
new three.CircleGeometry(MATCH3D_POT_FLOOR_RADIUS, 112),
|
|
new three.MeshStandardMaterial({
|
|
color: '#d89943',
|
|
metalness: 0.05,
|
|
roughness: 0.72,
|
|
}),
|
|
);
|
|
floor.rotation.x = -Math.PI / 2;
|
|
floor.receiveShadow = true;
|
|
scene.add(floor);
|
|
|
|
const basinShade = new three.Mesh(
|
|
new three.RingGeometry(MATCH3D_POT_INNER_RADIUS * 0.72, MATCH3D_POT_FLOOR_RADIUS, 112),
|
|
new three.MeshBasicMaterial({
|
|
color: '#8a4f1f',
|
|
opacity: 0.2,
|
|
side: three.DoubleSide,
|
|
transparent: true,
|
|
}),
|
|
);
|
|
basinShade.rotation.x = -Math.PI / 2;
|
|
basinShade.position.y = 0.012;
|
|
scene.add(basinShade);
|
|
|
|
const potWall = new three.Mesh(
|
|
new three.CylinderGeometry(
|
|
MATCH3D_POT_OUTER_RADIUS,
|
|
MATCH3D_POT_FLOOR_RADIUS,
|
|
MATCH3D_POT_WALL_HEIGHT,
|
|
112,
|
|
1,
|
|
true,
|
|
),
|
|
new three.MeshStandardMaterial({
|
|
color: '#b76d2b',
|
|
metalness: 0.08,
|
|
opacity: 0.46,
|
|
roughness: 0.64,
|
|
side: three.DoubleSide,
|
|
transparent: true,
|
|
}),
|
|
);
|
|
potWall.position.y = MATCH3D_POT_WALL_HEIGHT / 2;
|
|
potWall.receiveShadow = true;
|
|
scene.add(potWall);
|
|
|
|
const innerRim = new three.Mesh(
|
|
new three.TorusGeometry(MATCH3D_POT_INNER_RADIUS, 0.08, 10, 112),
|
|
new three.MeshStandardMaterial({
|
|
color: '#f7dd9c',
|
|
metalness: 0.08,
|
|
roughness: 0.5,
|
|
}),
|
|
);
|
|
innerRim.rotation.x = Math.PI / 2;
|
|
innerRim.position.y = MATCH3D_POT_WALL_HEIGHT + 0.035;
|
|
scene.add(innerRim);
|
|
|
|
const rim = new three.Mesh(
|
|
new three.TorusGeometry(MATCH3D_POT_OUTER_RADIUS, 0.22, 12, 112),
|
|
new three.MeshStandardMaterial({
|
|
color: '#f1d38e',
|
|
metalness: 0.1,
|
|
roughness: 0.52,
|
|
}),
|
|
);
|
|
rim.rotation.x = Math.PI / 2;
|
|
rim.position.y = MATCH3D_POT_WALL_HEIGHT + 0.1;
|
|
scene.add(rim);
|
|
|
|
const stabilityPlan = resolveMatch3DPhysicsStabilityPlan(
|
|
runRef.current.totalItemCount,
|
|
);
|
|
const spawnTimingPlan = resolveMatch3DSpawnTimingPlan(
|
|
runRef.current.totalItemCount,
|
|
);
|
|
const world = new cannon.World({
|
|
gravity: new cannon.Vec3(0, -6.2, 0),
|
|
});
|
|
world.allowSleep = true;
|
|
world.broadphase = new cannon.SAPBroadphase(world);
|
|
world.defaultContactMaterial.friction = stabilityPlan.contactFriction;
|
|
world.defaultContactMaterial.restitution =
|
|
stabilityPlan.contactRestitution;
|
|
const solver = world.solver as import('cannon-es').GSSolver;
|
|
solver.iterations = stabilityPlan.solverIterations;
|
|
solver.tolerance = stabilityPlan.solverTolerance;
|
|
|
|
const floorBody = new cannon.Body({
|
|
mass: 0,
|
|
shape: new cannon.Plane(),
|
|
});
|
|
floorBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0);
|
|
world.addBody(floorBody);
|
|
|
|
const wallSegments = 56;
|
|
for (let index = 0; index < wallSegments; index += 1) {
|
|
const angle = (index / wallSegments) * Math.PI * 2;
|
|
const x = Math.cos(angle) * (MATCH3D_POT_INNER_RADIUS + 0.18);
|
|
const z = Math.sin(angle) * (MATCH3D_POT_INNER_RADIUS + 0.18);
|
|
const wall = new cannon.Body({
|
|
mass: 0,
|
|
shape: new cannon.Box(new cannon.Vec3(0.22, MATCH3D_POT_WALL_HEIGHT, 0.34)),
|
|
position: new cannon.Vec3(x, MATCH3D_POT_WALL_HEIGHT, z),
|
|
});
|
|
wall.quaternion.setFromEuler(0, -angle, 0);
|
|
world.addBody(wall);
|
|
}
|
|
|
|
const runtime: PhysicsRuntime = {
|
|
animationId: null,
|
|
camera,
|
|
entries: new Map(),
|
|
pendingSpawns: new Map(),
|
|
raycaster: new three.Raycaster(),
|
|
renderer,
|
|
scene,
|
|
spawnTimingPlan,
|
|
stabilityPlan,
|
|
world,
|
|
three,
|
|
cannon,
|
|
};
|
|
runtimeRef.current = runtime;
|
|
|
|
const resize = () => {
|
|
const rect = container.getBoundingClientRect();
|
|
const size = Math.max(1, Math.min(rect.width, rect.height));
|
|
renderer.setSize(size, size, false);
|
|
camera.left = -MATCH3D_CAMERA_HALF_SIZE;
|
|
camera.right = MATCH3D_CAMERA_HALF_SIZE;
|
|
camera.top = MATCH3D_CAMERA_HALF_SIZE;
|
|
camera.bottom = -MATCH3D_CAMERA_HALF_SIZE;
|
|
camera.updateProjectionMatrix();
|
|
};
|
|
resize();
|
|
|
|
const ro = new ResizeObserver(resize);
|
|
ro.observe(container);
|
|
|
|
let lastTime = performance.now();
|
|
const animate = (now: number) => {
|
|
const activeRuntime = runtimeRef.current;
|
|
if (!activeRuntime) {
|
|
return;
|
|
}
|
|
const delta = Math.min(0.04, Math.max(0.001, (now - lastTime) / 1000));
|
|
lastTime = now;
|
|
flushPendingPhysicsSpawns(activeRuntime, now);
|
|
activeRuntime.entries.forEach((entry) => {
|
|
applyCenterGravity(entry);
|
|
applyDynamicStackLift(entry);
|
|
applyStabilityPlanToBody(entry, activeRuntime.stabilityPlan);
|
|
constrainBodyInsidePot(entry);
|
|
});
|
|
activeRuntime.world.step(MATCH3D_PHYSICS_STEP, delta, 5);
|
|
|
|
activeRuntime.entries.forEach((entry) => {
|
|
applyCenterGravity(entry);
|
|
applyDynamicStackLift(entry);
|
|
applyStabilityPlanToBody(entry, activeRuntime.stabilityPlan);
|
|
constrainBodyInsidePot(entry);
|
|
const spawnProgress = resolveSpawnAnimationProgress(entry, now);
|
|
const spawnScale = 0.82 + spawnProgress * 0.18;
|
|
entry.mesh.scale.setScalar(spawnScale);
|
|
entry.mesh.position.set(
|
|
entry.body.position.x,
|
|
entry.body.position.y - (1 - spawnProgress) * 0.06,
|
|
entry.body.position.z,
|
|
);
|
|
entry.mesh.quaternion.set(
|
|
entry.lockReadableTop ? 0 : entry.body.quaternion.x,
|
|
entry.lockReadableTop ? 0 : entry.body.quaternion.y,
|
|
entry.lockReadableTop ? 0 : entry.body.quaternion.z,
|
|
entry.lockReadableTop ? 1 : entry.body.quaternion.w,
|
|
);
|
|
if (entry.lockReadableTop) {
|
|
entry.mesh.rotation.y = entry.topRotationY;
|
|
}
|
|
});
|
|
|
|
activeRuntime.renderer.render(activeRuntime.scene, activeRuntime.camera);
|
|
activeRuntime.animationId = window.requestAnimationFrame(animate);
|
|
};
|
|
runtime.animationId = window.requestAnimationFrame(animate);
|
|
setReady(true);
|
|
|
|
return () => {
|
|
renderer.domElement.removeEventListener(
|
|
'webglcontextlost',
|
|
handleContextLost,
|
|
false,
|
|
);
|
|
ro.disconnect();
|
|
};
|
|
} catch {
|
|
fallbackRef.current();
|
|
}
|
|
}
|
|
|
|
let cleanupResize: (() => void) | undefined;
|
|
void setup().then((cleanup) => {
|
|
cleanupResize = cleanup;
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
cleanupResize?.();
|
|
disposeRuntime(runtimeRef.current);
|
|
runtimeRef.current = null;
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const runtime = runtimeRef.current;
|
|
if (!runtime) {
|
|
return;
|
|
}
|
|
|
|
const activeItemIds = new Set(
|
|
run.items
|
|
.filter((item) => isItemState(item.state, 'in_board'))
|
|
.map((item) => item.itemInstanceId),
|
|
);
|
|
|
|
runtime.entries.forEach((entry, itemInstanceId) => {
|
|
if (!activeItemIds.has(itemInstanceId)) {
|
|
removePhysicsEntry(runtime, itemInstanceId, entry);
|
|
}
|
|
});
|
|
|
|
runtime.pendingSpawns.forEach((pendingSpawn, itemInstanceId) => {
|
|
if (!activeItemIds.has(itemInstanceId)) {
|
|
runtime.pendingSpawns.delete(itemInstanceId);
|
|
}
|
|
});
|
|
|
|
syncRuntimeStabilityPlan(runtime, run.totalItemCount);
|
|
runtime.spawnTimingPlan = resolveMatch3DSpawnTimingPlan(run.totalItemCount);
|
|
const stackHeightPlan = buildMatch3DStackHeightTargets(run);
|
|
|
|
run.items.forEach((item) => {
|
|
if (!isItemState(item.state, 'in_board')) {
|
|
return;
|
|
}
|
|
|
|
const renderSignature = buildMatch3DPhysicsEntrySignature(
|
|
run.runId,
|
|
item,
|
|
);
|
|
const existing = runtime.entries.get(item.itemInstanceId);
|
|
if (existing) {
|
|
if (existing.renderSignature !== renderSignature) {
|
|
// 中文注释：后端重开局时 itemInstanceId 可能复用，旧 3D 模型必须随当前 run 快照重建。
|
|
removePhysicsEntry(runtime, item.itemInstanceId, existing);
|
|
} else {
|
|
existing.item = item;
|
|
existing.targetY =
|
|
stackHeightPlan.targets.get(item.itemInstanceId)?.targetY ??
|
|
existing.body.position.y;
|
|
existing.mesh.visible = true;
|
|
return;
|
|
}
|
|
}
|
|
|
|
const existingPending = runtime.pendingSpawns.get(item.itemInstanceId);
|
|
if (existingPending) {
|
|
if (existingPending.renderSignature !== renderSignature) {
|
|
runtime.pendingSpawns.delete(item.itemInstanceId);
|
|
} else {
|
|
existingPending.item = item;
|
|
existingPending.layerCapacity = stackHeightPlan.layerCapacity;
|
|
existingPending.targetY =
|
|
stackHeightPlan.targets.get(item.itemInstanceId)?.targetY ??
|
|
existingPending.targetY;
|
|
return;
|
|
}
|
|
}
|
|
|
|
const stackTarget = stackHeightPlan.targets.get(item.itemInstanceId);
|
|
const spawnAtMs =
|
|
performance.now() +
|
|
runtime.spawnTimingPlan.initialDelayMs +
|
|
resolveMatch3DSpawnDelay(
|
|
stackTarget?.activeLayerRank ?? item.layer - 1,
|
|
stackHeightPlan.layerCapacity,
|
|
runtime.spawnTimingPlan,
|
|
);
|
|
runtime.pendingSpawns.set(item.itemInstanceId, {
|
|
activeLayerRank: stackTarget?.activeLayerRank ?? item.layer - 1,
|
|
item,
|
|
layerCapacity: stackHeightPlan.layerCapacity,
|
|
renderSignature,
|
|
spawnAtMs,
|
|
targetY:
|
|
stackTarget?.targetY ??
|
|
resolveMatch3DStackTargetY(run.totalItemCount, activeItemIds.size, 0),
|
|
});
|
|
});
|
|
}, [ready, run.items, run.runId, run.snapshotVersion]);
|
|
|
|
const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
|
|
event.stopPropagation();
|
|
const runtime = runtimeRef.current;
|
|
const container = containerRef.current;
|
|
if (!runtime || !container || disabledRef.current) {
|
|
return;
|
|
}
|
|
|
|
const rect = container.getBoundingClientRect();
|
|
const pointer = new runtime.three.Vector2(
|
|
((event.clientX - rect.left) / rect.width) * 2 - 1,
|
|
-(((event.clientY - rect.top) / rect.height) * 2 - 1),
|
|
);
|
|
runtime.raycaster.setFromCamera(pointer, runtime.camera);
|
|
const meshes = [...runtime.entries.values()]
|
|
.filter(
|
|
(entry) =>
|
|
entry.item.clickable &&
|
|
isItemState(entry.item.state, 'in_board') &&
|
|
entry.mesh.visible,
|
|
)
|
|
.map((entry) => entry.mesh);
|
|
const hit = runtime.raycaster.intersectObjects(meshes, true)[0];
|
|
const itemInstanceId =
|
|
typeof hit?.object.userData.itemInstanceId === 'string'
|
|
? hit.object.userData.itemInstanceId
|
|
: null;
|
|
if (!itemInstanceId) {
|
|
return;
|
|
}
|
|
const item = runRef.current.items.find(
|
|
(entry) => entry.itemInstanceId === itemInstanceId,
|
|
);
|
|
if (item?.clickable && isItemState(item.state, 'in_board')) {
|
|
onClickItem(item);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="absolute inset-0 z-10 overflow-visible"
|
|
data-testid="match3d-physics-board"
|
|
onPointerDown={handlePointerDown}
|
|
>
|
|
{!ready ? (
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_44%_35%,rgba(255,255,255,0.18),transparent_28%)]" />
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Match3DPhysicsBoard;
|