摘 要

基于 WebGL 的在线3D建模系统，是一个基于浏览器的3D建模系统。它是一个以网页的形式来构建的三维建模平台，其旨在于能够让使用者即用户直接在网页上便能完成3D建模作品的设计，并且操作简单便捷，而作为一个基于浏览器的网页版3D建模系统，与其他的专业3D建模软件相比，它大大地降低了对用户使用3D建模所需的技术要求，使得非专业的技术人员也可以参与到3D设计。

系统采用 WebGL 技术对3D模型进行显卡加速渲染，无需加载组件或者预先安装客户端（或插件），并且，由于使用WebGL技术进行显卡渲染，系统的渲染效果与兼容性都是很好的。对于用户而言，他们只需要输入网址便可进入系统，即可通过系统提供的各种建模功能进行简单便捷的在线3D建模设计，在这一点上使得系统大众化。同时，对于已完成的模型还可以进行导入和导出，在用户与用户之间便可以实现模型的交流和探讨，提高了系统的可用性和实用性。

本文通过对近年来十分受欢迎的基于WebGL 的3D建模关键技术的研究，介绍了三维模型的建立、修改、渲染和系统场景等数据的处理等系列方法，并在考虑到模型数据庞大可能会影响系统性能的情形下，提出了对模型文件数据进行预加载处理以及压缩传输处理等优化系统性能的方法。在用户带宽限制的条件下将浏览器端内的模型文件数据进行实习渲染，确保用户在建模的过程中，进行导入导出等操作时数据的正确性，便可提高系统的交互性和可用性。

关键词：；3D建模；WebGL；文件预加载；文件压缩传输

Abstract

3D Modeling System Online Based on WebGL, is a browser-based 3D modeling system, is a web version of the 3D modeling platform, which is designed to help users to complete the 3D modeling works online design in a short time, and the browser-based modeling system reduces the technical requirements for users to use 3D modeling, enabling non-professional technicians to participate in 3D designs.

The system uses WebGL technology graphics to accelerate the rendering of 3D model, and do not need to load components or install a large modeling software on the client,and it's compatibility is good.users only need to open the web page into the system, modeling tools can be simply and easily to use, which is really popular characteristic .At the same time, User can also export or import the completed model and scene, and also exchange and modify the model for each other, truly availability and practicality.

In this paper, we study the key technologies of 3D modeling based on WebGL in recent years, and introduce the methods of data processing, such as establishment, modification, rendering and system scene processing, and taking into account the large number of model data In the case of system performance, a method of optimizing system performance such as preloading and compression transfer processing of model file data is proposed. Under the conditions of user bandwidth restriction, the model file data in the browser will be rendered in practice to ensure the correctness of the data during the operation of the user, such as import and export, and improve the system interactivity and usability.

Key Words：3D modeling；WebGL；file preload；compressed files transmission

目 录

第1章 绪论 1

1.1 课题背景 1

1.2 课题研究目的及意义 2

1.3 课题主要研究内容 2

1.4 技术难点 3

第2章 WebGL技术相关理论 4

2.1 WebGL技术相关简介 4

2.2 Three.js介绍 4

第3章 系统简介 6

3.1 系统设计方案 6

3.2 系统模块划分 6

3.2 系统界面布局 7

第4章 3D建模实现的关键技术 8

4.1 基本环境搭建 8

4.2 3D建模 9

4.2.1 基本几何体 9

4.2.2 数字、字母模型 9

4.2.3 外部模型 11

4.2.4 材质与贴图设置 12

4.2.5 布尔建模 13

4.3 交互控制方式 13

4.3.1 漫游方式 13

4.3.2 对象拾取 13

4.3.3 平移、旋转与缩放 14

第5章 模型数据处理 17

5.1 模型格式 17

5.1.1 .obj格式 17

5.1.2 .mtl格式 17

5.1.3 .js(JOSN)格式 18

5.2 模型数据导入 18

5.3 模型数据导出与保存 19

5.3.1 HTML5的本地存储 19

5.3.2 保存场景信息 19

第6章 系统渲染性能的优化 20

6.1 预加载 20

6.2 压缩与解压缩 21

第7章 总结与不足 22

参考文献 23

附录A 系统使用说明 24

附录B 代码清单 32

致 谢 144

第1章 绪论

1.1 课题背景

进入信息时代以来，仅仅用2D平面所营造出来的虚拟环境越来越显得单调、乏味，也越来越难以满足人们对获取信息的交互体验需求。人们对信息获取的交互体验也显得越来越注重，对于获取信息的这种交互体验，也不再满足于以前的2D交互方式，而是更偏向于虚拟的3D交互方式。毫无疑问，3D交互的方式其优势明显，人们对于它的需求也越来越迫切，随着科学的不断发展，人们在Web领域内的研究重心也不断向网络信息的具现化方向上偏移。作为网络信息技术与计算机图形学技术结合的产物，Web3D技术在近年来得到了长足的发展，其最终目标是在浏览器上构件出一个虚拟三维场景，并使得用户可以在该三维场景中进行实时交互。

随着图形技术的发展，OpenGL API也发展成为了支持硬件和软件方面的API。近年来，OpenGL ES 2.0 WebGL的JavaScript实现已经成为了越来越具有有吸引力的API。WebGL是基于OpenGL ES 2.0标准开发出来的。WebGL是一个跨平台，免版税的网页标准，是基于OpenGL ES 2.0的3D图形API，暴露通过HTML5 Canvas元素作为文档对象模型接口。WebGL可以提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡在浏览器中对场景模型进行渲染。

目前，在国内对于WebGL的应用是比较少的，其相关的作品和资料都显得比较匮乏。