基于VRML与JavaScript三维模型的交互设计

基于ＶＲＭＬ与ＪａｖａＳｃｒｉｐｔ三维模型的交互设计胡慧芸牛敏（华南理工大学机械与汽车工程学院，广东广州５１０６４０）［摘要】介绍了ＶＲＡ４Ｌ技术在三维模型交互设计的应用，分析了ＶＫＭＬ－与ＪａｖａＳｃｒｉｐｔ相结合的可控性效果。从而使三维模型可进行动态观察。并与用户产生交互。以一品牌冰箱为例，利用３ｄｍａｘ创建模型，结合啪ｌ中的ＴｏｕｃｈＳｅｎｓ节点和ＪａｖａＳｃｒｉｐｔ脚本来实现对冰箱模型的交互。［关键词］ＶＩＬＭＬ；ＪａｖａＳｃｒｉｐｔ；交互设计；三维模型品三维模型，从而形成一个虚拟环境，并通过ＶＲＭＬ中的ｌ。引言传统的三维模型展示仅仅限于３６０度动态观察，缺少与用户的交互，而利用ＶＲＭＬ技术创建的三维模型的交互设计以其高度的真实感的优势呈现在广大用户面前，同时具有强大的交互功能，使得用户不仅可以从各个不同的角度观察三维模型，还可以对模型进行交互性操作。这样的三维模型展示给予了用户了解模型的更好、更形象的途径。２．ＶＲＭＬ综述ＶＲＭＬ，即虚拟现实建模语言，英文全称为：ＶｉｒｔｕａｌＲｅａｌｉｔｙＭｏｄｅｌｉｎｇＴｏｕｃｈＳｅｎｓｏｒ和Ｓｃｒｉｐｔ节点来实现对产品功能的模拟，最后发布到网络上，用户们即可在网上随意观察产品，并试用其基本功能。３．ＶＲＭＬ在三维模型交互设计中的具体应用３．１三维模型的创建ＶＲＭＬ中的Ｓｈａｐｅ模型节点包含了三维立体几何节点、绘图节点以及外观节点，利用这些节点可以创建出原始的物体造型，也可以创建出复杂空间物体造型。纹理映射节点还可以赋予造型材质贴图装饰。但是利用ＶＲＭＬ建模存在一些缺陷，一方面在ＶＲＭＬ创建的模型比较租燥，不能满足用户对高精度模型的要求；另一方，ＶＲＭＬ是一种建模语言，因此必须先便写好程序，运行后才可观看模型，这给同步建模（即在建模过程当中同时观察模型）带来很大的不便。３ＤＬａｎｇｕａｇｅ，是一种三维造型和渲染的图形描述语言，可用来在网络上创建逼真的三维虚拟场景，它改变了网络上２Ｄ画面状态，并能实现３Ｄ动画效果，特别是改变当前网络与用户交互的局限性，使得人机交互更加方便、灵活，使虚拟世界的真实性、交互性和动态性得到了更充分的体现。ＶＲＭＬ语言是由节点、事件、场景、原型、脚本及路由等组成。其中节点是ＶＲＭＬ文件中最基本的组成要素，一共包含７种类型节点，它们分别是：Ｓｈａｐｅ模型节点；纹理影射节点；群节点；环境、影音与视点导航效果节点：’规范化接口节点；动态交互感知节点；创建新的ＶＲＭＬ节点；而本文则重点利用ｔｏｕｃｈＳｅｎｓｏｒ节点和Ｓｃｒｉｐｔ节点的功能来实现产品的交互性。（１）ＴｏｕｃｈＳｅｎｓｏｒ节点，即触摸传感器节点，使浏览者与虚拟对象之间相接触型传感器节点，该节点创建了一个检测用户动作并将其转化后输出，以触发一个动画的检测器。（２）Ｓｃｒｉｐｔ节点，ＶＲＭＬ主要通过Ｓｃｒｉｐｔ脚本节点和Ｊａｖａ语言接口与外部联系，同时也可以利用Ｓｃｒｉｐｔ编程来实现一些简单的交互，如小球的滑动，天空飞翔的飞机等。设计者正是利用了ＶＲＭＬ的这些优点，创建逼真的产ＭＡＸ创建的模型精度高，在材质和贴图等方面都远胜ⅥｉＭＩ，，同时３ＤＭＡＸ文件还可以转化成．ｗｒｌ文件导入ＶＲＭＬ当中，因此，可以利用３ＤＭＡＸ建立高精度的模型。如图ｌ所示３ＤＭＡＸ创建的冰箱导入ｖｒｍｌ后的模型。在创建过程中，注意到，因模型是在网络上进行浏览操作，会受到宽带和传输速率的制约，因此大量的模型数据不利于网络传输。所以在保证精度的基础上，尽量采用最简单的模型，如采用Ｍ『ｌｉＲＳ建模。由于冰箱的门与灯光在ＶＲＭＬ中需要经过编程以便用户对它进行交互操作，所以门模型需要单独建立，最后再与冰箱模型组合。围１３．２３ＤｇｇＸ创建的冰箱模型ＶＲＭＬ与ＪａｖａＳｃｒｉｐｔ的交互设计在三维模型中，利用ＶＲＭＬ中的ＴｏｕｃｈＳｅｎｓｏｒ和Ｓｃｒｉｐｔ作者简介：胡慧芸。女，广西贵港人，硕士，研究方向：计算机图形学、计算机辅助设计。一６０～万方数据节点来实现用户与模型之间的交互。Ｓｃｒｉｐｔ节点是基于事件处理来控制场景中的动作的。由ＶＲＭＬ提供三维产品造型，并利用ＴｏｕｃｈＳｅｎｓｏｒ触摸传感器节点来产生触发事件，导入到Ｓｃｒｉｐｔ节点的入事件接口（Ｅｖｅｎｔ［ｎ），而Ｓｃｒｉｐｔ节点有着相应的接口变量，经过编程对ＶＲＭＬ创建的模型对象进行读写操作或从ＥｖｅｎｔＯｕｔ（事件）发送事件，再通过路由控制模型对象的节点，从而达到交互的效果。三维模型交互的工作原理如图２所示。＠一⑧⑧＿④ｔ◆图２三维模型交互工作原理本例的冰箱模型，设计的交互动画主要体现在控制开门与箱内灯光，而开门的交互实现，即箱门绕着某一轴旋转９０度，这可通过ＴｏｕｃｈＳｅｎｓｏｒ节点来控制箱门的旋转角度。在创建冰箱模型时，箱门分为上箱门和下箱门，每个箱门都由一个门，一个门把以及内架组成，可以把这三部分模型组合起来，分别命名为：ｕｐｇａｔｃ和ｄｏｗｎｇａｔｅ，以便于整体进行旋转移动。在上箱门交互设计过程中，给上箱门ｕｐｇａｔｅ创建建立ＴｏｕｃｈＳｅｎｓｏｒ传感器，产生触发事件，并且对应着一个Ｓｃｒｉｐｔ脚本中的一个旋转移动函数ｓｃｒｌ，用以实现触发事件后的效果。对于冰箱开门交互，当点击上箱门时开门，再次点击时关门，因此，需要在此函数ｓｃｒｌ中设置触发事件的判断布尔变量ｅｎａｂｌｅ，并且赋予初始值为ＦＡＬＳＥ。当开门时，判断ｅｎａｂｌｅ为非真，然后改变其变量值为ＴＲＵＥ。此时主要是实现改变上箱ｆ－ｊｕｐｇａｔｅ绕Ｙ轴旋转的角度，因此，需要设置上箱门旋转后的角度，用向量组ｒｏｔａｔｅｌ表示，并且把它设置成出事件，它指定了～个旋转轴和旋转角度，即ｘｌ，ｙ１，ｚｌ，ｏｌ，其中ｘｌ、ｙ１、ｚｌ代表ｘ轴、Ｙ轴、ｚ轴方向，ｏｌ代表旋转角度。而本系统的冰箱门是绕Ｙ轴旋转９０度，因此，分别赋予它们的初始值为：ｘｌ＝０；ｙｌ＝ｌ；ｚｌ＝Ｏ；０１＝１．５７１，最后把ｘｌ、ｙｌ、Ｚｌ、ｏｌ的值赋给向量组ｒｏｔａｔｅｌ组即可。当关门时，判断ｅｎａｂｌｅ为真，然后改变其变量值为ＦＡＬＳＥ。此时主要是实现改变上箱门ｕｐｇａｔｅ绕Ｙ轴旋转０度，因此，旋转轴与旋转角度的值为：ｘｌ＝Ｏ；ｙｌ＝ｌ；ｚｌ＝０；ｏｉ＝０，最后把ｘ１、ｙｌ、ｚｌ、０１的值赋给向量组ｒｏｔａｔｅｌ组即可。接着设置旋转后的坐标位移向量组ｍｏｖｌ，并且把它设置成出事件，它指定了父坐标系的原点与新坐标系的原点之间Ｘ、Ｙ、ｚ方向上的距离。上箱门旋转后需要移动的位移只在Ｘ轴和Ｚ轴发生了变化，在Ｘ轴上的位移等于上箱门模型的长的一半，在ｚ轴上的位移等于上箱门模型长的一半，而Ｙ轴上的位移不变。赋予ｘ。、ｙ。、Ｚ，的初始值为：万方数据ｘｌ＝ｘｏ＋Ｌ１／２；ＹＣＹｏ；ｚｌ＝ｚｏ＋Ｌｌ／２；然后把ｘ。、Ｙ。、Ｚ。的值赋给向量组ｍｏｖｌ组即可。当关门时，上箱门回到原来的位置，ｘ。、ｙ。、ｚ，的值并不发生变化，其值为：ｘｔ＝ｘｏ＋Ｌ１／２；Ｙ１２ｙｏ；ｚ１＝ｚｏ＋Ｌ１／２；最后，通过路径，把ＴｏｕｃｈＳｅｎｓｏｒ触摸传感器节点的触发时间变量ｔｏｕｃｈＴｉｍｅ传给函数ｓｃｒｌ的入事件ｔｏｕｃｈｌ，再把函数ｓｃｒｌ的出事件ｒｏｔａｔｅｌ和ｍｏｖｌ传给上箱门模型ｕｐ－ｇａｔｅ，就可实现开门的交互。同理，冰箱下箱门的开门动画亦可使用同样的方法实现其交互设计。最后的效果如图３所示。图３冰箱模型开门交互流程效果图对于箱内灯光，在箱体内创建一个泛光灯Ｏｍｎｉ０１，并设置它的变量Ｏｎ值为ＦＡＬＳＥ，用以表示灯光为关闭状态，如果该值ＴＲＵＥ，则表示灯光为打开状态。另外，在冰箱侧面上创建一个开关按钮ｋａｉ，并为它创建一个ＴｏｕｃｈＳｃａｓｏｒ传感器，产生触发事件，并且对应着一个Ｓｃｒｉｐｔ脚本中的一个开关函数ｓｃｒ３，用以控制泛灯光Ｏｍｎｉ０１的变量Ｏｉｌ的值，以实现灯光的开关。对于冰箱灯光交互，当点击开关按钮时灯光开，再次点击时灯光关，因此，需要在此函数ｓｃｒ３中设置触发事件的判断布尔变量ｅｎａｂｌｅ，并且赋予初始值为ＦＡＬＳＥ。当开灯时，判断ｅｎａｂｌｅ为非真，然后改变其变量值为ＴＲＵＥ。此时，同样设置一个布尔变量ｏｐｅｎ，并设置为出事件，其值为ＴＲＵＥ，用来赋给泛灯关的变量Ｏｌｌ，表示灯光打开，当关灯时，判断ｅｎａｂｌｅ为真，然后改变其变量值为ＦＡＬＳＥ，此时，ｏｐｅｎ的值为ＦＡＬＳＥ，表示灯光关闭。最后，通过路径，把ＴｏｕｃｈＳｅｍｏｒ触摸传感器节点的触发时间变量ＴｏｕｃｈＴｉｍｅ传给函数ｓｃｒ３的入事件ｔｏｕｃｈ３，再把函数ｓｃｒ２的出事件ｏｐｅｎ传给泛灯光的变量Ｏｔｌ，即可实现灯光的交互，其效果如图４所示。图４冰箱模型灯光交互流程效果图（下转第６４页）一６ｌ一对象作进一步处理，在此不再一～赘述。实际操作中具体选用何种方法进行提取是很多初学者感到疑惑的，原因在于对不同提取方法的技巧要点和适用范围没有充分理解。一般情况下，可遵循以下原则：（１）选区工具适合提取具有规则几何形状的对象（２）套索工具适合提取颜色反差大边缘明显的对象。（３）图像和背景色色差明显，背景色单一而图像边界清晰时可考虑借助颜色范围选取工具。（４）路径以矢量图的方式进行精确的线条绘制，适合处理边缘光滑的对象。（５）通道可与蒙版结合使用，很好地处理细节较多的复杂对象。建议正确理解和多掌握几种不同的提取方法，在实际操作中多作总结。积累经验，操作时才能根据图像特点作出合理的选择，兼顾效率与效果，从容应对。在严格要求提取质量的场合，仅仅依靠单一的提取方法往往难以令人满意，采用多种提取技巧进行混合操作也是必要的。若想得到自然的合成图像，设置羽化效果往往也是提取过程中不可缺少的一步。当然，无论具体的要求和操作是什么，提取过程中的耐心细致永远是不可忽略的部分。参考文献：【１】栾昌海，粱国俊。扬志文．Ｐｈｏｔｏｓｈｏｐ图像处理与综合实训【Ｍ】．北京：她质出版社．２００６．【２】李建芳，高史．ＰｈｏｔｏｓｈｏｐＣＳ平面设计【Ｍ】．北京：清华大学出版社，北京交通大学出版社，２００６．【３】思维数码．ＰｈｏｔｏｓｈｏｐＣＳ３从入门到精通【Ｍｌ。北京：电子工业出版社。２００７．ＡｎａｌｙｓｉｓａｎｄＣｏｍｐａｒｉｓｏｎｏｆＩｍａｇｅＥｘｔｒａｃｔｉｎｇＴｅｃｈｎｉｑｕｅｓＢａｓｅｄＬｉＪｉｎｇｏｎＰｈｏｔｏｓｈｏｐ【触，螂】Ｉｍａｇｅｅｆｆｅｃｔｓ．Ｉｎｔｈｉｓ（Ｓｈａａａｘ／ＵｎｉｖｅｒｓｉｔｙｏｆＴｅｃｈｎｏｌｏｇｙ，Ｈａｎｚｈｏｎｇ７２３０００，Ｓｈａｎｘｉ）ｃｏｍｐｏｓｉｔｉｏｎｉｓａｔｅｃｈｎｉｑｕｅｃｏｍｍｏｎｌｙｕｓｅｄｉｎｄｉｇｉｔａｌｉｍａｇｅｐｒｏｃｅｓｓｉｎｇ，ｗｈｉｃｈｔｏｏｌｓｃａｎａｃｈｉｅｖｅｓａｌｌｋｉｎｄｓｏｆｓｐｅｃｉａｌｐａｐｅｒ，ｏｐｅｒａｔｉｏｎｓｏｆｔｙｐｉｃａｌｅｘｔｒａｃｔｉｎｇｔｏｉｎＰｈｏｔｏｓｈｏｐｔｏａｌｅｅｘｐｌａｉｎｅｄａｎｄａｃｏｍｐａｒａｔｉｖｅａｎａｌｙｓｉｓｏｆｔｈｅｉｒａｐｐｌｉｃａｔｉｏｎｓｉｓｍａｄｅ－Ｈｏｗｃｈｏｏｓｅｐｒｏｐｅｒｅｘｔｒａｃｔｉｎｇｔｅｃｈｎｉｑｕｅｓａｃｃｏｒｄｉｎｇｉｍａｇｅｆｅａｔｕｒｅｓｆｏｒｏｂｔａｉｎｉｎｇｐｅｒｆｅｃｔｅｘｔｒａｃｔｉｎｇｅｆｆｅｃｔｉｓｐｒｅｓｅｎｔｅｄｗｉｔｈａｓｐｅｃｉｆｉｃｅｘａｍｐｌｅ．【ｒ，ｏｒ，ａａ●】Ｐｈｏｔｏｓｈｏｐ：ｉｍａｇｅｅｘｔｒａｃｔｉｎｇ：ｉｍａｇｅｃｏｍｐｏｓｉｔｉｏｎ（上接第６ｌ页）４．结束语利用ｖｒｍｌ中的动态触摸传感器节点与场景中的模型进行交互，再通过Ｓｃｒｉｐｔ脚本产生触发事件，从而达到对模型的交互设计，这给三维模型展示带来一个全新概念，可以在网络上给用户创造一个更逼真、更人性化的环境，使得它们有着身临其境的感觉。由于模型是单个展示，若把模型放到一个特定场景中，对于只操作模型而不操作场景的方法仍有待研究。参考文献；【ｌ】张全钊，张全镝，张金锐．拟现实三维立体网络程序设计语言ｖｌｍｍ一第二代网络程序设计语言【Ｍ】，２００４．北京：清隼大学出版社，【２】郑凯文．３ＤＳＭＡＸＮＵＲＢＳ曲面建模使用详解与创作实例【Ｍ】．北京：人民邮电出版社．１９９９．【３】ＫｒｉｓＪａｒｍａ，ＰＨ．Ｄ．，ＰｈｉｌＳｃｈｍａｕｄｃｒ，ＮｅｌｓｏｎＹｅｅ．ＶＲＭＬ程序员实用倒库【Ｍ】．电子工业出版社．２０００．【４】丘威，钟志初，张立履．基于Ｗｅｂ３Ｄ的虚拟场景漫游的设计与实现【Ｊ】．截计算机信息，２００７（３．３）：２５９－２６１．ＶＲＭＬａｎｄＪａｖａＳｃｒｉｐｔ－ｂａｓｅｄＩｎｔｅｒａｃｔｉｖｅＤｅｓｉｇｎｆｏｒ３．ＤＨｕＨｕｉｙｕｎＮｉｕＭｏｄｅｌＭｉｎ（ＳｏｕｔｈＣｈｉｎａＵｎｉｖｅｒｓｉｔｙｏｆＴｅｃｈｎｏｌｏｇｙ，Ｇｕａａｇｚｈｏｕ５１０６４０，Ｃａ．ｕｍｇｄｏｎｇ）【Ａｈ岫＿瞳】ＴｈｅｂｅｔｗｅｅｎｐａｐｅｒｉｎｔｒｏｄｕｃｅｓｔｈｅａｐｐｌｉｃａｔｉｏｎｏｆｕｓｅｒＣａｌｌＶＲＭＬｉｎｉｎｔｅｒａｃｔｉｖｅｄｅｓｉｇｎｏｆ３－Ｄｍｏｄｅｌａｎｄａｎａｌｙｚｅｓｔｈｅｃｏｍｂｉｎａｔｉｏｎｗｉｔｈｔｈｅｍ．ＴａｋｉｎｇａＶＲＭＬｕｓｅｓａｎｄＪａｖａＳｃｒｉｐｔ，ｓｏｔｈａｔｔｈｅｏｂｓｅｒｖｅｔｈｅ３－Ｄｍｏｄｅｌａｎｄｉｎｔｅｒａｃｔｒｅｆｒｉｇｅｒａｔｏｒｆｏｒｅｘａｍｐｌｅ，ｉｔ３ｄｍａｘｔｏｃｒｅａｔｅａｍｏｄｅｌａｎｄｃｏｎｎｅｃｔＴｏｕｃｈＳｅｎｓｏｒｎｏｄｅａｎｄＳｃｒｉｐｔｎｏｄｅｆｒｏｍＶＲＭＬｔｏａｃｈｉｅｖｅｔｈｅｉｎｔｅｒａｃｔｉｖｅｄｅｓｉｇｎ【墨句嘣ｌｏｆｒｅｆｒｉｇｅｒａｔｏｒｍｏｄｅｌ．ＶＲＭＬ；ＪａｖａＳｃｒｉｐｔ；ｉｎｔｅｒａｃｔｉｖｅｄｅｓｉｇｎ：３ｑｍｏｄｅｌ’——６４———万方数据基于VRML与JavaScript三维模型的交互设计作者：作者单位：刊名：英文刊名：年，卷(期：胡慧芸，牛敏