CN109559384B - 一种基于WebGL的网页端三维模型编辑方法 - Google Patents

一种基于WebGL的网页端三维模型编辑方法 Download PDF

Info

Publication number
CN109559384B
CN109559384B CN201811376216.2A CN201811376216A CN109559384B CN 109559384 B CN109559384 B CN 109559384B CN 201811376216 A CN201811376216 A CN 201811376216A CN 109559384 B CN109559384 B CN 109559384B
Authority
CN
China
Prior art keywords
model
fbx
modifying
data
materials
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.)
Active
Application number
CN201811376216.2A
Other languages
English (en)
Other versions
CN109559384A (zh
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.)
Changsha Mourui Network Technology Co ltd
Original Assignee
Changsha Mourui Network Technology Co ltd
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 Changsha Mourui Network Technology Co ltd filed Critical Changsha Mourui Network Technology Co ltd
Priority to CN201811376216.2A priority Critical patent/CN109559384B/zh
Publication of CN109559384A publication Critical patent/CN109559384A/zh
Application granted granted Critical
Publication of CN109559384B publication Critical patent/CN109559384B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • 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的网页端三维模型编辑方法，该方法至少包括：第一步、将用于源文件的FBX进行标准化处理；第二步、利用JavaScript程序，通过three.js框架，将第一步产生的FBX文件加载到内存，读取模型数据，并与界面UI关联，然后在支持WebGL的浏览器页面中显示FBX模型；第三步、通过界面UI对模型进行控制和对材质进行修改；第四步、将修改数据提交到后台进行自动化处理。该编辑方法基于WebGL框架three.js加载模型fbx格式到网页端三维空间，读取模型所有材质并利用HTML列表元素进行呈现，模型在三维空间可进行旋转、缩放、按材质选择及按网格选择，因而使得模型编辑方便。

Description

