CN106250023A - 基于WebGL的网页建立及操作方法 - Google Patents

基于WebGL的网页建立及操作方法 Download PDF

Info

Publication number
CN106250023A
CN106250023A CN201610622215.6A CN201610622215A CN106250023A CN 106250023 A CN106250023 A CN 106250023A CN 201610622215 A CN201610622215 A CN 201610622215A CN 106250023 A CN106250023 A CN 106250023A
Authority
CN
China
Prior art keywords
webpage
option icons
model
sing
web
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201610622215.6A
Other languages
English (en)
Inventor
杨猛
韩月
赵思敏
刘帅
何临风
李晔
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Forestry University
Original Assignee
Beijing Forestry University
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Forestry University filed Critical Beijing Forestry University
Priority to CN201610622215.6A priority Critical patent/CN106250023A/zh
Publication of CN106250023A publication Critical patent/CN106250023A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
    • G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
    • G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T19/00—Manipulating 3D models or images for computer graphics
    • G06T19/20—Editing of 3D images, e.g. changing shapes or colours, aligning objects or positioning parts
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2219/00—Indexing scheme for manipulating 3D models or images for computer graphics
    • G06T2219/20—Indexing scheme for editing of 3D models
    • G06T2219/2012—Colour editing, changing, or manipulating; Use of colour codes

Abstract

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

Description

