近几十年以来，随着全球港口集装箱运输事业的蓬勃发展，我国港口集装箱吞吐量跃居世界第一，成为全球最大的集装箱运输国。集装箱堆场作为集装箱港口的重要资源，几乎所有的集装箱从陆运转为水运、从水运转为陆运，均需事先在堆场中堆存，堆场可以看成是集装箱港口的缓冲区，是港口中各种作业活动的交汇节点，担负着集装箱的交接、堆存、货运等功能，很大程度上影响了港口的吞吐量。

随着世界经济全球一体化的发展,迅速发展的国际贸易刺激了集装箱运输,世界集装箱港口都在不断扩大自身规模、改进港口物流系统,提高码头作业效率,从而加快船舶周期,提高港口竞争力。集装箱港口物流系统是港口现代化的关键,是港口挖潜、革新、改造的主要对象之一。在集装箱码头运营当中,堆场运作起着非常重要的作用。好的堆场运作可以提高码头作业效率,减少作业路冲突,降低码头操作成本。随着世界主要集装箱港口之间竞争的日益激烈,提升集装箱码头堆场策划效果逐渐成为各集装箱港口提升市场竞争实力的主要途径。

WebGL是基于OpenGLES 2.0的Web标准，可以通过HTML5 Canvas元素作为DOM接口访问。而threejs在底层其实还是调用HTML5中的canvas API来实现绘图的，但和我们一般绘制2D图像不同，threejs在底层使用的是canvas的WebGL context来实现3D绘图。WebGL context本身更多是直接多GPU的操作，用起来相当不直观，为此threejs在顶层对3D绘图所需的各种元素（例如场景，摄像机，灯光，几何图像，材质等）进行了封装，如果我们使用threeja来绘图，只需创建一个最小绘图环境即可，这个最小绘图环境包含了场景、摄像机、渲染器三个元素。

基于简化WebGL开发复杂度和降低入门难度的目的，在WebGL标准基础上封装的轻量级的JS 3D库——three.js具有很多优良的特点，其具备3D开发所需完整功能，基本上使用WebGL能实现的效果，用three.js都能更加简单地实现；而且其架构设计比较清晰和合理，易于理解，扩展性较好，且开发效率高于WebGL;最后其项目开源，具有一批活跃的贡献者，一直在持续升级中。

此次设计通过对现有港口集装箱物流系统的了解和研究,分析了现有集装箱港口物流系统的优势与弊端,并通过预测集装箱港口物流系统的发展方向，总体上基于对港口集装箱堆场设计快捷的管理分配方法，对港口集装箱堆场计划进行严密安排，开发集装箱港口堆场计划系统，最大程度上满足集装箱堆场配置需求，实现可视化的港口堆场管理，优化集装箱港口堆场分配，整体上提高港口的作业效率，进而提高港口的吞吐量，满足国家港口发展的需要。

2. 研究的基本内容与方案

研究的基本内容。第一，当一列火车运载集装箱进港前，进行堆场信息收集，查看在2D界面显示的堆场空间信息，根据集装箱运往目的地分配的轮船停靠位，合理安排堆场区域的划分，保证有足够空间临时存放集装箱；第二，索引2D界面的集装箱信息，收集轮船到港信息，合理安排集装箱装载上车，指导安全高效路径运往靠近轮船的码头准备上船同时在3D界面上显示动画；第三，通过鼠标操作，将集装箱装载上船运往目的地，同时在3D显示界面显示集装箱上船动画，在2D界面更新装载及堆场信息。

此次研究的基本内容主要是集装箱港口堆场信息系统的设计，在掌握WebGL开源框架three.js的基础上，对港口集装箱堆场计划进行可视化仿真，其中涉及的主要仿真内容包括显示到港集装箱信息、对将到港的集装箱在2D界面上进行堆场计划、将集装箱分配到集装箱贝位上、在3D界面下显示堆场堆存情况、转运集装箱出堆场。

研究目标。设计一个2D/3D交互式界面，模拟集装箱堆场计划的全过程，优化集装箱堆场贝位的分配问题，在2D的交互界面上进行集装箱堆场信息的操作，在3D仿真界面上实现可视化，有序的安排集装箱堆场分配，合理高效的实现集装箱从进港到堆场分配存放，再到合理筹划运车装箱上船的堆场计划。

技术方案。WebGL是在浏览器中实现三维效果的一套规范，如果直接使用WebGL原生的API来写3D程序是非常困难的，于是行业人士开发出了大量的WebGL开源框架，three.js就是非常优秀的一个。Three.js可以将它理解为three js的结合，three表示3D的意思，js表示javaascript的意思，three.js就是使用javascript来写3D程序意思，three.js是一个优秀的开源WebGL库，WebGL允许javascript操作GPU，此次采用three.js里的Scene(所有物体的容器，构建三维世界)、Camera（坐标系）、三维投影的能内部库，实现3D动画展示，在浏览器端实现真正意义的3D。