一种基于WebGL的网页端三维模型编辑方法
技术领域
本发明涉及三维模型编辑技术，特别涉及一种基于WebGL框架three.js加载模型fbx格式到三维空间、方便编辑的网页端三维模型编辑方法。
背景技术
随着社会和科技的进步，信息展示和交流慢慢从文字、图片和视频向三维甚至多维转变，从而衍生了大量新的技术，如虚拟现实(VR)、增强现实(AR)、混合显示(MR)等,而这些技术又离不开三维模型，三维模型创建后不一定能适应任何地方任何情况，而要解决这个问题，就离不开模型编辑，对于Web网页,现有三维模型的显示和编辑存在很多不足：
1、模型显示不方便，在Web上进行三维展示需要借助flash或其他插件，从而很容易造成加载速度慢，显示不顺畅；
2、三维文件格式繁多，兼容性差，目前三维软件各有各的标准，从而导致三维文件格式也五花八门，如fbx、obj、dae、gltf/glb等；
3、编辑不方便，需要借助第三方软件，目前模型编辑比较通用的方案是将模型导回到制作软件进行修改编辑(如3DMAX、Maya、Blender、C4D等三维建模软件)，编辑完再导出相应的格式使用。
发明内容
本发明的目的是为了解决上述技术问题，提供一种基于WebGL的网页端三维模型编辑方法，该编辑方法基于WebGL框架threejs加载模型fbx格式到网页端三维空间，读取模型所有材质并利用HTML列表元素进行呈现，模型在三维空间可进行旋转、缩放、按材质选择及按网格选择，因而使得模型编辑方便。
为了解决上述现有技术问题,本发明的技术方案是:
本发明一种基于WebGL的网页端三维模型编辑方法，所述三维模型编辑方法至少包括：第一步、将用于源文件的FBX进行标准化处理；第二步、利用JavaScript程序，通过three.js框架，将第一步产生的FBX文件加载到内存，读取模型数据，并与界面UI关联，然后在支持WebGL的浏览器页面中显示FBX模型；第三步、通过界面UI对模型进行控制和对材质进行修改；第四步、将修改数据提交到后台进行自动化处理。
所述第一步至少包括：
S1.将FBX中的复合材质模型网格按材质进行拆分；
S2.将FBX所有材质转化为标准材质；
S3.为FBX中没有材质的网格赋予新材质；
S4.为FBX中缺失UV通道一的网格生成UV通道一信息；
S5.为FBX添加重置变换，将FBX中点归零；
S6.将FBX中网格和材质进行统一命名，统一命名后的每个网格和材质的名称具有唯一性；
S7.将步骤S6标准化后的FBX文件导出并保存；
S8.对步骤S7导出的FBX文件的模型网格进行减面压缩优化。
所述第二步至少包括：
S1.初始化，初始化浏览器页面和three.js环境，添加UI交互函数，加载标准材质库和标准贴图库；
S2.解析模型，通过three.js框架和FBX加载器将第一步产生的FBX文件加载到内存，解析FBX文件中的网格和材质数据并存储到内存，将解析到的网格和材质数据与页面UI函数进行关联，得到解析后的FBX模型；
S3.展示模型，为模型添加基本控制器并通过three.js框架将上述解析模型得到的FBX模型渲染到页面。
所述第三步至少包括：
S1、选中材质，通过鼠标点击模型或材质列表选中单个材质；
S2、替换选中材质，从标准材质库选取对应材质替换选中材质；
S3、修改材质，通过UI对选中材质的属性进行修改，颜色可通过择色板进行修改，贴图可从标准贴图库选择或自行上传，数值可拖拽修改或直接输入修改，修改的同时保存修改信息。
优选地，所述第三步还包括：S4、赋予新材质，多个网格共用一个材质时，右击模型，弹出分离材质UI，点击可对选中网格赋予新材质，这样可将多个网格分别赋予新的材质以便做更细致的材质编辑，赋予的新材质可进行上述S1、S2S3操作。
优选地，所述第三步还包括：S5、修改尺寸，通过修改尺寸UI可对模型原始尺寸进行等比修改。
所述第四步至少包括：
S1、格式化修改数据，将保存的修改信息格式化成JSON格式数据；
S2、提交数据，通过调用后台服务接口将格式化后的JSON格式数据提交到后台。
本发明一种基于WebGL的网页端三维模型编辑方法,其有益效果有：
1、该模型编辑方法不依赖其它软件或插件，只需浏览器，使用基于WebGL的框架three.js加载模型(fbx格式)到三维世界进行展示并读取模型所有材质利用HTML列表元素进行呈现，模型在三维世界可进行旋转、缩放、按材质选择及按网格选择，使用方便、速度快；
2、该模型编辑方法使用简单、方便快速上手，任何人即使没有任何技术基础也可轻松进行模型编辑；
3、使用主流通用格式FBX，兼容性好。
附图说明
图1，为本发明一种基于WebGL的网页端三维模型编辑方法的流程图。
具体实施方式
下面结合实施例对本发明作进一步说明：
实施例
本发明一种基于WebGL的网页端三维模型编辑方法，本实施例加载一摩托车三维模型，所述模型编辑方法基于WebGL的框架three.js加载摩托车三维模型的motou.fbx文件到三维空间进行展示并读取摩托车模型所有材质，所述三维模型编辑方法包括：第一步、将用于源文件的motou.fbx进行标准化处理；
所述第一步至少包括：
S1.将motou.fbx中的复合材质模型网格按材质进行拆分；
S2.将motou.fbx所有材质转化为标准材质；
S3.为motou.fbx中没有材质的网格赋予新材质；
S4.为motou.fbx中缺失UV通道一的网格生成UV通道一信息；
S5.为motou.fbx添加重置变换，将FBX中点归零；
S6.将motou.fbx中网格和材质进行统一命名，统一命名后的每个网格和材质的名称具有唯一性；
S7.将步骤S6标准化后的motou.fbx文件导出并保存；
S8.对步骤S7导出的motou.fbx文件的模型网格进行减面压缩优化。
第二步、利用JavaScript程序，通过three.js框架，将第一步产生的motou.fbx文件加载到内存，读取模型数据，并与界面UI关联，然后在支持WebGL的浏览器页面中显示FBX模型，包括：
S1.初始化，初始化浏览器页面和three.js环境，添加UI交互函数，加载标准材质库和标准贴图库；
S2.解析模型，通过three.js框架和FBX加载器将第一步产生的FBX文件加载到内存，解析FBX文件中的网格和材质数据并存储到内存，将解析到的网格和材质数据与页面UI函数进行关联，得到解析后的FBX模型；
S3.展示模型，为模型添加基本控制器并通过three.js框架将上述解析模型得到的FBX模型渲染到页面。
第三步、通过界面UI对模型进行控制和对材质进行修改，包括：
S1、选中材质，通过鼠标点击模型或材质列表选中单个材质；
S2、替换选中材质，从标准材质库选取对应材质替换选中材质；
S3、修改材质，通过UI对选中材质的属性进行修改，颜色可通过择色板进行修改，贴图可从标准贴图库选择或自行上传，数值可拖拽修改或直接输入修改，修改的同时保存修改信息。
第四步、将修改数据提交到后台进行自动化处理，包括：
S1、格式化修改数据，将保存的修改信息格式化成JSON格式数据；
S2、提交数据，通过调用后台服务接口将格式化后的JSON格式数据提交到后台。
该模型编辑方法可进行材质属性修改，通过HTML元素与三维空间可以实时联动，HTML元素上进行属性修改会实时体现到三维世界，如改变数值、点击列表元素、替换贴图，而三维世界中的操作也会改变HTML元素的值，如切换材质。
该模型编辑方法可进行贴图替换及修改，贴图可从本发明提供的标准贴图库中选择或自行上传替换，贴图的旋转和平铺次数可进行修改。
该模型编辑方法可进行模型尺寸修改，可读取模型真实尺寸，并可通过拖拽长、宽、高任意一项进行等比缩放。
该模型编辑方法可进行赋予新材质，如果是多个网格共用一个材质，可为这些网格分别赋予新的材质以便做更细致的材质编辑。
以上已将本发明做一详细说明，以上所述，仅为本发明之较佳实施例而已，当不能限定本发明实施范围，即凡依本申请范围所作一般技术手段的增减或替换，皆应仍属本发明涵盖范围内。

