Truck loading bay (gantry)
Road-tanker loading gantry with one island per lane under a portal-frame canopy. Each bay has a meter run (block valve, basket strainer, air eliminator, PD meter with register, digital set-stop valve), API RP 1004 bottom-loading arms with balance cylinders and API couplers, a vapour recovery arm, a counterbalanced top-loading arm with drop tube, a gantry platform with stair and fold-down gangway, a batch controller, an overfill and earth-verification monitor with plug and clamp, and an emergency stop. Product sets the colour bands; loading picks bottom, top or both.
Installation
Copies onshore/truck-loading-bay.tsx and the shared lib/ into src/components/deck-twin/. Needs three, @react-three/fiber and @react-three/drei. See installation for the manual route.
Usage
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { Stage } from './components/deck-twin/lib/stage'
import { TruckLoadingBay } from './components/deck-twin/onshore/truck-loading-bay'
export default function Scene() {
return (
<Canvas shadows camera={{ position: [8, 5, 9], fov: 35 }}>
<Stage>
<TruckLoadingBay />
</Stage>
<OrbitControls makeDefault />
</Canvas>
)
}
Props
| Prop | Type | Default | Range |
|---|---|---|---|
bays | number | null | 1 – 6 |
product | "gasoline" | "diesel" | "jet" | "crude" | null | |
loading | "bottom" | "top" | "both" | null | |
nps | number (NPS, in) | null | |
rating | 150 | 300 | 600 | 900 | 1500 | 2500 | null | |
gangwayDown | boolean | null | |
tag | string | null | |
...group | position, rotation, scale… |
P&ID
Per bay: block valve, strainer, meter (FE / FQ, often PD), digital set-stop control valve and the loading arm or hose dropping to a road tanker outline; on the plot plan, lanes under a canopy rectangle.
A meter run ending at a tanker outline is the clue. Marine loading uses articulated arms to a ship manifold instead.
baysproductloadingnpsratingtagFor agents
Machine-readable entry with props, ranges, defaults and ports:
Or fetch /r/truck-loading-bay.json, or copy a ready-made instruction:
Add the Deck Twin "Truck loading bay (gantry)" component to this project. Run `npx -y https://decktwin.com/cli/deck-twin-0.2.2.tgz add truck-loading-bay` (it copies the file and the shared lib into src/components/deck-twin/), then `npx -y https://decktwin.com/cli/deck-twin-0.2.2.tgz info truck-loading-bay` for its props, ranges and ports. Render <TruckLoadingBay /> inside a React Three Fiber <Canvas shadows>, wrapped in <Stage> from src/components/deck-twin/lib/stage. Set props from my data (metres, NPS in inches, ASME class) and leave the rest at defaults. Install three, @react-three/fiber, @react-three/drei and @types/three if they're missing. Full guide: https://decktwin.com/skill/SKILL.md