基于HTML5三维思维导图软件开发技术研究.docVIP

基于HTML5三维思维导图软件开发技术研究 　　摘 要：针对目前开发思维导图编程语言众多，但跨平台3D建模思维导图软件较少的情况，本文从HTML5方面，利用SVG技术、Canvas技术、X3D技术和WebGL技术验证了整个分析方法的有效性和可行性，扩展了思维导图的可视化显示途径。此外利用WebGL开源框架如Three.js等可以调用WebGL着色器，实现3D网页渲染效果。不用借助专业的3D设计工具，直接通过HTML5页面就能进行3D建模思维导图。对思维导图软件的开发提供一种新的解决思路。 　　关键词：思维导图；HTML5；SVG；WebGL；软件开发 　　中图分类号：TP391.41 文献标识码：A 　　Research on the Software Development Technology of 3D Mind 　　Mapping Based on HTML5 　　WANG Shenghua，TANG Guochun 　　（Department of Information，Qiongtai Normal University，Haikou 571100，China） 　　Abstract：In view of the numerous mind mapping programming languages and the insufficient cross-platform 3D modeling mind mapping software，the paper applies SVG technology，Canvas technology，X3D technology and WebGL technology to verify the validity and feasibility of the whole analysis method，and extends the visual display approaches of mind maps.In addition，the WebGL open-source framework，such as Three.js，can be applied to call the WebGL shader，which achieves the 3D webpage rendering effects.So 3D modeling mind mapping can be implemented directly through the HTML5 page，and the professional 3D design tools are no longer necessary.The research results provide a new solution to the development of mind mapping software. 　　Keywords：mind mapping；HTML5；SVG；WebGL；software development 　　1 引言（Introduction） 　　目前支持3D建模和动画的软件众多，比如Maya、3DMax等，但是这些软件不能满足客户对于3D思维导图实时交互控制的功能。当前思维导图软件构建环境主要包括安卓端思维导图软件、PC端思维导图软件和IOS端思维导图软件。基于HTML5的三维思维导图软件可以在移动端和PC端同步编辑，实现思维导图无缝连接。当前Web浏览器越来越转变成可以支撑丰富3D交互式程序的一个平台，利用WebGL 技术成为一种Web3D可视化显示的有效途径[1-4]。本文从HTML5方面探讨了其在思维导图可视化设计方面的研究，利用SVG技术、Canvas技术、X3D技术和WebGL技术验证了整个分析方法的有效性和可行性。无须借助3ds max和maya等专业3D设计工具，直接通过HTML5页面就能进行3D建模思维导图，期望对思维导图软件的开发起到一定的参考作用。 　　2 目前思维导图相关软件的进展现状（Current 　　progress of the software related to mind mapping） 　　思维导图作为传递发射性思维的一种高效工具，强调图文融合，各级主题的关系通过隶属、组合等的不同层级图展现。思维导图有效发挥左脑和右脑的机能，既有记忆、阅读和思维的规律的体现，又有逻辑与想象、核心主题整体与局部的认识再现。思维导图的绘制结构一般包括几个要素：核心主题、主要分枝、分枝、各级层次、注释主题、浮动主题和关联等。随着思维导图在知识和技能学习传递方面的广泛应用，出现了越来越多的思维导图相关软件，如百度脑图（KityMinder）、Xmind、Mi