게임·입장 UX와 물리/고지 개선을 반영한다.
비행기(세계여행) 칸 선택 이동, 주사위 무게감, 설정 패널·주사위 초기화, 개인정보 고지·파비콘·탭 제목을 정리하고 런타임 로그는 추적에서 제외한다. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
kimyu
@@ -18,6 +18,7 @@ import {
|
||||
type RapierRigidBody,
|
||||
} from '@react-three/rapier';
|
||||
import {
|
||||
Euler,
|
||||
Quaternion,
|
||||
SRGBColorSpace,
|
||||
TextureLoader,
|
||||
@@ -40,10 +41,33 @@ const WALL_HEIGHT = 8;
|
||||
const WALL_HALF_T = WALL_THICKNESS / 2;
|
||||
const WALL_HALF_H = WALL_HEIGHT / 2;
|
||||
|
||||
const STILL_SPEED_SQ = 0.05;
|
||||
const STILL_FRAMES = 18;
|
||||
const STILL_SPEED_SQ = 0.035;
|
||||
const STILL_FRAMES = 24;
|
||||
const MIN_VIEW_PX = 16;
|
||||
|
||||
/**
|
||||
* 과한 회전감 원인:
|
||||
* 1) 시작 자세가 완전 랜덤 → 처음부터 면이 빙글
|
||||
* 2) 마찰이 선속도를 각속도로 바꿈
|
||||
* 3) 충돌 접점이 COM에서 벗어나며 각속도 발생
|
||||
* 대응: 세워 두고 벽 쪽 병진을 강하게, 각감쇠+각속도 상한으로 억제.
|
||||
*/
|
||||
const DICE_MASS = 4.5;
|
||||
const DICE_RESTITUTION = 0.06;
|
||||
const DICE_FRICTION = 0.38;
|
||||
const DICE_LINEAR_DAMPING = 0.18;
|
||||
const DICE_ANGULAR_DAMPING = 3.4;
|
||||
const DICE_GRAVITY_SCALE = 1.2;
|
||||
const FLOOR_FRICTION = 0.42;
|
||||
const FLOOR_RESTITUTION = 0.03;
|
||||
const WALL_FRICTION = 0.22;
|
||||
const WALL_RESTITUTION = 0.28;
|
||||
const PHYSICS_GRAVITY: [number, number, number] = [0, -12.5, 0];
|
||||
/** 각속도 상한(rad/s) */
|
||||
const MAX_ANGULAR_SPEED = 7.5;
|
||||
/** 벽 방향 초기 선속도 */
|
||||
const WALL_PUSH_SPEED = 11.5;
|
||||
|
||||
const DEFAULT_DICE_FACE_TEXTURES = getDiceFaceTextureList(DEFAULT_ASSETS.dice);
|
||||
|
||||
const DICE_FACES = [
|
||||
@@ -56,6 +80,7 @@ const DICE_FACES = [
|
||||
];
|
||||
|
||||
const _quat = new Quaternion();
|
||||
const _euler = new Euler();
|
||||
const _normal = new Vector3();
|
||||
const WORLD_UP = new Vector3(0, 1, 0);
|
||||
|
||||
@@ -105,10 +130,30 @@ function InvisibleWalls() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<CuboidCollider args={[t, h, f]} position={[f + t, h, 0]} />
|
||||
<CuboidCollider args={[t, h, f]} position={[-(f + t), h, 0]} />
|
||||
<CuboidCollider args={[f, h, t]} position={[0, h, f + t]} />
|
||||
<CuboidCollider args={[f, h, t]} position={[0, h, -(f + t)]} />
|
||||
<CuboidCollider
|
||||
args={[t, h, f]}
|
||||
position={[f + t, h, 0]}
|
||||
friction={WALL_FRICTION}
|
||||
restitution={WALL_RESTITUTION}
|
||||
/>
|
||||
<CuboidCollider
|
||||
args={[t, h, f]}
|
||||
position={[-(f + t), h, 0]}
|
||||
friction={WALL_FRICTION}
|
||||
restitution={WALL_RESTITUTION}
|
||||
/>
|
||||
<CuboidCollider
|
||||
args={[f, h, t]}
|
||||
position={[0, h, f + t]}
|
||||
friction={WALL_FRICTION}
|
||||
restitution={WALL_RESTITUTION}
|
||||
/>
|
||||
<CuboidCollider
|
||||
args={[f, h, t]}
|
||||
position={[0, h, -(f + t)]}
|
||||
friction={WALL_FRICTION}
|
||||
restitution={WALL_RESTITUTION}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -231,12 +276,23 @@ function DiceSettleWatcher({
|
||||
const bodies = diceRefs.map((ref) => ref.current);
|
||||
if (bodies.some((body) => !body)) return;
|
||||
|
||||
// 각속도만 과도하면 잘라서, 벽으로 미는 병진은 유지한 채 회전기만 줄임
|
||||
for (const body of bodies) {
|
||||
if (!body) continue;
|
||||
const a = body.angvel();
|
||||
const mag = Math.hypot(a.x, a.y, a.z);
|
||||
if (mag > MAX_ANGULAR_SPEED) {
|
||||
const s = MAX_ANGULAR_SPEED / mag;
|
||||
body.setAngvel({ x: a.x * s, y: a.y * s, z: a.z * s }, false);
|
||||
}
|
||||
}
|
||||
|
||||
if (bodies.every((body) => isBodyStill(body!))) {
|
||||
stillFrames.current += 1;
|
||||
if (stillFrames.current >= STILL_FRAMES && !reported.current) {
|
||||
reported.current = true;
|
||||
const faces = bodies.map((body) => readTopFace(body!));
|
||||
const sum = faces.reduce((a, b) => a + b, 0);
|
||||
const sum = faces.reduce((acc, value) => acc + value, 0);
|
||||
onSettled({ sum, faces });
|
||||
}
|
||||
} else {
|
||||
@@ -280,14 +336,19 @@ function RapierDiceExample({
|
||||
<FitSquareFloor />
|
||||
<ambientLight intensity={0.85} />
|
||||
<directionalLight position={[4, 10, 2]} intensity={0.9} />
|
||||
<Physics>
|
||||
<Physics gravity={PHYSICS_GRAVITY}>
|
||||
<RigidBody type="fixed" colliders={false} position={[0, 0, 0]}>
|
||||
<FloorSurface
|
||||
key={`${floorColor}|${floorImage ?? ''}`}
|
||||
color={floorColor}
|
||||
imageSrc={floorImage}
|
||||
/>
|
||||
<CuboidCollider args={[FLOOR_HALF, 0.05, FLOOR_HALF]} position={[0, -0.05, 0]} />
|
||||
<CuboidCollider
|
||||
args={[FLOOR_HALF, 0.05, FLOOR_HALF]}
|
||||
position={[0, -0.05, 0]}
|
||||
friction={FLOOR_FRICTION}
|
||||
restitution={FLOOR_RESTITUTION}
|
||||
/>
|
||||
<InvisibleWalls />
|
||||
</RigidBody>
|
||||
|
||||
@@ -296,10 +357,14 @@ function RapierDiceExample({
|
||||
key={`die-${index}-${diceCount}-${canvasKey}`}
|
||||
ref={diceRefs[index]}
|
||||
type="dynamic"
|
||||
position={[x, 4, index === 0 ? 0 : 0.15]}
|
||||
position={[x, 0.65, index === 0 ? 0 : 0.15]}
|
||||
colliders="cuboid"
|
||||
restitution={0.2}
|
||||
friction={0.6}
|
||||
mass={DICE_MASS}
|
||||
restitution={DICE_RESTITUTION}
|
||||
friction={DICE_FRICTION}
|
||||
linearDamping={DICE_LINEAR_DAMPING}
|
||||
angularDamping={DICE_ANGULAR_DAMPING}
|
||||
gravityScale={DICE_GRAVITY_SCALE}
|
||||
>
|
||||
<Suspense
|
||||
fallback={
|
||||
@@ -330,18 +395,45 @@ function RapierDiceExample({
|
||||
function rollDice(body: RapierRigidBody | null) {
|
||||
if (!body) return false;
|
||||
|
||||
const t = body.translation();
|
||||
body.wakeUp();
|
||||
body.setTranslation({ x: body.translation().x, y: 4, z: body.translation().z }, true);
|
||||
|
||||
// 탁자 위에 거의 붙여 두고 밀어, 낙하 중 공중회전을 없앰
|
||||
body.setTranslation({ x: t.x, y: 0.62, z: t.z }, true);
|
||||
body.setLinvel({ x: 0, y: 0, z: 0 }, true);
|
||||
body.setAngvel({ x: 0, y: 0, z: 0 }, true);
|
||||
body.applyImpulse(
|
||||
{ x: (Math.random() - 0.5) * 8, y: 4 + Math.random() * 4, z: (Math.random() - 0.5) * 8 },
|
||||
true,
|
||||
);
|
||||
body.applyTorqueImpulse(
|
||||
{ x: (Math.random() - 0.5) * 6, y: (Math.random() - 0.5) * 6, z: (Math.random() - 0.5) * 6 },
|
||||
true,
|
||||
);
|
||||
|
||||
// 네 벽 중 하나 (+ 약한 편향)
|
||||
const wallDirs: Array<[number, number]> = [
|
||||
[1, 0],
|
||||
[-1, 0],
|
||||
[0, 1],
|
||||
[0, -1],
|
||||
];
|
||||
const [wx, wz] = wallDirs[Math.floor(Math.random() * wallDirs.length)]!;
|
||||
let dx = wx + (Math.random() - 0.5) * 0.35;
|
||||
let dz = wz + (Math.random() - 0.5) * 0.35;
|
||||
const dLen = Math.hypot(dx, dz) || 1;
|
||||
dx /= dLen;
|
||||
dz /= dLen;
|
||||
|
||||
// 완전 랜덤 자세 대신: 세워 둔 채 약한 기울기 + 진행 방향 쪽 살짝 기울임
|
||||
// (위에서 볼 때 면이 빙글빙글 도는 느낌을 크게 줄임)
|
||||
const yaw = Math.random() * Math.PI * 2;
|
||||
const tipToward = 0.18 + Math.random() * 0.22; // ~10–23°
|
||||
const tipSide = (Math.random() - 0.5) * 0.16;
|
||||
// 진행 방향이 +X면 Z축 회전으로 기울고, +Z면 X축 회전으로 기울게
|
||||
_euler.set(-dz * tipToward + tipSide, yaw, dx * tipToward + tipSide, 'YXZ');
|
||||
_quat.setFromEuler(_euler);
|
||||
body.setRotation({ x: _quat.x, y: _quat.y, z: _quat.z, w: _quat.w }, true);
|
||||
|
||||
// 병진 위주: 선속도로 벽을 향해 밀기 (토크 임펄스 없음)
|
||||
const speed = WALL_PUSH_SPEED + Math.random() * 3.5;
|
||||
body.setLinvel({ x: dx * speed, y: 0.35 + Math.random() * 0.45, z: dz * speed }, true);
|
||||
|
||||
// 질량 대비 추가 밀기(COM). 회전 임펄스는 넣지 않음
|
||||
const pushImpulse = DICE_MASS * (2.8 + Math.random() * 1.2);
|
||||
body.applyImpulse({ x: dx * pushImpulse, y: 0.4, z: dz * pushImpulse }, true);
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -436,10 +528,13 @@ export default memo(function Dice({
|
||||
rolling || disabled || !canvasReady || (requireDiceQueue && diceQueue <= 0);
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full min-h-0 min-w-0" style={{ containerType: 'size' }}>
|
||||
<div
|
||||
className="relative flex h-full w-full min-h-0 min-w-0 flex-col"
|
||||
style={{ containerType: 'size' }}
|
||||
>
|
||||
<div
|
||||
ref={hostRef}
|
||||
className="absolute top-0 left-0 aspect-square w-[min(100%,100cqh)] bg-sky-700/90"
|
||||
className="aspect-square w-[min(100%,calc(100cqh-2.1rem))] max-h-[calc(100%-2.1rem)] min-h-0 grow bg-sky-700/90"
|
||||
>
|
||||
{canvasReady ? (
|
||||
<RapierDiceExample
|
||||
@@ -457,9 +552,12 @@ export default memo(function Dice({
|
||||
주사위 준비 중…
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-0.5 flex min-h-[1.85rem] w-[min(100%,calc(100cqh-2.1rem))] max-w-full shrink-0 items-center justify-between gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="absolute bottom-2 left-2 z-10 rounded bg-black/70 px-3 py-1 text-sm text-white disabled:opacity-50"
|
||||
className="rounded bg-black/70 px-3 py-1 text-sm text-white disabled:opacity-50"
|
||||
disabled={busy}
|
||||
onClick={() => {
|
||||
void (async () => {
|
||||
@@ -502,7 +600,7 @@ export default memo(function Dice({
|
||||
>
|
||||
Roll{requireDiceQueue ? ` (${diceQueue})` : ''}
|
||||
</button>
|
||||
<div className="pointer-events-none absolute right-2 bottom-2 z-10 rounded bg-black/70 px-3 py-1 text-sm text-white">
|
||||
<div className="rounded bg-black/70 px-3 py-1 text-sm text-white">
|
||||
{queueHint
|
||||
? queueHint
|
||||
: !canvasReady
|
||||
|
||||
Reference in New Issue
Block a user