Container Plan

1. Project Overview The Container Load Planner is a specialized web-based tool engineered to streamline complex shipment planning processes in the logistics sector. Maximizing container utilization is critical for cost efficiency in shipping. Traditional methods often rely on rough estimations or 2D drawing tools, which fail to accurately represent vertical space or complex item fitting. This application addresses that gap by providing a real-time 3D representation of cargo arrangement, helping logistics officers maximize space efficiency, drastically reduce calculation errors, and generate accurate loading reports instantly. 2. The Challenge Logistics planners often face difficulties when trying to fit various cargo shapes—such as standard boxes mixed with cylindrical items (drums/barrels)—into a fixed container space. Manual calculation using spreadsheets is time-consuming and prone to human error, often leading to underutilized containers (shipping "air") or overbooked shipments that don't actually fit during loading. The goal was to create a digital solution that allows users to virtually "try out" loading scenarios before committing to physical movements. 3. The Solution & Approach I developed a single-page web application focusing on an intuitive user experience that merges data entry with immediate visual feedback. The interface is divided into two functional areas: Input Control Panel (Left Sidebar): Users first select standard container sizes (e.g., 20' Standard). Then, they define cargo specifics, inputting dimensions (Length, Width, Height/Diameter), quantity, and crucially, the shape type (Box or Cylindrical/'Bulat'). interactive 3D Stage (Main View): Utilizing advanced JavaScript 3D rendering libraries, the application instantly visualizes the container wireframe and places the cargo items inside based on the input data. 4. Key Features Demonstrated Real-Time 3D Rendering: As soon as materials are added, they appear in the 3D space, allowing instant verification of fit and stacking. Multi-Shape Support: Unlike basic planners that only handle boxes, this tool accurately renders cylindrical items (as seen in the screenshots with the green drums), calculating their spatial requirements correctly. Interactive Viewing Angles: Users can easily switch between predefined camera views (Top, Side, Front) or rotate the 3D view freely to inspect the load plan from every angle. Instant Reporting (PDF Export): A critical business feature that converts the finalized 3D visual plan into a downloadable PDF document, ready to be handed to warehouse loading teams as instructions. 5. Technical Stack Frontend Core: HTML5, CSS3 (for responsive layout), Modern JavaScript (ES6+). 3D Engine: [Three.js / WebGL] (Gunakan Three.js jika kamu memakainya, ini nilai plus besar) for high-performance browser-based 3D graphics. PDF Generation: client-side JavaScript libraries for generating downloadable reports. 6. Conclusion The Container Load Planner successfully transforms abstract shipment data into a clear, actionable visual strategy. It is a testament to how creative web development can solve real-world industrial problems, delivering a tool that is both technically sophisticated and highly practical for daily logistics operations.