基于WebGL的网页建立及操作方法
技术领域
本发明涉及网页建立的技术领域，尤其涉及一基于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"；//将此模型命名为1
object.scale.x＝object.scale.y＝object.scale.z＝4；//模型放大4倍
object.position.y＝-100；//模型初始位置Y坐标为-100
object.traverse(function(child){//找到模型下的每一个组件
if(child instanceofTHREE.Mesh){//如果组件是一个Meshchild.material.map＝texture1；//给其附上纹理
}
})；
scene.add(object)；//将模型添加进场景中
},onProgress,onError)；
在步骤S104中，产生多个物件属性，分别配置给所述多个模型物件，其中所述物件属性为可调整。在本实施例中，所述物件属性包括模型编号、纹理的控制、部件的选择和部件皮肤选择。进一步来说，所述纹里的控制还包括纹理重复的次数、纹理回环的方式、纹理在X轴上的偏移量、纹理在Y轴上的偏移量、纹理背景颜色的RGB分量选择。而物件属性的相关代码如下所示：
<script src＝"js/dat.gui.min.js"></script>//加载菜单相关的JS文件
<vargui＝new dat.GUI()；//创建
para＝{//所有选项初始值的设定
repeat:1,
wrap:1,
offsetX:0,
offsetY:0,
b:1,
g:1,
r:1,
newShading:"01",
newSkin1:"skin1",
newSkin2:"skin1",
newSkin3:"skin1",
B_01:true,//初始状态为勾选
B_02:true,
B_03:true,
}；
var h；
h＝gui.add(para,"newShading",["01","02","03"]).name("杯子编号").onChange(render)；//创建一个可以下拉选择的模型选择菜单
h＝gui.addFolder("Material control")；//创建一个可以打开显示更多选项的材质控制菜单
h.add(para,"repeat",1,5).name("纹理重复")；//创建一个控制纹理重复次数的选项，取值范围1到5
h.add(para,"wrap",1,3).name("纹理环绕").step(1)；//创建一个控制纹理回环方式的选项，取值范围1到3，步距为1
h.add(para,"offsetX",-1.0,1.0).name("纹理X偏移").step(0.1)；//创建一个控制纹理X轴偏移量的选项，取值范围-1到1，步距0.1
h.add(para,"offsetY",-1.0,1.0).name("纹理Y偏移").step(0.1)；//创建一个控制纹理Y轴偏移量的选项，取值范围-1到1，步距0.1
h.add(para,"b",0,1).name("蓝").step(0.1)；//创建一个控制纹理背景颜色蓝色分量的选项，取值范围0到1，步距0.1
h.add(para,"g",0,1).name("绿").step(0.1)；//创建一个控制纹理背景颜色绿色分量的选项，取值范围0到1，步距0.1
h.add(para,"r",0,1).name("红").step(0.1)；//创建一个控制纹理背景颜色红色分量的选项，取值范围0到1，步距0.1
h＝gui.addFolder("model select")；//创建一个可以打开显示更多选项的部件控制菜单
h.add(para,"B_01").name("部件01").onChange(render)；//创建一个可以勾选的部件选择选项
h.add(para,"B_03").name("部件02").onChange(render)；//创建一个可以勾选的部件选择选项
h＝gui.add(para,"newSkin1",["skin1","skin2","skin3"]).name("部件01Skin").onChange(render)；//创建一个可以下拉选择的部件皮肤选择菜单
h＝gui.add(para,"newSkin3",["skin1","skin2","skin3"]).name("部件02Skin").onChange(render)；//创建一个可以下拉选择的部件皮肤选择菜单
在步骤S106中，产生多个第一选项图标，其中所述多个第一选项图标分别对应所述模型物件。其中，每一第一选项图标与对应的模型物件之间会具有连结关系。
在步骤S108中，将所述多个第一选项图标显示于网页的第一操作页面上。也就是说，显示于第一操作页面上的第一选项图标是用于供用户选择并可进行点选操作，如图2所示。并且，图2中仅示出了帽子与杯子的第一选项图标，但本实施例不限于此，设计者亦可视其需求，自行增加其它数量的第一选项图标，以供用户有更多的选择。
在步骤S110中，当所述多个第一选项图标其中之一被操作选取时，被选取的所述模型物件及其对应的物件属性显示于网页的第二操作页面上。也就是说，当用户于第一操作页面上点选一个第一选项图标时，则网页会从第一操作页面切换至第二操作页面上，且第一选项图标与对应的模型物件之间具有连结关系，因此被选取的模型物件及及对应的物件属性会显示于第二操作页面上，如图3或图4所示所示。接着，用户便可于第二操作网页上，对模型物件进行定制，并对物件属性进行调整，以调整到用户自己想要的效果。
举例来说，用户可以对在模型物件上的纹理进行调整，以达到自己想要的效果，纹理的重复次数即这张纹理在整个模型物件上重复的次数，数字越大每张图片的大小越小；纹理的回环方式即纹理在模型物件上的回环方式，共有三种，第一种为正常的不断重复，第二种为将模型物件边缘的像素拉长，第三种为镜像重复；纹理在X轴和Y轴上的偏移量则是直观的拖动后就会向相应的方向移动，以便用户将模型物件调整到自己想要的位置；红(R)、绿(G)、蓝(B)三种分量即用户可以自己设置整个模型物件的背景(基础)颜色，尤其在只想要纯色时，可以自由的调整，只需拉动相应颜色的条即可。相关代码如下：
function change(texture,color)
{
if(texture！＝null){//在纹理不为空的情况下才能进行各项属性的修改
texture.repeat.x＝texture.repeat.y＝para.repeat；//将菜单中的重复次数赋给纹理
texture.offset.x＝para.offsetX；//将菜单的X轴偏移量赋给纹理
texture.offset.y＝para.offsetY；//将菜单的Y轴偏移量赋给纹理
if(para.wrap＝＝1)
{
texture.wrapS＝texture.wrapT＝THREE.RepeatWrapping；//修改纹理的回环方式为第一种
}else if(para.wrap＝＝2)
{
texture.wrapS＝texture.wrapT＝THREE.ClampToEdgeWrapping；//修改纹理的回环方式为第二种
}else if(para.wrap＝＝3)
{
texture.wrapS＝texture.wrapT＝THREE.MirroredRepeatWrapping；//修改纹理的回环方式为第三种
}
texture.needsUpdate＝true；//纹理实时更新
}
color.b＝para.b；//将菜单中蓝色分量赋给纹理
color.g＝para.g；//将菜单中绿色分量赋给纹理
color.r＝para.r；//将菜单中红色分量赋给纹理
}
如此一来，通过本实施例，用户可以选择自己想要的模型物件，并且可调整模型物件在操作页面上的位置，完全自己设计商品(模型物件)的纹理，以增加使用上的便利性及体验感。
图5是根据本发明实施例的基于WebGL的网页建立及操作方法的另一流程图。
在步骤S502中，基于WebGL，导入3D模型，以产生多个模型物件。在步骤S504中，产生多个物件属性，分别配置给所述多个模型物件，其中所述物件属性为可调整。在步骤S506中，产生多个第一选项图标，其中所述多个第一选项图标分别对应所述模型物件。在步骤S508中，将所述多个第一选项图标显示于网页的第一操作页面上。
在步骤S510中，产生第二选项图标，其中所述第二选项图标其中之一对应所述第一操作页面，其余的所述多个第二选项图标对应网页的多个第三操作页面。其中，第二选项图标其中之一与第一操作页面之间会具有连结关系，而其余的每一第二选项图标与对应的第三操作页面之间会具有连结关系。
在步骤S512中，将所述多个第二选项图标显示于网页的第四操作页面上。也就是说，显示于第四操作页面上的第二选项图标是用于供用户选择并可进行点选操作，且例如作为网页的首页操作页面。
在步骤S514中，当所述多个第二选项图标其中之一被操作选取时，切换至所述第一操作页面或所述多个第三操作页面的其中之一。也就是说，用户可以根据自己的需求，点选第二选项图标中的一个，使得第四操作页面切换至第一操作页面或是第三操作页面。
进一步来说，第四操作页面所显示的第二选项图标包括模型DIY、模型展示、团队介绍、联系我们，如图6所示。并且，图6中仅示出了模型DIY、模型展示、团队介绍、联系我们的第二选项图标，但本实施例不限于此，设计者亦可视其需求，自行增加其它数量的第二选项图标，以供用户有更多的选择。
举例来说，在一实施例中，当被选取的所述第二选项图标为模型展示(即用户点选显示模型展示的第二选项图标)时，切换至所述第四操作页面，并显示多个预定的模型，如图7所示。接着，使用者便可于第四操作页面中选取想要的模型，并进行相应的操作。
在一实施例中，当被选取的所述第二选项图标为团队介绍时，切换至所述第四操作页面，并显示团队的相关人员简介，如图8所示。在图8中，相关人员简介包括人员照片、人员姓名及负责项目(如主持人、网页设计等)。也就是说，用户可以在第四操作页面中，看到设计网页的相关人员简介，并进行了解。
在一实施例中，当被选取的所述第二选项图标为联系我们时，切换至所述第四操作页面，并显示姓名、电邮、电话号码及信息的选项，如图9所示。也就是说，用户可以在第四页面中，留下自己的姓名、电邮、电话号码及信息，以便于反馈相关的意见设计人员，以便进行相关的调整及回复。
在一实施例中，当被选取的所述第二选项图标为模型DIY时，切换至所述第一操作页面。接着，进入步骤S516，当所述多个第一选项图标其中之一被操作选取时，被选取的所述模型物件及其对应的物件属性显示于网页的第二操作页面上。而步骤S516的相关操作，可参考图1的实施例的步骤S110说明，故在此不再赘述。
综上所述，根据本发明的技术方案，通过基于WebGL，导入3D模型，以产生多个模型物件，分别多个物件属性配置给所述多个模型物件，再产生多个第一选项图标分别对应所述模型物件，且将所述多个第一选项图标显示于网页的第一操作页面上以及当所述多个第一选项图标其中之一被选取时，被选取的所述模型物件及其对应的物件属性显示于网页的第二操作页面上。如此一来，户可以选择自己想要的模型物件，并且可调整模型物件在操作页面上的位置，完全自己设计商品(模型物件)的纹理，以增加使用上的便利性及体验感。
以上所述仅为本发明的实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的权利要求范围之内。

Claims (9)

1.一种基于WebGL的网页建立及操作方法，其特征在于，包括以下步骤：
基于WebGL，导入3D模型，以产生多个模型物件；
产生多个物件属性，分别配置给所述多个模型物件，其中所述物件属性为可调整；
产生多个第一选项图标，其中所述多个第一选项图标分别对应所述模型物件；
将所述多个第一选项图标显示于网页的第一操作页面上；
当所述多个第一选项图标其中之一被操作选取时，被选取的所述模型物件及其对应的物件属性显示于网页的第二操作页面上。
2.根据权利要求1所述的基于WebGL的网页建立及操作方法，其特征在于，所述物件属性包括模型编号、纹理的控制、部件的选择和部件皮肤选择。
3.根据权利要求2所述的基于WebGL的网页建立及操作方法，其特征在于，所述纹里的控制包括纹理的重复次数、纹理的回环方式、纹理在X轴上的偏移量、纹理在Y轴上的偏移量、纹理背景颜色的RGB分量选择。
4.根据权利要求1所述的基于WebGL的网页建立及操作方法，其特征在于，还包括：
产生第二选项图标，其中所述第二选项图标其中之一对应所述第一操作页面，其余的所述多个第二选项图标对应网页的多个第三操作页面；
将所述多个第二选项图标显示于网页的第四操作页面上；
当所述多个第二选项图标其中之一被操作选取时，切换至所述第一操作页面或所述多个第三操作页面的其中之一。
5.根据权利要求4所述的基于WebGL的网页建立及操作方法，其特征在于，所述多个第二选项图标包括模型DIY、模型展示、团队介绍、联系我们。
6.根据权利要求5所述的基于WebGL的网页建立及操作方法，其特征在于，当被选取的所述第二选项图标为模型DIY时，切换至所述第一操作页面。
7.根据权利要求5所述的基于WebGL的网页建立及操作方法，其特征在于，当被选取的所述第二选项图标为模型展示时，切换至所述第四操作页面，并显示多个预定的模型。
8.根据权利要求5所述的基于WebGL的网页建立及操作方法，其特征在于，当被选取的所述第二选项图标为团队介绍时，切换至所述第四操作页面，并显示团队的相关人员简介。
9.根据权利要求5所述的基于WebGL的网页建立及操作方法，其特征在于，当被选取的所述第二选项图标为联系我们时，切换至所述第四操作页面，并显示姓名、电邮、电话号码及信息的选项。
CN201610622215.6A 2016-08-01 2016-08-01 基于WebGL的网页建立及操作方法 Pending CN106250023A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610622215.6A CN106250023A (zh) 2016-08-01 2016-08-01 基于WebGL的网页建立及操作方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610622215.6A CN106250023A (zh) 2016-08-01 2016-08-01 基于WebGL的网页建立及操作方法

