晶体三维模型Web端展示

何虎，陈思

晶体三维模型Web端展示

何虎，陈思

（成都理工大学地球科学学院，成都 610059）

针对晶体三维可视化展示这一《结晶学与矿物学》课程教学中的问题，为了便于学习者通过直观观察晶体三维形态，掌握晶体特点，通过Web端展示有色交互模型的办法来实现。采用3DSMAX、JCrystal软件对47种几何单形进行三维建模，利用UnityShader对模型进行材质处理，以FreeLookCameraRig实现触屏旋转模型的交互效果，后导成WebGL，利用HTML、CSS、JavaScript等语言进行优化，建成晶体三维可视化学习平台。通过对晶体三维建模、可视化平台建设中关键技术的阐述，提供了一种模型展示方法，采用该方法建成的可视化平台具有呈现效果佳、互动性强、可扩展性强、用户端多元的特点。

结晶学；三维建模；Unity；3DS MAX；WebGL；JCrystal；几何单形；网页

《结晶学与矿物学》是以晶体为研究对象，研究晶体的生成和变化、晶体外部形态的几何性质、晶体的内部结构、化学组成和物理性质及其相互关系的一门自然科学。结晶学不仅是地球科学及其延伸学科的重要专业基础，也是其他关乎国计民生的理论和技术科学的重要专业基础（赵珊茸，2017）。

由于《结晶学与矿物学》的学习内容，涉及到大量的几何模型和空间概念，需要较强的抽象思维能力。不少高校教研团队一直在探索如何利用三维建模、虚拟仿真等现代新兴技术将晶体模型更形象生动地进行社会生产（黄超等，2020）和教学展示，帮助学生更容易理解相关概念和方法。比如利用3DS MAX建模进行多媒体动画展示（肖平等，2009）；利用CrystalMaker 和Diamond等建模软件指导学生上机操作，提高其认知和实践能力（胡欢等，2018）；利用第三方平台（比如Second Life）进行晶体三维模型展示、互动，使传统课堂教学逐步向网络化、虚拟化、智能化的教学转变，取得了较好的教学效果（郭艳军等，2017）。

随着近年来WebGL等基于HTML5的开源3D展示技术的兴起与完善（陈燕红等，2018；Alexey Demin等，2014），结合3DS MAX、JCrystal、Unity等软件对晶体进行三维模型，并在WebGL端呈现进行了探索，开发了一个不需加载组件、不受第三方平台限制的几何单形三维模型展示平台。

1 晶体三维模型Web端展示平台的关键技术

与Flash 3D、CopperCube、Silverlight等或闭源或商用的需要插件的3D网页技术相比，目前基于Unity和3DS MAX等建模软件的WebGL三维网页展示更有优势（马洪石等，2019；聂帅等，2019），由于WebGL基于HTML脚本和利用底层硬件加速的工作原理，WebGL，HTML5等开源技术适配的浏览器和端口更多，目前大部分手机浏览器都可以支持基于WebGL项目的网页呈现，平台搭建所用技术如图1。

图1 基于UnityWebGL的晶体三维模型Web端展示的工作流程图

2 晶体几何单形的建模

结合《结晶学与矿物学》的基础教材和几何单形的相关知识（刘钊等，2006；李福堂，1997）。就47种单形建模来说，可分为：面体、柱体、复方柱、单锥、复方单锥、双锥、复方双锥、偏面体、四面体、八面体和立方体十一种类型。涉及左形右形的晶体可利用3DS MAX中的镜像效果制作。模型相关信息及建模方式与晶体特征信息如表1。

表1 依据建模特点的单形分类

2.1 3DS MAX

模型基本都可以按表1中的建模方式配合复制旋转等操作建立出标准的模型。在制作时，可通过将需要变换点位的顶点放在特殊的面上（X轴或Y轴平面上），将三维坐标计算简化为平面计算，减小计算量与工作量（图2）。

图2 各类晶形3DS MAX建模方式界面截图

建模中结合晶体实际特点与美观情况，适当调整3DS MAX中各种参数的值来获得更好的模型效果，让发育不等的两类晶面看起来有明显差别,更直观地让人理解这类模型的特点。

2.2 JCrystal

在建立如偏方复十二面体这类面与点比较多的晶体模型时，可采用JCrystal来建立模型。用其建立起VRML文件格式的模型导入到3DS MAX中进行进一步处理（图3）。

基于JAVA语言开发的JCrystal，可简单理解其工作方式为将各顶点的坐标，各面的倾斜角度等值用固定算法完成（相当于在3DS MAX建模中计算各顶点坐标）。故可以利用其设计出几种单形合成的复杂聚形。本次工作仅针对基础的47种几何单形，后续会加深对聚形与实际矿物晶体模型的展开。

3 Unity中模型渲染与UI展示界面的搭建

将3DS MAX中处理好的模型以FBX文件格式导入Unity，在Unity中进行模型的渲染与逻辑搭建，最终导出WebGL端，获得网页工程的源文件。通过Unity的渲染与处理，模型本身的可视化性更好，搭建起的WebGL网页也可以支持PC和手机等多个端口，实用性更强。也是本次工作中的关键环节。

图3 JCrystal的应用界面

3.1 UnityShader与渲染

晶体颜色处理的方式前人研究较少，通常采用默认材质进行配色，其视觉效果较为单一，不能较好反映出晶体外部和内部结构。对于晶体理论模型，将模型半透明化并依据其晶体特点进行染色。

UnityShader是一个基于Cg语法的一个Unity中的程序，其计算着在Unity的虚拟环境中，其他环境对Shader（着色器）所控制的物体的影响应该如何反映。其需要有光强、颜色、影子等等和计算机图形学有关的知识，想要做到合适晶体的透明效果就需要用到这个程序。本次工作中涉及有透明度测试和双面渲染等知识点，以下为其核心代码片段：

代码片段1：

两个代码为一个Pass块的两个部分，双面渲染有两个Pass块，代码片段1中，Cull Front改为Cull Back（表示正面、背面两个渲染层次）。

代码片段2中：

代码片段2：

max(0.1,dot(worldNormal,worldLightDir)。

其中的0.1可以在0到1的值域里修改，其数值大小影响亮暗程度。两个Pass块代码中，对此数值适当修改以得到合适的透明化效果。

制作好UnityShader代码后，将其套用进Material（材质）中，再将这个Material以不同的半透明颜色块套用到每个面中，以此获得合适的透明形式（图4）。图5中可以看出，在未加入Shader前的默认材质（图5a）颜色过于单一，部分区域太暗（图5b），且无法显示晶体模型结构，展示效果不佳。

采用挤出方式进行晶体的内部与外部边框勾勒处理后，极大地增强模型外部及内部结构的立体效果。图5c中的四六面体，其模型可以认为是四面体的每个面中心点外凸，原本的一个面变成四个面。给每个面添加颜色材质时，将突出的四个面弄成同种颜色，而不同方向的面弄成不同颜色。这样，模型更直观，让易让人理解。图5d中的复四方单锥，建模时合理设置好圆角值，加上颜色后，两类发育不同的面就可直观的展示，更容易理解复面体类晶体模型的特点，同时还可根据模型特点进行不同颜色的透明化处理，获得最佳的视觉效果。

图4 Unity中Material制作

图5 Shader效果对比图

3.2 FreeLookCameraRig及UI逻辑界面的制作

晶体三维模型的虚拟环境展示，可以通过旋转展示模型各个方位的画面的方式实现。利用Unity Asset Store中的FreeLookCameraRig相机插件包，可以实现手触手机屏或鼠标滑过电脑屏幕（网页）时，镜头绕着某个点（物体）进行旋转并实时呈现相机所拍到的画面。即在Unity的虚拟环境中，物体绝对位置不动，相机绕着物体在旋转，依次呈现三维物体的画面（图6）。

调节其中的Position来改变镜头的绝对空间三维位置，调节Turn Speed的数值设定旋转画面的快慢程度，调节Tilt Max和Tilt Min的值设定旋转角度的大小。最后，通过File→Building Setting→选择WebGL端、添加Scene（场景）的顺序操作，导出网页项目的源码文件。

图6 利用FreeLookCameraRig实现晶体模型三维旋转呈现效果

相比Second Life平台以第三人称视角观察晶体的方式，就晶体的三维呈现效果来说，这种方式导出的网页界面互动性更好、沉浸感更强。与直接在JCrystal等软件上观看模型对比，Unity的呈现功能拓展空间更大，比如可以将晶体生成的动画与控制按钮加入界面，还可以制作出如JCrystal等软件0中的吴氏网、晶面符号、聚形制作的功能加入UI控制界面。

4 网页平台搭建与展示

对网页源码进行优化处理，用HTML、CSS等语言结合服务器搭建网页平台（dizhischool.cn）和微信平台。设计出好看实用的网页界面，让大家可以轻松的从多种端口的浏览器及微信上了解到晶形的相关知识。

4.1 WebGL与HTML

利用HTML5与CSS3等网页语言搭建起自适应的互动性良好的网页，利用Javascript和Jquery设计出网页的动效逻辑，并依据三斜晶系、单斜晶系、斜方晶系、三方晶系、四方晶系、六方晶系、等轴晶系分类设计出七种相应的页面（图7）。

图7 网页结构概览

根据Deborah Richards等人的研究来看，并不一定3D的学习效果强于2D，综合考虑来看，结合2D的展现更加帮助学习者了解（Deborah Richards,Meredith Taylor ,2015）。网页首页展示出几何单形的静态图，并依据其晶系将缩略图呈现不同颜色。将晶体单形相关信息放在图片之后，当鼠标放在图片上，即可看到其信息（图7a）。

图7b-h则展示了七种基于晶系分类的网页，并在网页中对相应晶系进行总体介绍（图7g），同时对各类各类晶形单独介绍（图7e）。对各晶形的模型进行展示（图7i），便于对各类晶体深入学习。

目前现有的晶体知识展示平台，展示类型主要是以多媒体动画、电脑软件、网页平台第三方软件平台为主（表2），而基于WebGL开发的网页平台基本可以揽括以上平台类型的优点，后期功能扩展空间大。

表2 相关展示平台对比

注：除参考文献中的项目，表格中还涉及到北大新一代GIS研究室晶体光学部分平台（早期网页平台）

4.2 微信小程序的扩展

可利用网页嵌套的方式将基于WebGL开发的晶体展示网页进一步拓展，制作成学习晶体知识的微信小程序（图8），可以更好地方便用户利用碎片化时间学习，增强教学资源及时更新共享的功能。后期还可以在现有基础上，增加各种地质技能的学习等功能（杨乃，李洋，2019），或者是对接国家岩矿化石标本等资源共享平台内的地质数据库，提供数据查询等功能。

（a）小程序首页（b）小程序模型页（c）其他内容

5 结语

用3DS MAX制作模型，通过JCrystal简化复杂晶体模型的制作，用Unity将模型渲染，呈现出互动性强，展示效果良好的三维模型。利用WebGL技术实现的网页平台延伸到微信平台上，实现多平台，多渠道的教学资源共享。将建模、渲染、呈现三步分隔开，令新模型呈现变得简单且可行，可以用浏览器的设备皆可覆盖到。不难想到，将来这样的方法可以应用于其他学科各种立体模型展示平台的建设。

赵珊茸，2017．结晶学与矿物学[M]．北京．高等教育出版社．

黄超，姜楷，李亮，李宸，曾方侣，何青，2020．矿山三维地质建模研究进展[J]．四川地质学报，(02)：323-326．

肖平，边秋娟，2009．“结晶学”教学中三维动画的制作与应用[J]．中国地质教育，18(02)：148-151．

胡欢，董少春，王汝成等，2018．晶体三维可视化软件在结晶学教学与实验中的应用[J]．实验室研究与探索，37(06)：203-206．

郭艳军，陈斌，秦善等，2017．结晶学与矿物学虚拟仿真实验教学探索[J]．实验室研究与探索，36(08)：161-165．

陈燕红，古丽米拉·克孜尔别克等，2018．Web页面三维动态展示技术研究与应用[J]．现代电子技术，41(20)：24-27．

Alexey Demin,代沅兴，李新等，2014．基于HTML5与WebGL的机器人3D环境下的运动学仿真[J]．东北大学学报(自然科学版)，35(04)：564-568．

马洪石，王行风，薛磊，刘晨，2019．Web端室内三维交互系统的快速构建与优化[J]．中国科技论文，14(05)：518-523．

聂帅，秦爽，麦文，2019．基于WebGL技术三维模型呈现研究[J]．计算机产品与流通(07)：87-89．

刘钊，秦善，2006．三维晶体形态绘制软件——xPlane[J]．北京大学学报(自然科学版)(06)：735-739．

李福堂，1997．14种矿物晶形图的改正[J]．山东地质(02)：84-97．

Deborah Richards,Meredith Taylor,2015. A Comparison of learning gains when using a 2D simulation tool versus a 3D virtual world: An experiment to find the right representation involving the Marginal Value Theorem[J]. Computers & Education,86.

董晋琨，杨眉，吴志远等，2019．系统矿物学数据特征分析及数据库建设[J]．吉林大学学报(地球科学版)，49(03)：728-737．

杨乃，李洋，2019．微信小程序与公众号在野外地质实习中的应用[J]．实验技术与管理，36(02)：246-251． [1]111

Web-side Display of Three-Dimensional Model of Crystal

HE Hu CHEN Si

(College of Earth Sciences, Chengdu University of Technology, Chengdu 610059)

3D visualization display of a mineral crystal is of great importance tothe teaching of crystallography and mineralogy. It enables students to visualize the morphology of mineral crystals and understand the crystallographic characteristics of minerals intuitively. This may be achieved by presenting the color interaction model on the Web side. 3DSMAX and JCrystal softwares are used for 3D modeling of 47 kinds of geometric unit form. UnityShader is used for processing the material of the model. Interactive effect of touch-screen rotation model is achieved with FreeLookCameraRig, and then exported to the WebGL side and optimized by use of HTML, CSS, JavaScript and other languages in order to build 3D visual learning platform a crystal.

crystallography; 3D modeling; 3DS MAX; WebGL; JCrystal; geometric unit form; Web

P572

A

1006-0995（2021）04-0670-08

10.3969/j.issn.1006-0995.2021.04.025

2021-03-08

成都理工大学2019年度中青年骨干教师发展资助计划（编号：10912-2019SJGG00165）；成都理工大学2018-2020年高等教育人才培养和教学改革项目（编号：JG183061）；四川省“地质矿产资源三维立体勘探开发虚拟仿真实验教学中心”教学质量工程项目（编号：11100-18Z0530）资助

何虎（1998— ），男，四川南充人，研究生，专业：岩石学