基于WebGL的网页建立及操作方法技术

本发明专利技术公开了一种基于WebGL的网页建立及操作方法，包括：基于WebGL，导入3D模型，以产生多个模型物件；产生多个物件属性，分别配置给所述多个模型物件，其中所述物件属性为可调整；产生多个第一选项图标，其中所述多个第一选项图标分别对应所述模型物件；将所述多个第一选项图标显示于网页的第一操作页面上；当所述多个第一选项图标其中之一被选取时，被选取的所述模型物件及其对应的物件属性显示于网页的第二操作页面上。通过本发明专利技术，以解决现有技术存在的无法呈现立体效果3D场景和模型给用户的问题。

The establishment and operation method of web page based on WebGL

The invention discloses a method for constructing WebGL \and operating method, which is based on based on WebGL, introduced the 3D model, to generate multiple model objects; generating a plurality of object attributes, are allocated to the plurality of model objects, wherein the object attribute is adjustable; generating a plurality of first icon options, including the first option is the icon that correspond to the model objects; the plurality of the first icon displayed on the first page options page operation; when the first one of the options icon is selected, the object attribute is selected the model object and the corresponding display on page second operation on the page. The invention solves the problem that the existing technology can not render stereoscopic effect 3D scene and model to the user.

【技术实现步骤摘要】

本专利技术涉及网页建立的
，尤其涉及一基于WebGL的网页建立及操作方法。
技术介绍
这么多年以来，网页似乎都停留在2D的世界。2012年末开始到整个2013年，涌现出非常多采用CSS 3D变形和Parallax(视觉差，通过鼠标滑动让网页上不同层次的内容以不同的速率位移而形成一种层次感)效果的网站，让这个2D的网络世界出现了丰富的层次和纵深感。然而，2D的网页仅能呈现平面的效果，而无法呈现立体效果3D场景和模型给用户，如此将会降低用户的体验。因此，在网页建立的相关设计仍有改善的空间。
技术实现思路
本专利技术的主要目的在于提供一种基于WebGL的网页建立及操作方法，以解决现有技术存在的无法呈现立体效果3D场景和模型给用户的问题。为解决上述问题，本专利技术实施例提供一种基于WebGL的网页建立及操作方法，包括：基于WebGL，导入3D模型，以产生多个模型物件；产生多个物件属性，分别配置给所述多个模型物件，其中所述物件属性为可调整；产生多个第一选项图标，其中所述多个第一选项图标分别对应所述模型物件；将所述多个第一选项图标显示于网页的第一操作页面上；当所述多个第一选项图标其中之一被选取时，被选取的所述模型物件及其对应的物件属性显示于网页的第二操作页面上。其中，所述物件属性包括模型编号、纹理的控制、部件的选择和部件皮肤选择。其中，所述纹里的控制包括纹理重复的次数、纹理回环的方式、纹理在X轴上的偏移量、纹理在Y轴上的偏移量、纹理背景颜色的RGB分量选择。其中，所述基于WebGL的网页建立及操作方法还包括：产生第二选项图标，其中所述第二选项图标其中之一对应所述第一操作页面，其余的所述多个第二选项图标对应网页的多个第三操作页面；将所述多个第二选项图标显示于网页的第四操作页面上；当所述多个第二选项图标其中之一被操作选取时，切换至所述第一操作页面或所述多个第三操作页面的其中之一。其中，所述多个第二选项图包括模型DIY、模型展示、团队介绍、联系我们。其中，当被选取的所述第二选项图标为模型DIY时，切换至所述第一操作页面。其中，当被选取的所述第二选项图标为模型展示时，切换至所述第四操作页面，并显示多个预定的模型。其中，当被选取的所述第二选项图标为团队介绍时，切换至所述第四操作页面，并显示团队的相关人员简介。其中，当被选取的所述第二选项图标为联系我们时，切换至所述第四操作页面，并显示姓名、电邮、电话号码及信息的选项。根据本专利技术的技术方案，通过基于WebGL，导入3D模型，以产生多个模型物件，分别多个物件属性配置给所述多个模型物件，再产生多个第一选项图标分别对应所述模型物件，且将所述多个第一选项图标显示于网页的第一操作页面上以及当所述多个第一选项图标其中之一被选取时，被选取的所述模型物件及其对应的物件属性显示于网页的第二操作页面上。如此一来，户可以选择自己想要的模型物件，并且可调整模型物件在操作页面上的位置，完全自己设计商品(模型物件)的纹理，以增加使用上的便利性及体验感。附图说明此处所说明的附图用来提供对本专利技术的进一步理解，构成本申请的一部分，本专利技术的示意性实施例及其说明用于解释本专利技术，并不构成对本专利技术的不当限定。在附图中：图1是根据本专利技术实施例的基于WebGL的网页建立及操作方法的流程图；图2是根据本专利技术实施例的第一操作页面的示意图；图3是根据本专利技术实施例的第二操作页面的示意图；图4是根据本专利技术实施例的第二操作页面的另一示意图；图5是根据本专利技术实施例的基于WebGL的网页建立及操作方法的另一流程图；图6是根据本专利技术实施例的第四操作页面的示意图；图7是是根据本专利技术实施例的第三操作页面的示意图；图8是是根据本专利技术实施例的第三操作页面的另一示意图；图9是是根据本专利技术实施例的第三操作页面的另一示意图。具体实施方式本专利技术的主要思想在于，基于WebGL，导入3D模型，以产生多个模型物件，分别多个物件属性配置给所述多个模型物件，再产生多个第一选项图标分别对应所述模型物件，且将所述多个第一选项图标显示于网页的第一操作页面上以及当所述多个第一选项图标其中之一被选取时，被选取的所述模型物件及其对应的物件属性显示于网页的第二操作页面上。如此一来，户可以选择自己想要的模型物件，并且可调整模型物件在操作页面上的位置，完全自己设计商品(模型物件)的纹理，以增加使用上的便利性及体验感。为使本专利技术的目的、技术方案和优点更加清楚，以下结合附图及具体实施例，对本专利技术做进一步地详细说明。根据本专利技术的实施例，提供了一种基于WebGL的网页建立及操作方法。图1是根据本专利技术实施例的基于WebGL的网页建立及操作方法的流程图。在步骤S102中，基于WebGL，导入3D模型，以产生多个模型物件。其中，WebGL是一种3D绘图标准，它允许把JavaScript和OpenGL ES2.0结合在一起，这代表WebGL免去了开发网页专用渲染插件的麻烦，开发人员可以借助系统显卡来在浏览器里更流畅的展示3D场景和模型，还能创建复杂的导航和数据视觉化。在本实施例中，模型物件例如为帽子、杯子等。也就是说，通过WebGL所产生的模型物件，可供用户选择并使用。并且，模型物件导入的代码如下所示：<script src＝\js/loaders/OBJLoader.js\></script>//加载OBJ文件读取的JS文件var loader＝new THREE.OBJLoader(manager)；//创建loader.load('obj/male02/beizi1.obj',function(object){//读取目标文件object.name＝\1\；//将此模型命名为1object.scale.x＝object.scale.y＝object.scale.z＝4；//模型放大4倍object.position.y＝-100；//模型初始位置Y坐标为-100object.traverse(function(child){//找到模型下的每一个组件if(child instanceofTHREE.Mesh){//如果组件是一个Mesh child.material.map＝texture1；//给其附上纹理本文档来自技高网...

