CN107679188A - A kind of method that 3D models are loaded in webpage - Google Patents
A kind of method that 3D models are loaded in webpage Download PDFInfo
- Publication number
- CN107679188A CN107679188A CN201710918604.8A CN201710918604A CN107679188A CN 107679188 A CN107679188 A CN 107679188A CN 201710918604 A CN201710918604 A CN 201710918604A CN 107679188 A CN107679188 A CN 107679188A
- Authority
- CN
- China
- Prior art keywords
- models
- model
- animation
- scene
- webpage
- 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.)
- Granted
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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a kind of method that 3D models are loaded in webpage, comprise the following steps, one introduces Thee.js and related plug-in unit in HTML code；2nd, js codes are write, are imported 3D models in js files using the loader that Three.js is provided；3rd, 3D models are added in the scene that previous step creates, and the light of scene set, video camera, scene, renderer；4th, scene is appended in the body labels in HTML code by appendchild；5th, interactive operation of the coding definition to 3D models in js files；6th, the 3D models of loading are shown in webpage.The present invention（1）Without filling extra plug-in unit and flash, real webpage 3D animations are realized, reduce the workload of developer, so as to substantially reduce development cost；（2）Can be with the 3D models that outside is loaded in purpose webpage（3）The 3D models that can come in loading are through a series of interactive operation of row；（4）Model keeps independence, and web page code separates with model code, weak coupling, easy to maintain and renewal.
Description
Technical field
The present invention relates to computer virtual reality technology field, more particularly to a kind of side that 3D models are loaded in webpage
Method.
Background technology
Existing FLASH does not support 3D models, can only do pseudo- 3D animations, and can not directly show that true 3D is moved in webpage
Draw, the 3D animations that HTML5 3D make, the simple interactive operation such as can zoom in and out, pull, overturning, can not realize similar to mould
The interactive operations such as type is blown, 3D model separations, and can not accomplish to be introduced directly into 3D models into webpage, it is necessary to encode generation 3D
Model, workload is very big, and the cost of time and money is high, and not advanced enough browser can not supported web page 3D model animations.
The content of the invention
It is an object of the invention to provide a kind of method that 3D models are loaded in webpage, to realize that real webpage 3D is moved
Draw, can also be grasped with loading outside 3D models in purpose webpage and the 3D models that loading is come in can be interacted through row a series of complex
Make.
To achieve these goals, the present invention provides following technical scheme：
A kind of method that 3D models are loaded in webpage, comprises the following steps, Step 1: introducing Thee.js in HTML code
And related plug-in unit；
Step 2: writing js codes, 3D models are imported in js files using the loader that Three.js is provided；
Step 3: 3D models are added in the scene that previous step creates, and the light of scene set, video camera, scene, wash with watercolours
Contaminate device；
Step 4: scene is appended in the body labels in HTML code by appendchild；
Step 5: interactive operation of the coding definition to 3D models in js files；
Step 6: the 3D models of loading are shown in webpage.
Further, in step 5, interactive operation of the coding definition to 3D models is as follows,（1）Model animation plays, pause
And stopping；（2）Model separation resets；（3）Model is pulled, rotates and scaled；（4）Model is disassembled；（5）Model addition word is said
It is bright；（6）Full frame operation.
Further,（1）Playing animation.After clicking on broadcast button, animate that recursive call defines（）Method, pass through
requestAnimationFrame（）Method, circulation render, and play the animation loops of 3D models, when animation plays, Ke Yitong
Cross mouse drag, scaling, upset model；
（2）Stop playing animation.When model animation plays, after clicking on stop button, pass through cancelAnimation（）Method takes
The animation frame that disappears renewal request, make the animation of 3D models will stop immediately, animation stop after, it is impossible to by mouse drag, scaling,
Overturn model.
（3）Reset model.Model animation is clicked on multiple when playing or when model animation stops or when model is blown
Position button, each Skeletal Skinned Animation of 3D models is traveled through by traverse () method, and calls pose（）Method, will
Each Skeletal Skinned Animation returns to the state before animation plays, so that model returns to initial good working condition（Reset shape
State）.After model resets, mouse drag, scaling, turning operation are not supported；
（4）Model separation.Separation button is clicked on, the animation key frame number of note 3D models is count, circulates by for, broadcasts frame by frame
The animation of 3D models is put, and the cycle attribute loop of each frame animation is arranged to false, 3D model animations is only played one
It is secondary, it can thus make 3D models static after last frame finishes, and keep blowing state.Now model supports mouse drags
Drag, scale, turning operation；
（5）Model is disassembled.Using the position of the three.js ray trace mouses provided, detect ray and whether model intersect,
If intersecting, intersecting model part is labeled as " selected ", monitors mouse position in real time, real-time update model " selected "
The position of part in the scene, it is achieved thereby that model is disassembled；
（6）Word is added to 3D models.Together（5）, behind markup model " selected " part, text is bound in the part to " selected "
Word, real-time detection model " selected " part, if the position that there is model " selected " in scene, text importing, otherwise, word is not
Display；
（7）Full frame operation.By button control enter browser it is full frame/exit full frame state, pass through setSize（）Method is automatic
The size of window is adjusted, 3D models size is by the ratio adjust automatically according to setting；
Further, in step 1, according to the 3D models of different-format, corresponding Loader works in three.js plug-in units are used
Tool, 3D model files are imported in customized javaScript code files, are stored in DOM node container.
Further, in step 3, the scene of model is configured in the javaScript code files, including：
Light is set by customized init () method（light）, video camera（camera）, scene（scene）, renderer
（renderer）.
Further, self-defined javaScript codes, pass through appendchild（）Method is by step 1
Container is added in the body labels in html page, and so far, 3D models are successfully loaded in webpage.
Beneficial effects of the present invention are：
（1）Without filling extra plug-in unit and flash, real webpage 3D animations are realized.Independent of flash, browser is relied only on
Built-in WebGL, directly using ready-made 3D models, directly reduce the workload of developer, so as to substantially reduce exploitation into
This.
（2）Can be with loading the 3D models of outside in purpose webpage, and the position of the model, size, light, background are set
Deng.Compared with HTML5 3D models, model is built in outside using 3Dmax and is more conducive to 3D model standardizations and can iterative development.Separately
Outside, the displaying pattern and light, background of model are set in web page code, while personal settings can be carried out, maintained
3D model sustainable uses, it is only necessary to change a small amount of code, you can reach different effects.
（3）The 3D models that can come in loading are through a series of interactive operation of row：Pull, scale, rotate, overturn, animation
Control etc..
（4）Model keeps independence, and web page code separates with model code, weak coupling, easy to maintain and renewal.
Brief description of the drawings
Fig. 1 be the present invention in webpage load 3D models step schematic diagram.
Embodiment
The present invention is further described below in conjunction with accompanying drawing：
Now with the 3D models of dae forms, according to the inventive method, this 3D model can be imported into webpage, and to this mould
Type carries out a series of interactive operations.
（1）JQuery.js and three.js, and the js plug-in units of some auxiliary are quoted in the html pages, initializes field
Scape simultaneously renders（Including addition video camera, light）, after 3D models are added in scene, then scene is added to the html pages
In, 3D models have just been added in webpage.
（2）Scene residing for model is set.User can adjust light and background in scene, model is in one most
Good visual state.When user is set without this, scene will not had using the light and background, the displaying to 3D models of acquiescence
Inevitable influence.
（3）The animation of 3D models is set to play and stop.After model is imported into webpage, user can drag to model
Drag, scale, rotation process, if model carries animation, can automatic cycle play, there is no animation effect if without animation.For
It is easy to the structure of observing and nursing, user can click on stop button stops animation at any time, find optimal viewing angle and observed, no
, can also be without this operation when needing.Clicking on SR and separation button can also make model reach halted state, the former
It is in initial closure state, the latter's model when model stops and blows state.
（4）3D model separations.In order to observe the internal structure of model, when user can click on button, model is gone to divides completely
From state, after model is blown, still support to pull, scale and rotation process.
（5）Into full frame with exiting full screen display.Auxiliary user finds the optimal viewing angle of observing and nursing, it is only necessary to passes through a little
Hit button can into/out full frame state, if this button need not can be neglected in user, by (1) (2) (3) (4) can will
Model is imported in webpage, and interacts operation to the model.
（6）Word is disassembled and added to 3D models.User can arbitrarily choose some part of model to be pulled, by mouse
Any part for being put into model checks explanatory note.
Described above to be not intended to limit the scope of the present invention, all foundation the technology of the present invention are substantially to the above
Any modification, equivalent variations and the modification that embodiment is made, in the range of still falling within technical scheme.
Claims (6)
- A kind of 1. method that 3D models are loaded in webpage, it is characterised in that：Comprise the following steps, Step 1: in HTML code Middle introducing Thee.js and related plug-in unit；Step 2: writing js codes, 3D models are imported in js files using the loader that Three.js is provided；Step 3: 3D models are added in the scene that previous step creates, and the light of scene set, video camera, scene, wash with watercolours Contaminate device；Step 4: scene is appended in the body labels in HTML code by appendchild；Step 5: interactive operation of the coding definition to 3D models in js files；Step 6: the 3D models of loading are shown in webpage.
- A kind of 2. method that 3D models are loaded in webpage according to claim 1, it is characterised in that：In step 5, compile Interactive operation of the code definition to 3D models is as follows,（1）Model animation is played, suspends and stopped；（2）Model separation resets；（3）Mould Type is pulled, rotates and scaled；（4）Model is disassembled；（5）Model adds explanatory note；（6）Full frame operation.
- A kind of 3. method that 3D models are loaded in webpage according to claim 2, it is characterised in that：（1）Playing animation：After clicking on broadcast button, animate that recursive call defines（）Method, pass through requestAnimationFrame（）Method, circulation render, and play the animation loops of 3D models, when animation plays, Ke Yitong Cross mouse drag, scaling, upset model；（2）Stop playing animation：When model animation plays, after clicking on stop button, pass through cancelAnimation（）Method takes The animation frame that disappears renewal request, make the animation of 3D models will stop immediately, animation stop after, it is impossible to by mouse drag, scaling, Overturn model；（3）Reset model：Model animation is clicked on reset and pressed when playing or when model animation stops or when model is blown Button, each Skeletal Skinned Animation of 3D models is traveled through by traverse () method, and calls pose（）Method, will be each Individual Skeletal Skinned Animation returns to the state before animation plays, so that model returns to initial good working condition（Reset state）；Mould After type resets, mouse drag, scaling, turning operation are not supported；（4）Model separation：Separation button is clicked on, the animation key frame number of note 3D models is count, circulates by for, broadcasts frame by frame The animation of 3D models is put, and the cycle attribute loop of each frame animation is arranged to false, 3D model animations is only played one It is secondary, it can thus make 3D models static after last frame finishes, and keep blowing state；Now model supports mouse drags Drag, scale, turning operation；（5）Model is disassembled：Using the position of the three.js ray trace mouses provided, detect ray and whether model intersect, If intersecting, intersecting model part is labeled as " selected ", monitors mouse position in real time, real-time update model " selected " The position of part in the scene, it is achieved thereby that model is disassembled；（6）Word is added to 3D models：Together（5）Model is disassembled, behind markup model " selected " part, the part to " selected " Binding word, real-time detection model " selected " part, if the position that there is model " selected " in scene, text importing, otherwise, Word is not shown；（7）Full frame operation：By button control enter browser it is full frame/exit full frame state, pass through setSize（）Method is automatic The size of window is adjusted, 3D models size is by the ratio adjust automatically according to setting.
- A kind of 4. method that 3D models are loaded in webpage according to claim 1, it is characterised in that：In step 1, root According to the 3D models of different-format, using corresponding Loader instruments in three.js plug-in units, 3D model files are imported self-defined JavaScript code files in, be stored in DOM node container.
- A kind of 5. method that 3D models are loaded in webpage according to claim 1, it is characterised in that：In step 3, The scene of model is configured in the javaScript code files, including：Lamp is set by customized init () method Light（light）, video camera（camera）, scene（scene）, renderer（renderer）.
- A kind of 6. method that 3D models are loaded in webpage according to claim 1, it is characterised in that：It is self-defined JavaScript codes, pass through appendchild（）Container in step 1 is added in html page by method In body labels, so far, 3D models are successfully loaded in webpage.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710918604.8A CN107679188B (en) | 2017-09-30 | 2017-09-30 | Method for loading 3D model in webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710918604.8A CN107679188B (en) | 2017-09-30 | 2017-09-30 | Method for loading 3D model in webpage |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107679188A true CN107679188A (en) | 2018-02-09 |
| CN107679188B CN107679188B (en) | 2021-11-16 |
Family
ID=61139064
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710918604.8A Active CN107679188B (en) | 2017-09-30 | 2017-09-30 | Method for loading 3D model in webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107679188B (en) |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108830941A (en) * | 2018-06-25 | 2018-11-16 | 中国移动通信集团西藏有限公司 | 3D guide method |
| CN108959392A (en) * | 2018-05-31 | 2018-12-07 | 阿里巴巴集团控股有限公司 | The method, device and equipment of rich text is shown on 3D model |
| CN109242976A (en) * | 2018-08-02 | 2019-01-18 | 实野信息科技（上海）有限公司 | A method of based on the automatic rotary display of WebGL virtual reality |
| CN109559384A (en) * | 2018-11-19 | 2019-04-02 | 长沙眸瑞网络科技有限公司 | A kind of page end threedimensional model edit methods based on WebGL |
| CN109635450A (en) * | 2018-12-14 | 2019-04-16 | 苏州梦想人软件科技有限公司 | Threedimensional model detection method and device |
| CN109650246A (en) * | 2018-11-21 | 2019-04-19 | 上海国际港务(集团)股份有限公司张华浜分公司 | Break bulk cargo loading and unloading capacity simulation system and its analogy method |
| CN109993837A (en) * | 2019-04-11 | 2019-07-09 | 山东数字人科技股份有限公司 | A kind of methods of exhibiting and display systems of embryology data |
| CN110248093A (en) * | 2019-06-20 | 2019-09-17 | 清华大学深圳研究生院 | A kind of collecting method, system and terminal device |
| CN111815767A (en) * | 2020-09-02 | 2020-10-23 | 江西科骏实业有限公司 | Web-end interactive model making method, device and equipment |
| CN112700555A (en) * | 2020-12-31 | 2021-04-23 | 珠海派诺科技股份有限公司 | High configurable configuration 3D data visualization implementation method, electronic device and storage medium |
| CN112861055A (en) * | 2021-02-07 | 2021-05-28 | 吉林省科学技术信息研究所 | 3D model loading method |
| CN113516741A (en) * | 2021-07-14 | 2021-10-19 | 山东齐鲁数通科技有限公司 | Animation model importing method and device, terminal equipment and storage medium |
| CN113516741B (en) * | 2021-07-14 | 2024-05-31 | 山东齐鲁数通科技有限公司 | Animation model importing method and device, terminal equipment and storage medium |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR101720635B1 (en) * | 2015-12-29 | 2017-03-28 | 주식회사 콘츠 | Method for web-based producing 3d video contents and server implementing the same |
| CN107219969A (en) * | 2017-05-10 | 2017-09-29 | 腾讯科技（深圳）有限公司 | 3D display methods and device |
-
2017
- 2017-09-30 CN CN201710918604.8A patent/CN107679188B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR101720635B1 (en) * | 2015-12-29 | 2017-03-28 | 주식회사 콘츠 | Method for web-based producing 3d video contents and server implementing the same |
| CN107219969A (en) * | 2017-05-10 | 2017-09-29 | 腾讯科技（深圳）有限公司 | 3D display methods and device |
Non-Patent Citations (2)
| Title |
|---|
| 宋仔: "《Three.js开发基础和3D全景（一）》", 《知乎》 * |
| 王磊 等: "《基于Web3D无插件的三维模型展示的研究》", 《计算机技术与发展》 * |
Cited By (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10789770B1 (en) | 2018-05-31 | 2020-09-29 | Alibaba Group Holding Limited | Displaying rich text on 3D models |
| CN108959392A (en) * | 2018-05-31 | 2018-12-07 | 阿里巴巴集团控股有限公司 | The method, device and equipment of rich text is shown on 3D model |
| US11113874B2 (en) | 2018-05-31 | 2021-09-07 | Advanced New Technologies Co., Ltd. | Displaying rich text on 3D models |
| CN108830941A (en) * | 2018-06-25 | 2018-11-16 | 中国移动通信集团西藏有限公司 | 3D guide method |
| CN109242976A (en) * | 2018-08-02 | 2019-01-18 | 实野信息科技（上海）有限公司 | A method of based on the automatic rotary display of WebGL virtual reality |
| CN109559384A (en) * | 2018-11-19 | 2019-04-02 | 长沙眸瑞网络科技有限公司 | A kind of page end threedimensional model edit methods based on WebGL |
| CN109559384B (en) * | 2018-11-19 | 2022-11-08 | 长沙眸瑞网络科技有限公司 | WebGL-based webpage-side three-dimensional model editing method |
| CN109650246A (en) * | 2018-11-21 | 2019-04-19 | 上海国际港务(集团)股份有限公司张华浜分公司 | Break bulk cargo loading and unloading capacity simulation system and its analogy method |
| CN109650246B (en) * | 2018-11-21 | 2020-04-10 | 上海国际港务(集团)股份有限公司张华浜分公司 | System and method for simulating loading and unloading process of piece goods |
| CN109635450A (en) * | 2018-12-14 | 2019-04-16 | 苏州梦想人软件科技有限公司 | Threedimensional model detection method and device |
| CN109993837A (en) * | 2019-04-11 | 2019-07-09 | 山东数字人科技股份有限公司 | A kind of methods of exhibiting and display systems of embryology data |
| CN110248093B (en) * | 2019-06-20 | 2020-09-01 | 清华大学深圳研究生院 | Data acquisition method, system and terminal equipment |
| CN110248093A (en) * | 2019-06-20 | 2019-09-17 | 清华大学深圳研究生院 | A kind of collecting method, system and terminal device |
| CN111815767A (en) * | 2020-09-02 | 2020-10-23 | 江西科骏实业有限公司 | Web-end interactive model making method, device and equipment |
| CN112700555A (en) * | 2020-12-31 | 2021-04-23 | 珠海派诺科技股份有限公司 | High configurable configuration 3D data visualization implementation method, electronic device and storage medium |
| CN112700555B (en) * | 2020-12-31 | 2023-11-14 | 珠海派诺科技股份有限公司 | High-configurable 3D data visualization realization method, electronic equipment and storage medium |
| CN112861055A (en) * | 2021-02-07 | 2021-05-28 | 吉林省科学技术信息研究所 | 3D model loading method |
| CN113516741A (en) * | 2021-07-14 | 2021-10-19 | 山东齐鲁数通科技有限公司 | Animation model importing method and device, terminal equipment and storage medium |
| CN113516741B (en) * | 2021-07-14 | 2024-05-31 | 山东齐鲁数通科技有限公司 | Animation model importing method and device, terminal equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107679188B (en) | 2021-11-16 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107679188A (en) | A kind of method that 3D models are loaded in webpage | |
| US20190121517A1 (en) | Interactive Menu Elements in a Virtual Three-Dimensional Space | |
| KR101525906B1 (en) | Manipulating graphical objects | |
| TWI386839B (en) | Methodm, apparatus, system, computer program product for modifying a web page | |
| CN107670279A (en) | The development approach and system of 3D web games based on WebGL | |
| CN102663056B (en) | Method and device for displaying picture elements | |
| US20130125066A1 (en) | Adaptive Area Cursor | |
| US10373363B2 (en) | Systems and methods for visually creating and editing scrolling actions | |
| CN109643212A (en) | 3D document editing system | |
| JP2012521041A (en) | Smooth layout animation for continuous and discontinuous properties | |
| KR20120045744A (en) | An apparatus and method for authoring experience-based learning content | |
| EP3218801B1 (en) | Rapid application development method | |
| CN109710353A (en) | Animated element in the page shows method and device | |
| CN117009700A (en) | Virtual reality scene construction method and device, electronic equipment and storage medium | |
| Okada et al. | Component-based approach for prototyping of Tai Chi-based physical therapy game and its performance evaluations | |
| Seidelin | HTML5 games: creating fun with HTML5, CSS3 and WebGL | |
| CN101661629B (en) | Device and method for monitoring role behavior in three-dimensional virtual world | |
| CN105488694B (en) | Virtual 3D display method and system for crop varieties | |
| CN106919260A (en) | Web page operation method and apparatus | |
| Felicia | Getting started with Unity: Learn how to use Unity by creating your very own" Outbreak" survival game while developing your essential skills | |
| Johnston et al. | Employing WebGL to develop interactive stereoscopic 3D content for use in biomedical visualization | |
| Knorr et al. | PyParadigm—A Python Library to Build Screens in a Declarative Way | |
| US20190163730A1 (en) | Systems and methods for a mobile device application having a markup-language document | |
| Kerfs | Beginning Android Tablet Games Programming | |
| Carson et al. | Algorithm explorer: visualizing algorithms in a 3d multimedia environment |
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 | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20210913 Address after: 518000 Golden Apple Innovation Park plant, No. 9, Ganli Second Road, gankeng community, Jihua street, Longgang District, Shenzhen, Guangdong Province Applicant after: SHENZHEN CUBESPACE TECHNOLOGY Co.,Ltd. Address before: 523000 room 203-205, building F, science and Technology Creative Industry Park, new base, Nancheng street, Dongguan City, Guangdong Province Applicant before: DONGGUAN TONGLIFANG INTELLIGENT TECHNOLOGY Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |