membrana plasmatica

Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo@martinsevieira.adv.br>

data-pipeline/seed/build-manifest-cell.mjs

@@ -35,7 +35,7 @@ const structures = [
     "celula-membrana-plasmatica",
     "Membrana Plasmática",
     "Plasma Membrane",
-    "Envoltório que delimita a célula, controlando a entrada e saída de substâncias; formada por uma bicamada fosfolipídica com proteínas de membrana.",
+    "Envoltório que delimita a célula, controlando a entrada e saída de substâncias; formada por uma bicamada fosfolipídica com proteínas de membrana (transportadoras, receptoras, de reconhecimento celular). As proteínas são pequenas demais pra aparecer na célula inteira — veja o corte transversal ampliado ao lado da membrana no modelo 3D.",
   ),
   structure(
     "celula-nucleo",

frontend/src/components/CellDiagram3D.tsx

@@ -32,6 +32,63 @@ function materialProps(baseColor: string, selected: boolean, opacity = 1) {
   };
 }
 
+// Corte transversal ampliado da bicamada fosfolipídica (cabeça+cauda, as
+// duas camadas com as caudas hidrofóbicas viradas pra dentro, uma pra
+// outra) com uma proteína de membrana atravessando — a única forma de
+// mostrar isso de verdade é "quebrar a escala" (numa célula inteira, uma
+// proteína de membrana é minúscula demais pra aparecer), por isso vem
+// como um diagrama à parte, fora da célula, e não como textura na
+// superfície dela.
+const PHOSPHOLIPID_HEAD = "#fbbf24";
+const PHOSPHOLIPID_TAIL = "#fde68a";
+const MEMBRANE_PROTEIN = "#f472b6";
+const LIPID_X_SLOTS = [-0.28, -0.19, -0.1, 0.1, 0.19, 0.28]; // sem um slot no meio: é onde a proteína atravessa
+
+function Phospholipid({ x, selected }: { x: number; selected: boolean }) {
+  const headProps = materialProps(PHOSPHOLIPID_HEAD, selected);
+  const tailProps = materialProps(PHOSPHOLIPID_TAIL, selected);
+  return (
+    <group position={[x, 0, 0]}>
+      {[1, -1].map((dir) => (
+        <group key={dir}>
+          <mesh position={[0, dir * 0.085, 0]}>
+            <sphereGeometry args={[0.026, 10, 10]} />
+            <meshStandardMaterial {...headProps} />
+          </mesh>
+          {[-0.011, 0.011].map((dx) => (
+            <mesh key={dx} position={[dx, dir * 0.038, 0]}>
+              <cylinderGeometry args={[0.007, 0.007, 0.085, 6]} />
+              <meshStandardMaterial {...tailProps} />
+            </mesh>
+          ))}
+        </group>
+      ))}
+    </group>
+  );
+}
+
+function MembraneCrossSection({ selected }: { selected: boolean }) {
+  const proteinProps = materialProps(MEMBRANE_PROTEIN, selected);
+  return (
+    <group position={[1.15, -0.62, 0.15]} rotation={[0, -0.3, 0.12]}>
+      {/* fundo sutil só pra separar visualmente o diagrama do resto da célula */}
+      <mesh position={[0, 0, -0.02]}>
+        <planeGeometry args={[0.86, 0.34]} />
+        <meshStandardMaterial color="#0f172a" transparent opacity={0.55} side={THREE.DoubleSide} depthWrite={false} />
+      </mesh>
+      {LIPID_X_SLOTS.map((x) => (
+        <Phospholipid key={x} x={x} selected={selected} />
+      ))}
+      {/* proteína de membrana — atravessa as duas camadas (maior que os
+          fosfolipídios, e por isso "pra fora" dos dois lados) */}
+      <mesh>
+        <capsuleGeometry args={[0.032, 0.14, 4, 8]} />
+        <meshStandardMaterial {...proteinProps} />
+      </mesh>
+    </group>
+  );
+}
+
 function Organelle({
   slug,
   bySlug,
@@ -222,18 +279,21 @@ export function CellDiagram3D({ bySlug: bySlugAll }: { bySlug: Map<string, Struc
                 sem cobrir o resto da célula. */}
             <Organelle slug="celula-membrana-plasmatica" bySlug={bySlug} onSelect={selectStructure}>
               {(sel) => (
-                <mesh rotation={[0.3, 2.6, 0]}>
-                  <sphereGeometry args={[0.85, 24, 24, 0, Math.PI * 0.75, 0, Math.PI * 0.65]} />
-                  <meshStandardMaterial
-                    color="#93c5fd"
-                    transparent
-                    opacity={sel ? 0.4 : 0.22}
-                    side={THREE.DoubleSide}
-                    depthWrite={false}
-                    emissive={sel ? HIGHLIGHT : BLACK}
-                    emissiveIntensity={sel ? 0.5 : 0}
-                  />
-                </mesh>
+                <>
+                  <mesh rotation={[0.3, 2.6, 0]}>
+                    <sphereGeometry args={[0.85, 24, 24, 0, Math.PI * 0.75, 0, Math.PI * 0.65]} />
+                    <meshStandardMaterial
+                      color="#93c5fd"
+                      transparent
+                      opacity={sel ? 0.4 : 0.22}
+                      side={THREE.DoubleSide}
+                      depthWrite={false}
+                      emissive={sel ? HIGHLIGHT : BLACK}
+                      emissiveIntensity={sel ? 0.5 : 0}
+                    />
+                  </mesh>
+                  <MembraneCrossSection selected={sel} />
+                </>
               )}
             </Organelle>