diff --git a/app/src/components/FallbackDiagram.tsx b/app/src/components/FallbackDiagram.tsx
index 22dbe55..170e88c 100644
--- a/app/src/components/FallbackDiagram.tsx
+++ b/app/src/components/FallbackDiagram.tsx
@@ -520,33 +520,44 @@ export interface PiperackProps {
eta: number;
}
-function PiperackDiagram({ width, height, elevation, spacing, numFrames, phiTotal, eta }: PiperackProps) {
+function PiperackDiagram({ width, height, elevation, spacing, numFrames, phiTotal }: PiperackProps) {
const vw = 400, vh = 300;
- const s = Math.min((vw - 80) / width, (vh - 80) / (elevation + height));
+ // Vista lateral (corte transversal do pipe-rack)
+ // A largura visual nesta vista é a distância entre a primeira e a última fileira de colunas
+ const crossSectionWidth = Math.max(spacing * (numFrames - 1), 1);
+ const s = Math.min((vw - 120) / crossSectionWidth, (vh - 80) / (elevation + height));
const cx = vw / 2, ground = vh - 40;
- const w = width * s;
- const h = height * s;
- const elev = elevation * s;
+ const wS = crossSectionWidth * s;
+ const hS = height * s;
+ const elevS = elevation * s;
- void spacing;
- void eta;
+ const columns = [];
+ for (let i = 0; i < numFrames; i++) {
+ const x = cx - wS / 2 + (numFrames > 1 ? (i / (numFrames - 1)) * wS : 0);
+ columns.push(
+
+ );
+ }
return (
);
}
diff --git a/app/src/components/three/Piperack3D.tsx b/app/src/components/three/Piperack3D.tsx
index 7358072..909807c 100644
--- a/app/src/components/three/Piperack3D.tsx
+++ b/app/src/components/three/Piperack3D.tsx
@@ -35,44 +35,63 @@ function PiperackModel({
const steelColor = isDark ? '#94a3b8' : '#64748b';
const pipeColors = ['#ef4444', '#3b82f6', '#f59e0b', '#10b981', '#8b5cf6'];
- // Gera os pórticos
+ // Gera os pórticos longitudinais (as fileiras de colunas)
const frames = [];
+ const totalSpacing = spacing * (numFrames > 1 ? numFrames - 1 : 0);
+ const zOffset = totalSpacing / 2;
+
for (let i = 0; i < numFrames; i++) {
- const z = -i * spacing;
+ const z = -zOffset + i * spacing;
+
+ // Simplificando o visual: desenha 5 colunas distribuídas ao longo da largura (comprimento do pipe-rack)
+ const numCols = Math.max(2, Math.floor(width / 4) + 1);
+ for (let c = 0; c < numCols; c++) {
+ const colX = -halfW + (c / (numCols - 1)) * width;
+ frames.push(
+
+
+
+
+ );
+ }
+
+ // Viga Longitudinal da fileira
frames.push(
-
- {/* Coluna Esquerda */}
-
-
-
-
- {/* Coluna Direita */}
-
-
-
-
- {/* Viga Transversal (Reticulado simplificado) */}
-
-
-
-
-
+
+
+
+
);
}
- // Gera as tubulações correndo longitudinalmente
- const rackLength = spacing * Math.max(numFrames - 1, 0.5); // Garante comprimento visual mesmo com 1 pórtico
- const pipeZCenter = -(spacing * (numFrames - 1)) / 2;
-
+ // Vigas transversais conectando as fileiras nas pontas
+ if (numFrames > 1) {
+ frames.push(
+
+
+
+
+ );
+ frames.push(
+
+
+
+
+ );
+ }
+
+ // Gera as tubulações correndo longitudinalmente (ao longo de X)
const pipeMeshes = pipes.map((pipe, idx) => {
- // Distribui os tubos ao longo da largura do pórtico
- const xPos = -halfW + 0.5 + (idx % Math.max(pipes.length, 1)) * (width - 1) / Math.max(pipes.length - 1, 1) || 0;
- const yPos = elevation + (idx % 2 === 0 ? 0.2 : -0.2); // Leve variação de altura
+ // Distribui os tubos ao longo do espaçamento transversal (Z)
+ const zPos = numFrames > 1
+ ? -zOffset + 0.5 + (idx % Math.max(pipes.length, 1)) * (totalSpacing - 1) / Math.max(pipes.length - 1, 1) || 0
+ : 0;
+ const yPos = elevation + height/2 + pipe.diameter/2 + (idx % 2 === 0 ? 0 : 0.2);
const color = pipeColors[idx % pipeColors.length];
return (
-
-
+
+
);
@@ -86,7 +105,7 @@ function PiperackModel({
{/* Vento batendo lateralmente (transversal ao Pipe-rack) */}
);
@@ -121,8 +140,8 @@ export function Piperack3D(props: Piperack3DInput) {
minPolarAngle={0}
maxPolarAngle={Math.PI / 2 - 0.05}
minDistance={5}
- maxDistance={50}
- target={[0, props.elevation / 2, -(props.spacing * (props.numFrames - 1)) / 2]}
+ maxDistance={80}
+ target={[0, props.elevation / 2, 0]}
/>
);