摘 要

随着世界经济全球化的深入发展，各国国家之间、各个城市之间的货物贸易更加频繁，促进了港口数量的快速增加，作为集装箱堆存的专属区域，堆场在港口中扮演着十分重要的角色，实现堆场高效的资源配置和管理有助于提升港口的收益，合理规划码头堆场成为提高港口运营效率的关键所在。

此次研究围绕港口码头堆场贝位的高效布置，在javascript编程语言的支持下开发一个高配置、高效运营的堆场计划系统，结合3D模拟的仿真显示对堆场配置提出合理建议。利用three.js强大的3D功能搭建堆场场景，实现堆场贝位实时更新、集装箱的可视化分配以及转运等过程，运用监听事件功能结合鼠标拾取功能实现对指定对象的控制，基于对three.js库的应用和扩展，实现在2D界面显示集装箱到港信息和进行贝位分配计划的功能，在3D界面上显示堆场堆存情况以及集装箱的转运过程，模拟集装箱堆场计划的全过程。

关键词：堆场计划；three.js ；WebGL；3D

Abstract

With the further development of the globalization of the world economy, the trade of goods between countries and cities is more frequent, which promotes the rapid increase of the number of ports, as the exclusive area of container storage, the yard plays a very important role in the port, and the realization of efficient resource allocation and management of the yard is helpful to enhance the revenue of the port. Reasonable planning of wharf yard has become the key to improve the efficiency of port operation.

This study revolves around the efficient arrangement of the Bay of the Port Wharf yard, develops a high configuration and efficient operation of the yard planning system with the support of the JavaScript programming language, and puts forward reasonable suggestions for the yard configuration combined with the simulation display of 3D simulation. Using the powerful 3D function of Three.js to build the yard scene, reali ze the process of real-time update of Yard Bay, visual distribution of containers and transshipment, use the Listening event function combined with mouse pickup function to realize the control of the specified object, based on the application and extension of the Three.js library, The function of displaying container-to-port information and Bayesian distribution plan in 2D interface, displaying yard stowage and container transfer process on 3D interface, simulating the whole process of container yard planning.

Key Words: yard plan; three.js;WebGL; 3D

目录

第1章 绪论 1

1.1 研究背景及意义 1

1.2 国内外研究现状 1

1.2.1 国内现状 2

1.2.2国外现状 3

1.3 研究内容 3

第2章 WebGL与THREE.JS的综述 4

2.1 WebGL概述 4

2.2 OpenGL简介 4

2.3 Three.js简介 4

2.4 Three.js的实现 5

2.4.1 场景（scene） 6

2.4.2 相机（camera） 6

2.4.3 物体对象（mesh） 6

2.4.4 光源（light） 6

2.4.5 渲染器（renderer） 7

2.4.6 控制器（controls） 7

2.4.7 纹理（texture） 7

2.4.8 3D模型的导入 7

2.4.9 动画平滑移动效果的实现 7

2.5 Three.js优势 8

2.6 本章小结 8

第3章 堆场计划系统的实现 9

3.1 集装箱港口作业 9

3.1.1 装卸船作业 9

3.1.2 装卸车作业 9

3.1.3 堆场作业 10

3.1.4 水平转运作业 10

3.2 堆场计划系统功能 10

3.2.1 3D场景的显示 10

3.2.2收箱作业 11

3.2.3集装箱信息的显示 11

3.2.4集装箱的分配 12

3.2.5提箱作业 12

3.3 堆场计划编程的实现 12

3.3.1堆场场景的实现 12

3.3.2集装箱分配的实现 13

3.3.3 监听事件的实现 13

3.4 本章小结 14

第4章 堆场计划系统仿真结果 15

4.1 堆场场景3D界面 15

4.2 到港集装箱贝位分配界面 15

4.3 堆场集装箱信息界面 16

4.4 贝位堆存场景 16

4.5 提货场景 17

4.6 系统整体框架 18

4.7 本章小结 18

第5章 总结与展望 19

参考文献 20

致 谢 21

第1章 绪论

1.1 研究背景及意义

在全球信息技术的广泛覆盖下，现代化的生产管理方式得到极大改善和提高，从生产领域到非生产领域、从公司内部到整个市场，物流运输业在整个经济贸易活动中发挥着举足轻重的作用，如今，现行的世界货物贸易在航运方面占据了八成以上，凸显了港口码头作为物流海上和陆地运输的重要中转点的关键作用，集装箱港口在世界经济物流贸易运输中扮演着越来越重要的作用。

从上世纪80年代以来，作为一个新兴产业的代表，物流在贸易方面发挥的作用逐渐增大，在全世界范围内，现代物流产业正发展成为一个具有巨大发展潜力和发展空间的新兴产业。随着现代物流产业和集装箱港口的快速发展，现代港口的功能已不仅仅包括像传统装卸以及存储货物等这些旧时港口本应拥有基本的功能，从某种意义上来说，现代物流产业的主要任务是实现对贸易货物的现代化便捷运输，而作为货物中转、换装、和集散的掌管者，港口的任务更加繁杂，像现代物流和供应链中的许多关键环节都必须由港口来解决，其他一些环节也必须由具有综合功能的港口来实现。全球集装箱运输业随着全球贸易的发展而逐渐壮大，港口是现代贸易物流集装箱运输过程中的重要一环，目前港口货物吞吐量日益增长，港口集装箱堆场作业的水平对货物集装箱的整个运输过程的经济成本有着重大影响，甚至会影响运输公司和托运客户的直接利益，然而，像堆场空间面积不足、急剧增长的集装箱吞吐量与港口容纳量的失衡以及相对落后和不完善的运营管理方式等都是目前我国大多数港口码头面临的弊端，这些弊端严重影响到码头堆场的运营效率和管理水平。因此，目前的当务之急是如何对港口集装箱堆场计划系统进行更加合理有效地规划与设计、以最大限度地发挥堆场计划系统的优势、提高堆场空间面积的利用率、如何减少堆场运营的基础运营管理成本以及提高堆场的管理水平，只有针对性的解决问题，才能从本质上提高我国港口码头的运营效率。