Rodrigo Bertoldo de Sousa Martins
f32833c023
Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo@martinsevieira.adv.br>
218 lines
8.3 KiB
TypeScript
218 lines
8.3 KiB
TypeScript
import { useMemo, useRef } from "react";
|
|
import { useFrame } from "@react-three/fiber";
|
|
import * as THREE from "three";
|
|
import type { Stage } from "../../data/cellDivisionStages.js";
|
|
|
|
// Cena 3D ilustrativa (mesmo princípio do CellDiagram3D.tsx e do
|
|
// Mannequin.tsx: sem malha real disponível pra esse conteúdo, então
|
|
// desenhamos à mão com primitivas do Three.js) — recebe só o ESTÁGIO alvo
|
|
// atual (`stage`) e anima suavemente toda célula/cromátide até lá sempre
|
|
// que o estágio muda, via interpolação por frame (useFrame), sem precisar
|
|
// de nenhuma biblioteca de animação.
|
|
|
|
const MAX_CELLS = 4;
|
|
|
|
// Fator de suavização independente de framerate: a cada frame, anda uma
|
|
// fração `k` do caminho que falta até o alvo — converge suave em ~0.4s
|
|
// sem "overshoot" e sem depender de quantos FPS o navegador está rendendo.
|
|
function smoothing(delta: number, halfLifeSeconds = 0.18) {
|
|
return 1 - Math.pow(0.5, delta / halfLifeSeconds);
|
|
}
|
|
|
|
function ChromatidShape({ color }: { color: string }) {
|
|
return (
|
|
<group>
|
|
<mesh position={[-0.045, 0.08, 0]} rotation={[0, 0, Math.PI / 7]}>
|
|
<capsuleGeometry args={[0.022, 0.14, 3, 6]} />
|
|
<meshStandardMaterial color={color} roughness={0.5} />
|
|
</mesh>
|
|
<mesh position={[0.045, 0.08, 0]} rotation={[0, 0, -Math.PI / 7]}>
|
|
<capsuleGeometry args={[0.022, 0.14, 3, 6]} />
|
|
<meshStandardMaterial color={color} roughness={0.5} />
|
|
</mesh>
|
|
<mesh>
|
|
<sphereGeometry args={[0.03, 10, 10]} />
|
|
<meshStandardMaterial color={color} roughness={0.5} />
|
|
</mesh>
|
|
</group>
|
|
);
|
|
}
|
|
|
|
interface ChromatidTargetWorld {
|
|
pos: THREE.Vector3;
|
|
rotDeg: number;
|
|
color: string;
|
|
}
|
|
|
|
function AnimatedChromatid({ id, targets }: { id: string; targets: Map<string, ChromatidTargetWorld> }) {
|
|
// Posição/rotação são controladas 100% via useFrame (nunca como prop
|
|
// JSX reativa) — se passássemos `position={...}` no JSX, o
|
|
// react-three-fiber reaplicaria (e "teleportaria") o objeto pra lá toda
|
|
// vez que o mapa `targets` mudasse de identidade (ou seja, a cada troca
|
|
// de estágio), brigando com o lerp suave abaixo. No primeiro quadro o
|
|
// grupo nasce em (0,0,0) e "voa" suavemente até a posição inicial —
|
|
// efeito colateral aceitável (só acontece uma vez, ao montar).
|
|
const ref = useRef<THREE.Group>(null);
|
|
const initialColor = targets.get(id)?.color ?? "#94a3b8";
|
|
|
|
useFrame((_, delta) => {
|
|
const target = targets.get(id);
|
|
if (!ref.current || !target) return;
|
|
const k = smoothing(delta);
|
|
ref.current.position.lerp(target.pos, k);
|
|
const targetRad = THREE.MathUtils.degToRad(target.rotDeg);
|
|
ref.current.rotation.z = THREE.MathUtils.lerp(ref.current.rotation.z, targetRad, k);
|
|
});
|
|
|
|
return (
|
|
<group ref={ref}>
|
|
<ChromatidShape color={initialColor} />
|
|
</group>
|
|
);
|
|
}
|
|
|
|
interface CellSlotState {
|
|
position: THREE.Vector3;
|
|
radius: { value: number };
|
|
envelope: { value: number };
|
|
spindle: { value: number };
|
|
elongated: { value: number };
|
|
}
|
|
|
|
function AnimatedCellSlot({
|
|
target,
|
|
state,
|
|
}: {
|
|
target: { center: [number, number, number]; radius: number; envelope: number; spindle: boolean; elongated: number } | null;
|
|
state: CellSlotState;
|
|
}) {
|
|
const groupRef = useRef<THREE.Group>(null);
|
|
const membraneRef = useRef<THREE.Mesh>(null);
|
|
const membraneMatRef = useRef<THREE.MeshStandardMaterial>(null);
|
|
const envelopeMatRef = useRef<THREE.MeshStandardMaterial>(null);
|
|
const spindleRef = useRef<THREE.Group>(null);
|
|
|
|
useFrame((_, delta) => {
|
|
const k = smoothing(delta);
|
|
const targetPos = target ? new THREE.Vector3(...target.center) : state.position.clone();
|
|
const targetRadius = target ? target.radius : 0;
|
|
const targetEnvelope = target ? target.envelope : 0;
|
|
const targetSpindle = target?.spindle ? 1 : 0;
|
|
const targetElongated = target ? target.elongated : 0;
|
|
|
|
state.position.lerp(targetPos, k);
|
|
state.radius.value = THREE.MathUtils.lerp(state.radius.value, targetRadius, k);
|
|
state.envelope.value = THREE.MathUtils.lerp(state.envelope.value, targetEnvelope, k);
|
|
state.spindle.value = THREE.MathUtils.lerp(state.spindle.value, targetSpindle, k);
|
|
state.elongated.value = THREE.MathUtils.lerp(state.elongated.value, targetElongated, k);
|
|
|
|
if (groupRef.current) groupRef.current.position.copy(state.position);
|
|
if (membraneRef.current) {
|
|
const r = state.radius.value;
|
|
const stretch = 1 + state.elongated.value * 0.7;
|
|
membraneRef.current.scale.set(r / 0.8, (r / 0.8) * stretch, r / 0.8);
|
|
}
|
|
if (membraneMatRef.current) membraneMatRef.current.opacity = Math.min(0.22, state.radius.value * 0.28);
|
|
if (envelopeMatRef.current) envelopeMatRef.current.opacity = state.envelope.value * 0.35;
|
|
if (spindleRef.current) spindleRef.current.visible = state.spindle.value > 0.05;
|
|
if (spindleRef.current) spindleRef.current.scale.setScalar(state.spindle.value);
|
|
});
|
|
|
|
return (
|
|
<group ref={groupRef}>
|
|
{/* membrana plasmática — translúcida, não recebe clique (só decorativa) */}
|
|
<mesh ref={membraneRef} raycast={() => null}>
|
|
<sphereGeometry args={[0.8, 28, 28]} />
|
|
<meshStandardMaterial
|
|
ref={membraneMatRef}
|
|
color="#93c5fd"
|
|
transparent
|
|
opacity={0.15}
|
|
side={THREE.DoubleSide}
|
|
depthWrite={false}
|
|
/>
|
|
</mesh>
|
|
{/* envelope nuclear — esfera um pouco menor, desfaz/refaz conforme a fase */}
|
|
<mesh raycast={() => null}>
|
|
<sphereGeometry args={[0.42, 24, 24]} />
|
|
<meshStandardMaterial ref={envelopeMatRef} color="#c4b5fd" transparent opacity={0} depthWrite={false} />
|
|
</mesh>
|
|
{/* fuso mitótico: 2 centrossomos + fibras finas em leque */}
|
|
<group ref={spindleRef}>
|
|
{[-1, 1].map((side) => (
|
|
<group key={side} position={[side * 0.65, 0, 0]}>
|
|
<mesh>
|
|
<sphereGeometry args={[0.035, 10, 10]} />
|
|
<meshStandardMaterial color="#f8fafc" />
|
|
</mesh>
|
|
{[-0.25, -0.1, 0.1, 0.25].map((offset, i) => (
|
|
<mesh
|
|
key={i}
|
|
position={[side * -0.32, offset * 0.6, offset]}
|
|
rotation={[0, 0, side > 0 ? Math.PI / 2 + offset * 0.3 : -Math.PI / 2 + offset * 0.3]}
|
|
>
|
|
<cylinderGeometry args={[0.004, 0.004, 0.64, 4]} />
|
|
<meshStandardMaterial color="#f8fafc" transparent opacity={0.4} />
|
|
</mesh>
|
|
))}
|
|
</group>
|
|
))}
|
|
</group>
|
|
</group>
|
|
);
|
|
}
|
|
|
|
export function CellDivisionScene({ stage }: { stage: Stage }) {
|
|
// Estado imperativo (fora do React) por slot de célula — persiste entre
|
|
// mudanças de estágio pra animação continuar de onde estava, sem exigir
|
|
// que o número de células seja o mesmo do estágio anterior.
|
|
const cellStates = useMemo<CellSlotState[]>(
|
|
() =>
|
|
Array.from({ length: MAX_CELLS }, () => ({
|
|
position: new THREE.Vector3(0, 0, 0),
|
|
radius: { value: 0 },
|
|
envelope: { value: 0 },
|
|
spindle: { value: 0 },
|
|
elongated: { value: 0 },
|
|
})),
|
|
[],
|
|
);
|
|
|
|
const chromatidTargets = useMemo(() => {
|
|
const map = new Map<string, ChromatidTargetWorld>();
|
|
for (const c of stage.chromatids) {
|
|
const cell = stage.cells[c.cell];
|
|
if (!cell) continue;
|
|
map.set(c.id, {
|
|
pos: new THREE.Vector3(cell.center[0] + c.pos[0], cell.center[1] + c.pos[1], cell.center[2] + c.pos[2]),
|
|
rotDeg: c.rot,
|
|
color: c.color,
|
|
});
|
|
}
|
|
return map;
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [stage.id]);
|
|
|
|
// IDs fixos (as mesmas 8 cromátides existem em todo estágio de mitose OU
|
|
// meiose) — pegos do primeiro estágio pra não remontar componentes ao
|
|
// trocar de estágio (só a posição-alvo muda).
|
|
const chromatidIds = useMemo(() => stage.chromatids.map((c) => c.id), []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
return (
|
|
<>
|
|
<color attach="background" args={["#0b1220"]} />
|
|
<ambientLight intensity={0.75} />
|
|
<directionalLight position={[2, 3, 2]} intensity={1} />
|
|
<directionalLight position={[-2, -1, -2]} intensity={0.3} />
|
|
|
|
{cellStates.map((state, i) => (
|
|
<AnimatedCellSlot key={i} target={stage.cells[i] ?? null} state={state} />
|
|
))}
|
|
|
|
{chromatidIds.map((id) => (
|
|
<AnimatedChromatid key={id} id={id} targets={chromatidTargets} />
|
|
))}
|
|
</>
|
|
);
|
|
}
|