Publications (1)

Publication Number Publication Date
CN106250023A true CN106250023A (zh) 2016-12-21

Family

ID=57605879

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610622215.6A Pending CN106250023A (zh) 2016-08-01 2016-08-01 基于WebGL的网页建立及操作方法

Country Status (1)

Country Link
CN (1) CN106250023A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108664486A (zh) * 2017-03-28 2018-10-16 腾讯科技（深圳）有限公司 一种网页纹理内存管理方法及装置
CN108765534A (zh) * 2018-05-24 2018-11-06 武汉斗鱼网络科技有限公司 一种图像渲染方法、装置、设备及存储介质
CN114997840A (zh) * 2022-07-18 2022-09-02 南京华娱数字科技有限公司 一种基于WebGL的CGI项目流程数据存储管理系统

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
彭飞，陈洪军等: "基于Web的个性化产品定制系统的体系结构研究", 《机械设计》 *
汪浩 等: "基于WebGL的交互平台设计与实现", 《电子测量技术》 *
荣艳冬: "基于WebGL的3D技术在网页中的运用", 《应用成果》 *
贾虹，王玉槐等: "基于Web的五金产品个性化定制平台研制与开发", 《轻工机械》 *
赵凯: "基于个性化产品定制的参数化设计系统研究", 《中国博士学位论文全文数据库 工程科技Ⅱ辑》 *

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108664486A (zh) * 2017-03-28 2018-10-16 腾讯科技（深圳）有限公司 一种网页纹理内存管理方法及装置
CN108664486B (zh) * 2017-03-28 2022-12-09 深圳市雅阅科技有限公司 一种网页纹理内存管理方法及装置
CN108765534A (zh) * 2018-05-24 2018-11-06 武汉斗鱼网络科技有限公司 一种图像渲染方法、装置、设备及存储介质
CN108765534B (zh) * 2018-05-24 2022-06-21 武汉斗鱼网络科技有限公司 一种图像渲染方法、装置、设备及存储介质
CN114997840A (zh) * 2022-07-18 2022-09-02 南京华娱数字科技有限公司 一种基于WebGL的CGI项目流程数据存储管理系统
CN114997840B (zh) * 2022-07-18 2022-11-29 南京华娱数字科技有限公司 一种基于WebGL的CGI项目流程数据存储管理系统

Similar Documents

Publication Publication Date Title
US10031906B2 (en) Images and additional data associated with cells in spreadsheets
US8127246B2 (en) Varying user interface element based on movement
EP2137958B1 (en) Parameter setting superimposed upon an image
JP5908130B2 (ja) ジャーナルを生成するためのアプリケーション
US8560946B2 (en) Timeline visualizations linked with other visualizations of data in a thin client
US11348315B2 (en) Generating and presenting a 3D virtual shopping environment
KR101760777B1 (ko) 반응형 웹사이트 빌더 시스템 및 그 방법
US10482665B2 (en) Synching and desyncing a shared view in a multiuser scenario
US20110167336A1 (en) Gesture-based web site design
CN109844816A (zh) 用于显示代表性图像的系统和方法
US20150346981A1 (en) Slider controlling visibility of objects in a 3d space
WO2015017227A1 (en) Three dimensional conditional formatting
CN102509350A (zh) 一种基于立方体的体育运动赛事信息可视化方法
Fairchild Information management using virtual reality-based visualizations
CN102364460B (zh) 基于移动终端的页面自动放大方法和系统
CN102609256A (zh) 一种基于网页的动态图表生成方法
CN105741327B (zh) 提取图片的主色和醒目色的方法和装置
CN106250023A (zh) 基于WebGL的网页建立及操作方法
JP2013125328A (ja) 拡張現実感表示方法
EP3821379A1 (en) Computationally efficient human-computer interface for collaborative modification of content
CN103412748A (zh) 嵌入式平台的用户界面的显示控制方法、装置及系统
US20240111808A1 (en) Aggregated physical and logical network mesh view
CN110503726A (zh) 网页端三维模型标注信息显示浏览方法及系统
US10466871B2 (en) Customizing tabs using visual modifications
US9785309B2 (en) Method and apparatus for providing a layered webpage

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20161221