Claims (3)

1.一种基于WebGL的网页端三维模型编辑方法，其特征在于，所述三维模型编辑方法包括：第一步、将用于源文件的FBX进行标准化处理，具体包括以下步骤：
S1 将FBX中的复合材质模型网格按材质进行拆分；
S2 将FBX所有材质转化为标准材质；
S3 为FBX中没有材质的网格赋予新材质；
S4 为FBX中缺失UV通道一的网格生成UV通道一信息；
S5 为FBX添加重置变换，将FBX中点归零；
S6 将FBX中网格和材质进行统一命名，统一命名后的每个网格和材质的名称具有唯一性；
S7 将步骤S6标准化后的FBX文件导出并保存；
S8 对步骤S7导出的FBX文件的模型网格进行减面压缩优化；
第二步、利用JavaScript程序，通过three.js框架，将第一步产生的FBX文件加载到内存，读取模型数据，并与界面UI关联，然后在支持WebGL的浏览器页面中显示FBX模型，具体包括以下步骤：
S1初始化，初始化浏览器页面和three.js环境，添加UI交互函数，加载标准材质库和标准贴图库；
S2解析模型，通过three.js框架和FBX加载器将第一步产生的FBX文件加载到内存，解析FBX文件中的网格和材质数据并存储到内存，将解析到的网格和材质数据与页面UI函数进行关联，得到解析后的FBX模型；
S3展示模型，为模型添加基本控制器并通过three.js框架将上述解析模型得到的FBX模型渲染到页面；
第三步、通过界面UI对模型进行控制和对材质进行修改，具体包括以下步骤：
S1选中材质，通过鼠标点击模型或材质列表选中单个材质；
S2替换选中材质，从标准材质库选取对应材质替换选中材质；
S3修改材质，通过UI对选中材质的属性进行修改，颜色可通过择色板进行修改，贴图可从标准贴图库选择或自行上传，数值可拖拽修改或直接输入修改，修改的同时保存修改信息；
S4赋予新材质，多个网格共用一个材质时，右击模型，弹出分离材质UI，点击可对选中网格赋予新材质，这样可将多个网格分别赋予新的材质以便做更细致的材质编辑，赋予的新材质可进行上述S1、 S2 、S3操作；
第四步、将修改数据提交到后台进行自动化处理。
2.根据权利要求1所述的一种基于WebGL的网页端三维模型编辑方法，其特征在于，所述第三步还包括：S5修改尺寸，通过修改尺寸UI可对模型原始尺寸进行等比修改。
3.根据权利要求1所述的一种基于WebGL的网页端三维模型编辑方法，其特征在于，所述第四步包括：
S1格式化修改数据，将保存的修改信息格式化成JSON格式数据；
S2提交数据，通过调用后台服务接口将格式化后的JSON格式数据提交到后台。
CN201811376216.2A 2018-11-19 2018-11-19 一种基于WebGL的网页端三维模型编辑方法 Active CN109559384B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811376216.2A CN109559384B (zh) 2018-11-19 2018-11-19 一种基于WebGL的网页端三维模型编辑方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811376216.2A CN109559384B (zh) 2018-11-19 2018-11-19 一种基于WebGL的网页端三维模型编辑方法

Publications (2)

Publication Number Publication Date
CN109559384A CN109559384A (zh) 2019-04-02
CN109559384B true CN109559384B (zh) 2022-11-08

Family

ID=65866670

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811376216.2A Active CN109559384B (zh) 2018-11-19 2018-11-19 一种基于WebGL的网页端三维模型编辑方法

Country Status (1)

