自20世纪90年代以来，我国港口集装箱吞吐量一直高速增长。目前，已经初步形成了布局合理、设施完善、现代化程度较高的港口集装箱运输体系。规划设计理念是开展设计工作基本思路的源泉，是设计成果先进性的决定因素。现代集装箱港区的规划设计顺应集装箱运输的发展趋势。

近年来，随着科学技术的逐步发展完善，产品的展示技术已经向网页版的三维仿真方向发展。在国外，网页版的三维展示技术主要体现在城市的规划、建筑的漫游、室内的设计等。在国内，此类技术主要应用在产品的展示、地图的形态构建等。三维模型展示技术具备了使用的灵活性、丰富的交互性和体验的娱乐性等优势，使其逐渐受到广泛的重视和应用。用户只需通过登录网页，即可观看产品结构，实现人机交互，节约了时间和经济成本。当前，用户对网页的体验要求逐渐地从二维的平面模式向交互的三维模式过渡。早期的三维图形采用的Web3D技术都存在着诸多不足之处，通常需要借助封装性很强的插件来支撑。不但降低了用户对系统的体验，还减弱了系统的可移植性。

为了加强用户体验，实现用户对集装箱港口可视化规划仿真，在集装箱港口建设之前，通过三维模型展示技术，对港口进行设计和规划。这种设计理念的优势非常明显，能够更直观，更形象地表达模型，方便各专业人员之间的协调合作与交流，修改也更有效率。新一代HTML5 标准推出后，WebGL便迅速发展。后者为前者提供了3D渲染接口，其卓越的渲染能力和丰富的渲染功能大大突破了在网页中开发3D模型的限制。将WebGL技术应用于码头工程的设计，符合发展趋势，具有一定的应用意义。

WebGL的第三方类库Three.js，在不同平台的网页中都具有良好的渲染与交互效果。WebGL与传统展示技术相比具有一些优点，如：良好的兼容性、较低的成本、依赖性低等。用户只需通过浏览器就能体验3D交互页面，让其视觉体验变得更加具有真实感。

WebGL实际上是一种3D绘图标准，也是一套Javascript API。它具备OpenGLES2.0与JavaScript的优点，通过HTML5中的Canvas元素进行渲染，使在网页上创建三维复杂场景与模型成为了可能。Three.js作为一个轻量级的跨浏览器JavaScript库，在创建和显示Web浏览器中的图形和三维动画方面有着无与伦比的优势。主要是因为其可以与HTML5的Canvas元素、SVG和WebGL相结合，可以调用很多的3D显示API。利用Three.js，可以轻松的创建各种三维场景，包括摄影机、光影、材质等各种对象，从而极大地减轻Web3D的开发工作量，与其他技术相比，Three.js的最大优势在于开源且容易上手。利用其来开发一些轻量级的Web3D应用仍然是可行和高效的。Three.js提供了点、线、面、矩阵等所需的基本元素，结合相机、物体、光线、场景、渲染器等，即可在网页上实现三维模型的展示。

本次设计将在Three.js平台下，从3D模型建模出发，运用Javascript语言构建一个HTML文件，实现用户对集装箱港口码头的三维仿真规划，自主构建

一个可视化的港口模型。

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

2.1 研究内容及目标

本次设计将采用three.js框架，设计开发一个集装箱港口规划仿真系统。仿真系统实现对港口码头前沿、港区大门、港区内部道路和堆场进行规划设计的信息平台，从而实现对上述集装箱港口进行可视化规划仿真的目的。

规划仿真类似于“模拟城市”（SimCity）游戏。提供若干港口设施设备的模型，用户用鼠标拖动模型到网页的某个位置，释放鼠标，该模型就在港口的某地建立起来了。