Geekerstar

基于WEB的3D浏览交互系统(详细设计说明书)
详细设计说明书项目名称:Web3D在线浏览交互系统(在线看房+智能装修)项目开发单位:3Dreamers1 引言1...
扫描右侧二维码阅读全文
18
2018/02

基于WEB的3D浏览交互系统(详细设计说明书)

该项目为“第五届中国软件杯”命题项目,由本人所在团队开发并参赛,由于时间紧迫开发周期短未能取得佳绩,在此分享给大家交流参考。

详细设计说明书
项目名称:Web3D在线浏览交互系统(在线看房+智能装修)
项目开发单位:3Dreamers

1 引言

1. 1 编写目的

编写详细设计说明书是软件开发过程中必不可少的部分,其目的是为了使开发人员在完成概要设计说明书的基础上完成概要设计得各项模块的具体实现的设计工作。同时也是开发人员和最终客户进行需求交流的有效手段。

1.2 背景

  • 软件名称

    Web3D在线浏览交互系统(在线看房+智能装修)

1.3 参考资料

Three.js官方文档

2 总体设计

2.1 软件描述

Web3D在线浏览编译系统可以实现在在网页上浏览、编辑3D模型的功能,摆脱了用户只能通过2D平面技术进行交互,让用户能通过Web3D技术得到更好更真实的交互体验,从而激发用户的浏览兴趣,达到更完美的浏览效果。

2.2 结构模块

3 模块设计说明

3.1 模型展示模块设计

  • 模块描述

此模块实现具体实例模型与用户进行交互体验,用户可通过鼠标点击滑动获得模块响应。

  • 输入输出

输入键鼠信息,输出模块模型

  • 模块实现算法

3.2 模型自定义修改模块设计

1)模块描述

此模块实现用户通过参数选项对此模块模型属性进行修改。

2)输入输出

输入键鼠信息,输出模块模型

3)模块实现算法

3.3 模型导入输出模块设计

1)模块描述

此模块实现用户通过调用Web3D编辑系统,选择模块导入(导出)选项,键入本地模型地址即可令系统自行完成具体模型导入,导出模型则需要用户选择系统提供模型具体格式,然后键入自定义模型名称即可令系统自行完成导出。

2)输入输出

输入键鼠信息,输出模块模型

3)模块实现算法

3.4 模型编辑模块设计

1)模块描述

此模块实现用户通过调用Web3D编辑系统,点击编辑选项中的预设指令,模块即可响应获得修改后的模型。

2)输入输出

输入键鼠信息,输出模块模型

3)模块实现算法

3.5 模型加入模块设计

1)模块描述

此模块实现用户通过调用Web3D编辑系统,选择加入选项,点击模块预设多种基本模型实例,模块作出响应并添加至编辑器中。

2)输入输出

输入键鼠信息,输出模块模型

3)模块实现算法

3.6 模型实例模块设计

1)模块描述

此模块实现用户通过调用Web3D编辑系统,选择模块实例选项,点击模块预设实例指令,模块响应添加预设实例至编辑器,点击播放按钮播放实例实现动画效果。

2)输入输出

输入键鼠信息,输出模块模型

3)模块实现算法

4 关于开发库的说明

4.1 three.js开发库

Three.js是一个JavaScript
3D库,封装了底层的WebGL图形接口,提供简化、高效的三维图形程序开发。[Mr.
doob](https://github.com/mrdoob)是Three.js项目发起人和主要贡献者之一。并且该项目是Github上的一个开源项目。

4.2 three.js的引用

我们通过在html文件中引入three.js文件即可。

例如:

\<!DOCTYPE html\>

\<html\>

\<head\>

\<title\>\</title\>

\<style\>canvas { width: 100%; height: 100% }\</style\>

\</head\>

\<body\>

\<script src="js/three.js"\>\</script\>

\</body\>

\</html\>

5 关于本地文件导入及格式的说明

5.1 关于格式支持说明

由于three.js的特性,我们支持导入导出fbx,obj(mtl),dae,ctm,ply,stl,wrl,vtk等格式。其中obj是最常用的模型格式,导入*.obj文件需要OBJLoader.js;导入带*.mtl材质的*.obj文件需要MTLLoader.js以及OBJMTLLoader.js。

5.2 关于本地转换格式方法

5.2.1 使用现有工具进行转换

如果本地电脑有3Dmax等软件,在软件内构建模型后,可以直接导出obj等格式,如果使用Blender,可以在装完插件的情况下进行导出。

5.2.2 使用Python进行导出

Python是一种具有丰富和强大的库的胶水语言。因此结合它的便利,简单的特性,我们选择它作为我们本地导出工具。

目前,我们已经成功实现了导出ctm,fbx,obj等格式。不需要安装除Python运行环境外的其他东西,只需简单DOS命令即可。

列如:Python X:\convert_obj_three.py -i X:\XXX.obj -o d:\XXX.js

python导出代码
最终导出效果


版权声明:本文为原创文章,版权归 Geekerstar 所有。

本文链接:http://www.geekerstar.com/projects/116.html

除了有特殊标注文章外欢迎转载,但请务必标明出处,格式如上,谢谢合作。

最后修改:2018 年 02 月 25 日 11 : 47 AM
如果觉得我的文章对你有用,请随意赞赏

发表评论