Country Link
CN (1) CN109559384B (zh)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111275826B (zh) * 2020-02-24 2021-02-19 广州视革科技有限公司 一种适用于ar情景的三维模型自动转换方法
CN111737780B (zh) * 2020-08-12 2020-12-11 绿漫科技有限公司 一种在线模型编辑方法及在线模型编辑系统
CN112184874A (zh) * 2020-10-20 2021-01-05 国网湖南省电力有限公司 一种轻量化三维模型高性能图形标记、进度模拟及导航方法
CN112419507A (zh) * 2020-11-10 2021-02-26 上海纳汇五金制品有限公司 一种3Dweb模型线上展示方法及系统
CN112784342A (zh) * 2021-01-29 2021-05-11 广联达科技股份有限公司 建筑构件三维模型的在线编辑方法及装置
CN113076631A (zh) * 2021-03-22 2021-07-06 广东博智林机器人有限公司 一种机器人模拟器生成方法、机器人模型仿真方法及装置
CN113487747B (zh) * 2021-06-25 2024-03-29 山东齐鲁数通科技有限公司 一种模型处理方法、装置、终端及存储介质
CN114896644B (zh) * 2022-05-17 2023-06-20 电子科技大学 一种基于ThreeJS的3D塔吊施工场景展示系统的实现方法
CN115631293A (zh) * 2022-08-18 2023-01-20 中通服慧展科技有限公司 一种3d大场景可视化编辑方法、装置、电子设备及介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106683193A (zh) * 2016-12-07 2017-05-17 歌尔科技有限公司 一种三维模型的设计方法和设计装置
WO2017152703A1 (zh) * 2016-03-11 2017-09-14 广州视睿电子科技有限公司 三维标签实现方法和装置
CN107679188A (zh) * 2017-09-30 2018-02-09 东莞市同立方智能科技有限公司 一种在网页中加载3d模型的方法
WO2018170989A1 (zh) * 2017-03-24 2018-09-27 长沙眸瑞网络科技有限公司 3d模型的移动端展示交互实现方法
CN108628945A (zh) * 2018-03-29 2018-10-09 成都明镜视觉科技有限公司 一种将fbx模型文件自动转换为fbs模型文件的方法

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10139985B2 (en) * 2012-06-22 2018-11-27 Matterport, Inc. Defining, displaying and interacting with tags in a three-dimensional model

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2017152703A1 (zh) * 2016-03-11 2017-09-14 广州视睿电子科技有限公司 三维标签实现方法和装置
CN106683193A (zh) * 2016-12-07 2017-05-17 歌尔科技有限公司 一种三维模型的设计方法和设计装置
WO2018170989A1 (zh) * 2017-03-24 2018-09-27 长沙眸瑞网络科技有限公司 3d模型的移动端展示交互实现方法
CN108629850A (zh) * 2017-03-24 2018-10-09 长沙眸瑞网络科技有限公司 3d模型的移动端展示交互实现方法
CN107679188A (zh) * 2017-09-30 2018-02-09 东莞市同立方智能科技有限公司 一种在网页中加载3d模型的方法
CN108628945A (zh) * 2018-03-29 2018-10-09 成都明镜视觉科技有限公司 一种将fbx模型文件自动转换为fbs模型文件的方法

Also Published As

Publication number Publication date
CN109559384A (zh) 2019-04-02

Similar Documents

Publication Publication Date Title
CN109559384B (zh) 一种基于WebGL的网页端三维模型编辑方法
CN109753334A (zh) 一种基于WebGL的三维模型显示方法
CN104216691B (zh) 一种创建应用的方法及装置
US20100011309A1 (en) Data visualisation systems
CN108597032B (zh) 将建筑信息模型导入Unity3D中显示方法及系统
WO2020107850A1 (zh) 大屏场景的编辑方法、装置及计算机可读存储介质
CN104834672A (zh) 基于互联网的实物3d互动展示系统
US10606455B2 (en) Method for processing information
CN114816189A (zh) 一种基于云端的工业智能装备远程组态方法
JP2021512364A (ja) ビジュアル編集システムにおいて重なるオブジェクトを処理するためのシステム及び方法
CN111429553B (zh) 动画预览方法、装置、计算机设备和存储介质
US20160314502A1 (en) System and method for streamlining the design and development process of multiple advertising units
CN102468827B (zh) 一种任意波形编辑方法及装置
CN113010062A (zh) 生成设计方案的方法、装置及电子设备
CN106126254B (zh) 一种关联的平视界面游戏编辑系统与方法
CN111506997A (zh) 一种基于bim的电力工程量计算方法
US7663644B2 (en) Automatic element substitution in vector-based illustrations
CN113468261B (zh) 基于图形编辑引擎构建物联网实体关系的方法和系统
CN1555008A (zh) 智能虚拟显示器的制作方法
CN103795799A (zh) 一种远程监控方法与系统
KR101268865B1 (ko) 3ｄ 가상현실 저작도구의 실시간 재질 생성을 위한 편집 방법
CN111523161A (zh) 一种基于BIM和Unity3d的3D物联网可视化人机交互方法
CN110866379A (zh) 数据可视化图表库系统
CN115712546A (zh) 自动化设备运行状态监控显示的可编辑系统
JP5883953B2 (ja) プログラマブルコントローラシステム、そのプログラマブル表示器、作画エディタ装置、プログラム

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant