CN106652041A - HTML5-based three-dimensional virtual wiring method - Google Patents
HTML5-based three-dimensional virtual wiring method Download PDFInfo
- Publication number
- CN106652041A CN106652041A CN201611191905.7A CN201611191905A CN106652041A CN 106652041 A CN106652041 A CN 106652041A CN 201611191905 A CN201611191905 A CN 201611191905A CN 106652041 A CN106652041 A CN 106652041A
- Authority
- CN
- China
- Prior art keywords
- dimensional
- wiring
- html5
- model
- terminals
- 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
Links
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/006—Mixed reality
Abstract
The invention discloses an HTML5-based three-dimensional virtual wiring method. Firstly, a wiring three-dimensional model is built through three-dimensional modeling software, and a three-dimensional file of a corresponding format is exported; an HTML5 three.js engine is used for importing the three-dimensional wiring to a three-dimensional scene; and finally, the HTML5 three.js engine is used for generating a wiring end model, the model is placed at a proper position, and an interactive action with the three-dimensional wiring is defined. The latest computer HTML5 technology is used for realizing three-dimensional virtual wiring, a user does not need to mount any plug-in and can operate on a webpage. The virtual experiment content can be powerfully expanded to be closer to the real experiment process, reality, interest and immersion of the virtual experiment can be enhanced, and the virtual reality technology which can operate without the plug-in has a wide application prospect.
Description
Technical field
The invention belongs to computer virtual reality technology field, and in particular to a kind of three-dimensional wiring based on HTML5
Method.
Background technology
Experimental courses are requisite parts outside industry science theory course learning.Traditional experimental technique needs large area
Lab space, substantial amounts of laboratory apparatus be only limitted to the fixed open hour simultaneously.Therefore as the strong benefit of traditional experiment
Fill, the focus that online experiment is always studied.Online experiment can whenever and wherever possible provide experimental service, without the need for actual laboratory
Space, while saving original equipment cost and later maintenance expense.Virtual experimental is a critically important branch of online experiment, is carried
The virtual experimental that being provided with feeling of immersion and presence can interact can improve the interest of experimenter's experiment, and then promote experimental courses
Study.The virtual experimental in terms of power electronics is had at present, also there is the type that a small amount of three-dimensional can be interacted.But experimentation lacks
It is few truly to test basic step --- experimental wiring.Especially three-dimensional wiring, has no at present the research of correlation.Therefore,
Research three-dimensional wiring is very necessary with the function of strengthening virtual experimental.
The content of the invention
It is an object of the invention to provide a kind of three-dimensional mode of connection based on HTML5, to strengthen showing for virtual experimental
True feeling and feeling of immersion, strengthen the study of industry science subject experimental courses.
The technical solution adopted in the present invention is：1. a kind of three-dimensional mode of connection based on HTML5, its feature exists
In comprising the following steps：
Step 1：Wiring threedimensional model is built by 3 d modeling software, and derives the three dimensional file of corresponding format；
Step 2：Three dimensional wiring is imported in three-dimensional scenic using the three.js engines of HTML5；
Step 3：Terminals model is generated using the three.js engines of HTML5, suitable position is placed it in, and is defined
Its interactive action with three dimensional wiring.
Preferably, derive in step 1 that the three dimensional file for using can be imported by the three.js engines of HTML5.
Preferably, in step 2, when the three.js engines of HTML5 import model, being selected according to the form of three dimensional wiring
Select corresponding importing function.
Preferably, in step 3, terminals model is solid geometry models, its size and wiring size phase
Match somebody with somebody, quantity is the twice for importing connection mode.
Preferably, in step 3, terminals modal position is the three dimensional wiring two ends imported in step 2, forms three-dimensional and connect
Line connects two binding post structures.
Preferably, terminals are defined as follows with the interactive action of three dimensional wiring in step 3：
Terminals model is clicked on, if no selected before terminals, it is changed into being highlighted, if now paired
Terminals model be not chosen, then there is text prompt " correct terminals please be select to carry out wiring ", else if therewith
The terminals model of pairing is selected, and corresponding wiring does not connect, and just imports connection mode, forms three-dimensional and connects
Line, and remove the word of prompting connection；If selected before the terminals model clicked on, it reverts to black, this
Shi Ruguo paired terminals model is not chosen, then remove tip of the text, and if now wiring has connected
Connect, then cancel the importing of wiring.
The invention has the beneficial effects as follows：The present invention realizes three-dimensional wiring using newest computer HTML5 technologies,
User need not install any plug-in unit, can be operated on webpage.The present invention can effectively expand the content of virtual experimental,
The process of true experiment is closer to, so as to the authenticity for strengthening virtual experimental, interesting and feeling of immersion.It is this to be without plug-in unit
The virtual reality technology that can be run has wide practical use.
Description of the drawings
Fig. 1 is the schematic diagram of the three-dimensional mode of connection in the embodiment of the present invention based on HTML5；
The threedimensional model of wiring in Fig. 23 d modeling software 3DS Max；
Fig. 3 is the terminals model in HTML5；
Fig. 4 is the logic diagram of interactive action；
Fig. 5 is that the single terminals of three-dimensional wiring of the embodiment of the present invention click on prompting figure；
Fig. 6 is the three-dimensional wiring single patch connection figure of the embodiment of the present invention；
Fig. 7 is the three-dimensional wiring wiring pairing miscue figure of the embodiment of the present invention；
Fig. 8 is the three-dimensional wiring correct result schematic diagram of the embodiment of the present invention.
Specific embodiment
Understand for the ease of those of ordinary skill in the art and implement the present invention, below in conjunction with the accompanying drawings and embodiment is to this
It is bright to be described in further detail, it will be appreciated that enforcement example described herein is merely to illustrate and explains the present invention, not
For limiting the present invention.
The three-dimensional mode of connection based on HTML5 of the present invention carries out the virtual of three-dimensional using newest HTML5 technologies
Wiring, realizes the three dimensional stress of wiring, while can run in page end, user need not install any plug-in unit.The method has
Power has expanded the content of virtual experimental, the process of true experiment is closer to, so as to strengthen authenticity, the entertaining of virtual experimental
Property and feeling of immersion.
The present embodiment be by taking three wiring as an example, using newest HTML5 technologies complete virtual wiring click discoloration,
The interactive action such as wiring and text prompt, realizes three-dimensional connection function.
Three-dimensional wiring system in the present embodiment as shown in figure 1, using three-tier architecture, respectively threedimensional model layer,
Alternation of bed and virtual wiring layers.Threedimensional model layer using 3DS Max 3 d modeling softwares and HTML5 technologies build respectively wiring and
The threedimensional model of terminals, supply alternation of bed is used.Alternation of bed butted line and terminals define three kinds of wiring actions, respectively point
Discoloration, wiring and text prompt are hit, and according to three kinds of interactive function harmonies of logical relation.Virtual wiring layers are according to alternation of bed
The interactive action of definition realizes final three-dimensional connection function.
A kind of three-dimensional mode of connection based on HTML5 that the present invention is provided, comprises the following steps：
Step 1：Wiring threedimensional model is built by 3 d modeling software, and derives the file of corresponding format；It implements bag
Include following sub-step：
Step 1.1：The three-dimensional modeling of wiring is carried out from suitable 3 d modeling software, the present embodiment carrys out structure using 3DS Max
Build；
Step 1.2：A two-dimentional lines are drawn in software interface, selects volumizing, change its shape and length, build wiring
Threedimensional model, as shown in Figure 2；
Step 1.3：The file of the OBJ forms of wiring threedimensional model is derived, while acquiescence is derived its MTL file, for step
Rapid 2 use.
Step 2：Three dimensional wiring is imported in three-dimensional scenic using the three.js engines of HTML5；The present embodiment with
Illustrate as a example by OBJ form threedimensional model files, it is implemented including following sub-step：
Step 2.1：Three.js engine techniques website is accessed, the example for being loaded into that OBJ formatted files are imported under function loader is searched
Son；
Step 2.2：Corresponding source program is changed according to actual conditions, the importing of three dimensional wiring model is realized；
Step 3：Terminals model is generated using the three.js engines of HTML5, suitable position is placed it in, and is defined
Its interactive action, Fig. 3 is the logic chart of interactive operation.It is implemented including following sub-step：
Step 3.1：By building solid geometry instantiating terminals model, the size phase of its size and connection mode
Matching, quantity is the twice of connection mode quantity, and position forms the situation for just connecting wiring at the two ends of connection mode, its
Model is as shown in Figure 4；
Step 3.2：The interactive action of terminals model is defined, is realized that terminals are single and is clicked on discoloration, then click on color reduction
Function, whether clicked to distinguish terminals, its model is as shown in Figure 5；
Step 3.3：The interactive action of terminals model is defined, realizes that correct loading connection mode model is clicked in terminals pairing,
Click on again and cancel the function being loaded into, its model is as shown in Figure 6；
Step 3.4：The interactive action of terminals model is defined, realizes that terminals pairing clicks on mistake and indicative sentence occurs, then
The function of cancelling prompting is clicked on, its model is as shown in Figure 7.
There is difference in the virtual experimental for lacking connection function, experiment link is imperfect, three-dimensional compared with true experiment
Experiment also lacks associated connections design.Therefore, the present invention realizes three-dimensional connection function by HTML5, strengthens virtual experimental
Presence, interesting and feeling of immersion.
If terminals are chosen and without wiring, occur that text prompt " please select correct terminals to connect
Line ", as shown in Fig. 5,7.If clicked on correctly, wiring occurs, connection is correct, as shown in Fig. 6,8.The operation knot of the present invention
Fruit shows that it can realize the functions such as the click discoloration in interactive function, wiring and text prompt, so as to demonstrate base of the present invention
In the practical feasibility of the three-dimensional mode of connection of HTML5.
It should be appreciated that the part that this specification is not elaborated belongs to prior art.
It should be appreciated that the above-mentioned description for preferred embodiment is more detailed, therefore can not be considered to this
The restriction of invention patent protection scope, one of ordinary skill in the art is weighing under the enlightenment of the present invention without departing from the present invention
Under the protected ambit of profit requirement, replacement can also be made or deformed, be each fallen within protection scope of the present invention, this
It is bright scope is claimed to be defined by claims.
Claims (6)
1. a kind of three-dimensional mode of connection based on HTML5, it is characterised in that comprise the following steps：
Step 1：Wiring threedimensional model is built by 3 d modeling software, and derives the three dimensional file of corresponding format；
Step 2：Three dimensional wiring is imported in three-dimensional scenic using the three.js engines of HTML5；
Step 3：Terminals model is generated using the three.js engines of HTML5, suitable position is placed it in, and is defined
Its interactive action with three dimensional wiring.
2. the three-dimensional mode of connection based on HTML5 according to claim 1, it is characterised in that：Energy is derived in step 1
The three dimensional file for using is imported by the three.js engines of HTML5.
3. the three-dimensional mode of connection based on HTML5 according to claim 1, it is characterised in that：In step 2, HTML5
Three.js engines when importing model, corresponding importing function is selected according to the form of three dimensional wiring.
4. the three-dimensional mode of connection based on HTML5 according to claim 1, it is characterised in that：In step 3, wiring
End model is solid geometry models, and its size matches with wiring size, and quantity is the twice for importing connection mode.
5. the three-dimensional mode of connection based on HTML5 according to claim 1, it is characterised in that：In step 3, wiring
End modal position is the three dimensional wiring two ends imported in step 2, forms three dimensional wiring and connects two binding post structures.
6. the three-dimensional mode of connection based on HTML5 according to claim 1-5 any one, it is characterised in that step
Terminals are defined as follows with the interactive action of three dimensional wiring in rapid 3：
Terminals model is clicked on, if no selected before terminals, it is changed into being highlighted, if now paired
Terminals model be not chosen, then there is text prompt " correct terminals please be select to carry out wiring ", else if therewith
The terminals model of pairing is selected, and corresponding wiring does not connect, and just imports connection mode, forms three-dimensional and connects
Line, and remove the word of prompting connection；If selected before the terminals model clicked on, it reverts to black, this
Shi Ruguo paired terminals model is not chosen, then remove tip of the text, and if now wiring has connected
Connect, then cancel the importing of wiring.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611191905.7A CN106652041A (en) | 2016-12-21 | 2016-12-21 | HTML5-based three-dimensional virtual wiring method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611191905.7A CN106652041A (en) | 2016-12-21 | 2016-12-21 | HTML5-based three-dimensional virtual wiring method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106652041A true CN106652041A (en) | 2017-05-10 |
Family
ID=58834692
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611191905.7A Pending CN106652041A (en) | 2016-12-21 | 2016-12-21 | HTML5-based three-dimensional virtual wiring method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106652041A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109389683A (en) * | 2018-08-31 | 2019-02-26 | 深圳市彬讯科技有限公司 | Flash wall generation method and device |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090137047A1 (en) * | 2007-03-02 | 2009-05-28 | John Frederick Regan | Automated Diagnostic Kiosk for Diagnosing Diseases |
| US20100060648A1 (en) * | 2008-09-10 | 2010-03-11 | International Business Machines Corporation | Method for Determining Valued Excursion Corridors in Virtual Worlds |
| CN103176993A (en) * | 2011-12-21 | 2013-06-26 | 北京神州绿盟信息安全科技股份有限公司 | Content presentation device and content presentation method |
| CN103984589A (en) * | 2014-04-25 | 2014-08-13 | 北京大学 | Virtual machine-based lab practice environment establishment method for realizing computer experiment teaching |
-
2016
- 2016-12-21 CN CN201611191905.7A patent/CN106652041A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090137047A1 (en) * | 2007-03-02 | 2009-05-28 | John Frederick Regan | Automated Diagnostic Kiosk for Diagnosing Diseases |
| US20100060648A1 (en) * | 2008-09-10 | 2010-03-11 | International Business Machines Corporation | Method for Determining Valued Excursion Corridors in Virtual Worlds |
| CN103176993A (en) * | 2011-12-21 | 2013-06-26 | 北京神州绿盟信息安全科技股份有限公司 | Content presentation device and content presentation method |
| CN103984589A (en) * | 2014-04-25 | 2014-08-13 | 北京大学 | Virtual machine-based lab practice environment establishment method for realizing computer experiment teaching |
Non-Patent Citations (3)
| Title |
|---|
| ZHONGCHENG LEI ET AL.: "DC Motor Control in a 3D Real-Time Virtual Laboratory Environment", 《PROCEEDINGS OF 2015 12TH INTERNATIONAL CONFERENCE ON REMOTE ENGINEERING AND VIRTUAL INSTRUMENTATION (REV)》 * |
| 周洪，等: "基于NCSLab 3D 的虚拟远程实验系统设计与实现", 《计算机工程》 * |
| 王世超: "基于HTML5的水轮机虚拟装配系统研究", 《煤矿机械》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109389683A (en) * | 2018-08-31 | 2019-02-26 | 深圳市彬讯科技有限公司 | Flash wall generation method and device |
| CN109389683B (en) * | 2018-08-31 | 2022-12-30 | 深圳市彬讯科技有限公司 | flash background wall generation method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103513992B (en) | A kind of general Edutainment robot application software development platform | |
| Zhou et al. | Virtual reality: A state-of-the-art survey | |
| CN107766506A (en) | A kind of more wheel dialog model construction methods based on stratification notice mechanism | |
| CN110489755A (en) | Document creation method and device | |
| CN103744419B (en) | Combined target missile is imitative flies test macro | |
| CN104331530B (en) | A kind of electronic warfare Scene Simulation Platform and method of work based on XML descriptions | |
| CN107293182A (en) | A kind of vehicle teaching method, system and terminal device based on VR | |
| CN110392901A (en) | The providing method of e-book service and computer program for this method | |
| Bouquet et al. | Transformation of SysML structure diagrams to VHDL-AMS | |
| CN103065000A (en) | MDE (model driven engineering)-based method for analyzing and verifying SysML state machine diagram | |
| CN106557351A (en) | The data processing method and device of built-in application program | |
| CN107703775A (en) | Hard and soft liquid coupling Complex Spacecraft analogue system and method | |
| CN106843887A (en) | A kind of implementation method of embedded customized development platform automatic creation system | |
| CN104166682B (en) | The semantic information abstracting method and system of a kind of natural language based on combinatorial theory | |
| CN106652041A (en) | HTML5-based three-dimensional virtual wiring method | |
| CN107643820A (en) | The passive humanoid robots of VR and its implementation method | |
| CN106095241A (en) | The window display method of a kind of Web application, device and the equipment of calculating | |
| US20100145490A1 (en) | Three-dimensional (3d) manufacturing process planning | |
| CN117272648A (en) | Automatic driving simulation scene generation method and device and electronic equipment | |
| CN116665219A (en) | Data processing method and device | |
| KR101284642B1 (en) | Apparatus for generating emotion of robot | |
| JP2022153600A (en) | Voice synthesis method and device, electronic apparatus and storage medium | |
| CN104281448B (en) | A kind of combined type vision emulation system for supporting that function is customized and emulation mode | |
| Peinecke et al. | VR and AR environments for virtual cockpit enhancements | |
| CN103164228A (en) | Method and device for generating field-programmable gate array (FPGA) procedure |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170510 |
|
| RJ01 | Rejection of invention patent application after publication |