An important part of modern Container Load Plan tools is showing web-based 3D results effectively so end-users can understand the arrangement quickly at first glance.

Building a Container Load Plan (CLP or CPL) has never been an easy task. There are 2 major difficulties:

  • Loading algorithm
  • 3D visualization

In this article, I focus on how to deal with visualization part using Three.js. It is an amazing library with great examples and documentation.

Here is my first result with perspective 3D container and boxes:

container load plan 3d

3D container load planning

With the support of WebGL animations on modern browsers, I have also implemented the box loading animations as you can see on live demo site. As a conclusion, I recommend the Three.js library for 3D rendering tasks and you will be able to make cool stuffs yourself soon!

Thanks for reading my post!

I hope you have good time. If you want to share an idea or discuss a job, do not hesitate to contact at

Happy working!

Other posts you may concern

Implement D3.js chart with time selector and highlighted values

Building simple image editor with Fabric.js (Javascript HTML5 canvas library)

3D visualization programming with VTK (The Visualization Toolkit)

Stylink: An inside look of a startup social-commerce project

Stylink: Virtual dressing room for commercial purposes

Stylink: A tool for designing fashion collections

Stylink: Web-based tool for styling your hair

Some practices for setting up a clean, responsive and real-time support web project (ASP.NET)

Adding HTML editor (WYSIWYG) into ASP.NET web projects

3/N-tier for building web applications with ASP.NET MVC and .NET framework