【技术保护点】
一种基于WebGL的网页建立及操作方法，其特征在于，包括以下步骤：基于WebGL，导入3D模型，以产生多个模型物件；产生多个物件属性，分别配置给所述多个模型物件，其中所述物件属性为可调整；产生多个第一选项图标，其中所述多个第一选项图标分别对应所述模型物件；将所述多个第一选项图标显示于网页的第一操作页面上；当所述多个第一选项图标其中之一被操作选取时，被选取的所述模型物件及其对应的物件属性显示于网页的第二操作页面上。

【技术特征摘要】
1.一种基于WebGL的网页建立及操作方法，其特征在于，包括以下步骤：基于WebGL，导入3D模型，以产生多个模型物件；产生多个物件属性，分别配置给所述多个模型物件，其中所述物件属性为可调整；产生多个第一选项图标，其中所述多个第一选项图标分别对应所述模型物件；将所述多个第一选项图标显示于网页的第一操作页面上；当所述多个第一选项图标其中之一被操作选取时，被选取的所述模型物件及其对应的物件属性显示于网页的第二操作页面上。2.根据权利要求1所述的基于WebGL的网页建立及操作方法，其特征在于，所述物件属性包括模型编号、纹理的控制、部件的选择和部件皮肤选择。3.根据权利要求2所述的基于WebGL的网页建立及操作方法，其特征在于，所述纹里的控制包括纹理的重复次数、纹理的回环方式、纹理在X轴上的偏移量、纹理在Y轴上的偏移量、纹理背景颜色的RGB分量选择。4.根据权利要求1所述的基于WebGL的网页建立及操作方法，其特征在于，还包括：产生第二选项图标，其中所述第二选项图标其中之一对应所述第一操作页面，其余的所述多个第二选项图标对应网页的多...

【专利技术属性】
技术研发人员：杨猛，韩月，赵思敏，刘帅，何临风，李晔，
申请(专利权)人：北京林业大学，
类型：发明
国别省市：北京;11