CN106909263A - The interactive display method and system of 3-D view - Google Patents
The interactive display method and system of 3-D view Download PDFInfo
- Publication number
- CN106909263A CN106909263A CN201510974104.7A CN201510974104A CN106909263A CN 106909263 A CN106909263 A CN 106909263A CN 201510974104 A CN201510974104 A CN 201510974104A CN 106909263 A CN106909263 A CN 106909263A
- Authority
- CN
- China
- Prior art keywords
- view
- pictures
- web browser
- interactive
- interactive display
- 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.)
- Withdrawn
Links
Classifications
-
- 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/04815—Interaction with a metaphor-based environment or interaction object displayed as three-dimensional, e.g. changing the user viewpoint with respect to the environment or object
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a kind of interactive display method and system of 3-D view, the interactive display method is comprised the following steps：Obtain plurality of pictures of the object positioned at different angles；The plurality of pictures is sutured, to form the 3-D view of the object；The 3-D view is uploaded to a Web browser；Show the 3-D view on the webpage of the Web browser.Compared with prior art, the present invention is sutured by by the plurality of pictures of acquisition, to form the 3-D view of object, and by it in unified distribution platform, it is shown on the webpage of Web browser so that user can be realized the viewing of 3-D view and shared using various terminals by accessing the webpage of Web browser.Meanwhile, the 3-D view in the present invention can also make corresponding response according to the peripheral operation of user so that user can check 3-D view from arbitrarily angled, improve the interactive experience between user and 3-D view.
Description
Technical field
It is more particularly to a kind of based on HTML5 (warps the present invention relates to the interactive display field of 3-D view
Cross the 5th application HTML of material alteration) 3-D view interactive display method and be
System.
Background technology
Traditional three-dimensional digital display technique typically relies on powerful CPU, the figure of GPU and RAM
Work station is only appeared in high-end show surroundingses and industry.When the computing energy of various individual terminal devices
Power constantly strengthens, and people also constantly increase for checking the demand of three-dimensional content whenever and wherever possible, are that this is continuous
Purchase powerful hardware device.Even if so, still not occurring a to make with cross-platform in the market
Three-dimensional display instrument, not to mention possess comprehensive user-interaction experience.There is such case
Main cause it is extremely complex, but nothing more than there is following several factors：
(1) various terminal equipment, such as smart mobile phone or intelligent television etc., for the wash with watercolours of three-dimensional content
Dye ability does not form standard, therefore, the content that can be run in certain equipment might not set at other
It is standby above to have same effect；
(2) form of 3-D graphic does not form unification, and currently a popular 3-D graphic form is numerous and diverse, main
That flows has obj, maya, max, fbx, cat, stl, igs, VRML etc., also has in different platform
Popular Unity3d, rhino, formZ etc.；
(3) each type operating system is different, due to the disunity of algorithm design, such as Windows, IOS,
The systems such as Android are entirely different for the arithmetic speed and effect of 3 dimensional format figure.
The content of the invention
The technical problem to be solved in the present invention be in order to overcome in the prior art various terminal equipment for three
The rendering capability for tieing up content does not form the calculation of standard, the form disunity of 3-D graphic and each type operating system
Method disunity cause 3-D graphic can not cross-platform displaying defect, there is provided a kind of energy based on HTML5
The interactive display method and system of the 3-D view of enough cross-platform displayings.
The present invention is to solve above-mentioned technical problem by following technical proposals：
A kind of interactive display method of 3-D view, its feature is to comprise the following steps：
S1, obtain an object be located at different angles plurality of pictures；
S2, the plurality of pictures is sutured, to form the 3-D view of the object；
S3, the 3-D view is uploaded to a Web browser (web browser)；
S4, show the 3-D view on the webpage of the Web browser.
In this programme, sutured by by the plurality of pictures of acquisition, to form the 3-D view of object,
And it is shown on the webpage of unified distribution platform, i.e. Web browser so that Yong Huneng
Enough realize the viewing of 3-D view and share by accessing the webpage of Web browser using various terminals,
For example user can utilize PC (PC), handheld device or the PAD for supporting Web browser
The terminal such as (panel computer), mobile phone realizes the access to webpage.
In step S1In, can be carrying out obtaining picture by way of multi-angle is taken pictures to object, can be with
Picture is obtained by way of uploading pictures sequence.
In step S2In, the plurality of pictures is sutured using 2D pictures suturing skill, wherein,
The plurality of pictures of acquisition can be uploaded to high in the clouds, and the plurality of pictures is sutured based on high in the clouds,
Avoid the problem that local loading data cause arithmetic speed to slow down so that user can rapidly experience three-dimensional
Image, while avoiding with plug-in unit or proprietary operation platform, realizes cross-platform experience, and nothing
Any software need to be installed.
In this programme, before 3-D view is uploaded into Web browser, it can be optimized
Treatment, for example, can adjust color or background of the 3-D view etc..
Object in this programme can be any tools such as teacup, Bao Bao, clothes, mobile phone, automobile, furniture
There is the object of three-dimensional shape.
It is preferred that step S4Middle use HTML5 and a kind of Javascript (computer language) technology
Show the 3-D view.
It is preferred that step S4It is further comprising the steps of afterwards：
S5, an offset direction and a deviation angle are determined according to peripheral operation；
S6, control the 3-D view to offset the deviation angle along the offset direction.
In this programme, peripheral operation refer to user the 3-D view is made for example to the left slide, to
Right slip, upward sliding, slide downward or to other directions slide etc., said external operation can lead to
Cross the realization such as mouse or finger.Peripheral operation according to user determines offset direction and deviation angle, and
Control 3-D view offsets the deviation angle along the offset direction so that user can be from arbitrarily angled
3-D view is checked, the interactive experience between user and 3-D view is improved.
It is preferred that step S1Comprise the following steps：Threedimensional model to object is rendered, to be formed
State plurality of pictures of the object positioned at different angles.In this programme, can be using 3 d rendering engine to object
Threedimensional model rendered.Wherein, 3 d rendering engine is prior art, is repeated no more.
It is preferred that the interactive display method is further comprising the steps of：Added on the 3-D view with
At least one in lower information：Word, voice, link.
In this programme, user can add the information such as word, voice and/or link on 3-D view.Its
In, the user for adding information can be the user for uploading object three-dimensional image, and the information of addition can be characterized
The attribute of the object, for example, shoot the time of the object, described dimension of object size etc..Addition letter
The user of breath can also be the user of viewing object three-dimensional image, and the information of addition can be user to object
Comment, for example seek advice from the price of the object, to comment of performance of the object etc..
In this programme, the information added on 3-D view can be moved with the movement of 3-D view.
The present invention also provides a kind of interactive exhibition system of 3-D view, and its feature is, including：
One acquisition module, the plurality of pictures of different angles is located at for obtaining an object；
One image stitching module, for suturing the plurality of pictures, to form the 3-D view of the object；
One uploading module, for the 3-D view to be uploaded into a Web browser；
And a display module, for showing the 3-D view on the webpage of the Web browser.
It is preferred that the display module is used for using HTML5 and Javascript technologies displaying described three
Dimension image.
It is preferred that the display module is additionally operable to determine an offset direction and a deviation angle according to peripheral operation
Degree, and control the 3-D view to offset the deviation angle along the offset direction.
It is preferred that the acquisition module is additionally operable to render the threedimensional model of object, it is described to be formed
Object is located at the plurality of pictures of different angles.
It is preferred that the interactive exhibition system also includes an information add module, in the graphics
As at least one in the upper following information of addition：Word, voice, link.
On the basis of common sense in the field is met, above-mentioned each optimum condition can be combined, and obtain final product this hair
Bright each preferred embodiments.
Positive effect of the invention is：Compared with prior art, the present invention is by more by what is obtained
Pictures are sutured, to form the 3-D view of object, and by it in unified distribution platform, i.e.,
It is shown on the webpage of Web browser so that user can be using various terminals by accessing Web
The webpage of browser is realized the viewing of 3-D view and is shared.Meanwhile, the 3-D view in the present invention may be used also
Corresponding movement is made with according to the peripheral operation of user so that user can check three-dimensional from arbitrarily angled
Image, improves the interactive experience between user and 3-D view.
Brief description of the drawings
Fig. 1 is the flow chart of the interactive display method of the 3-D view of the embodiment of the present invention.
Fig. 2 is the structured flowchart of the interactive exhibition system of the 3-D view of the embodiment of the present invention.
Specific embodiment
The present invention is further illustrated below by the mode of embodiment, but is not therefore limited the present invention to
Among described scope of embodiments.
The present embodiment provides a kind of interactive display method of 3-D view, as shown in figure 1, including following step
Suddenly：
Step 101, obtain by way of taking pictures 10 pictures of the automobile positioned at different angles；
Step 102,10 pictures are sutured using 2D pictures suturing skill, to form the three of automobile
Dimension image；
Step 103, the 3-D view is uploaded to Web browser；
Step 104, show the 3-D view on the webpage of the Web browser；
Step 105, offset direction and deviation angle are determined according to peripheral operation；
Step 106, the control 3-D view offset the deviation angle along the offset direction.
Before 3-D view is uploaded into Web browser, treatment can be optimized to it, for example
The color or background of the 3-D view can be adjusted.
In step 104, the 3-D view of automobile is shown using HTML5 and Javascript technologies.
In the present embodiment, user is using the net for showing automobile 3-D view in mobile phone access Web browser
Page, and check the 3-D view of automobile by making gesture operation on mobile phone screen.For example work as user
When sliding finger to the left, the 3-D view of automobile can be moved to the left with the slip of finger.
The interactive display method of the 3-D view in the present embodiment also includes：Added on the 3-D view
At least one in following information：Word, voice, link.The user for for example uploading 3-D view can be with
Configuration and price of the time, automobile that shoot automobile etc. were added on 3-D view before step 103
Information.The user for watching automobile 3-D view by the webpage of Web browser can be to showing on webpage
3-D view on add the information such as comment to automobile.Wherein, the information meeting added on 3-D view
Moved with the movement of 3-D view.
In addition, the 3-D view that user will can also be showed on Web browser webpage is shared to other
Webpage, so that other users watch.
In the present embodiment, the 3-D view of automobile is uploaded to Web browser, and user can be by visiting
Ask that the webpage of Web browser watches the 3-D view of automobile, 3-D view can also be made and slide to the left
Operation that is dynamic, sliding to the right or slided to other directions, the 3-D view of automobile can be with the behaviour of user
Make and move, facilitate user to watch automobile in all directions.In addition, based on high in the clouds to automobile in the present embodiment
Picture sutured, it is to avoid the problem that local loading data cause the arithmetic speed to slow down so that user
3-D view can be rapidly experienced, while avoiding with plug-in unit or proprietary operation platform, is realized
Cross-platform experience, and any software need not be installed.
The present embodiment also provides a kind of interactive exhibition system 20 of 3-D view, as shown in Fig. 2 including obtaining
Modulus block 21, image stitching module 22, information add module 23, uploading module 24 and display module
25。
Acquisition module 21 is used to obtain the plurality of pictures that an object is located at different angles.Wherein, mould is obtained
Block obtains the mode of picture, and the threedimensional model to object is rendered, and difference is located to form the object
The plurality of pictures of angle.
Image stitching module 22 is used to suture the plurality of pictures, to form the 3-D view of the object.
Information add module 23 is used to add at least one in following information on the 3-D view：
Word, voice, link.
Uploading module 24 is used to for the 3-D view to be uploaded to a Web browser.
Display module 25 is used to use HTML5 and Javascript on the webpage of the Web browser
Technology shows the 3-D view, and determines an offset direction and a deviation angle according to peripheral operation, with
And control the 3-D view to offset the deviation angle along the offset direction.
In the present invention, the mode for obtaining picture is not limited to taking pictures in the present embodiment, can also be by uploading
Sequence of pictures, the threedimensional model to object carry out the mode such as rendering obtaining the object positioned at different angles
Plurality of pictures.10 that the quantity of picture is also not necessarily limited in the present embodiment are obtained, specifically can basis
Actual conditions determine the quantity of picture, will all pictures suture after the completion of obtain the 3-D view of object
It is defined.
Although the foregoing describing specific embodiment of the invention, those skilled in the art should manage
Solution, these are merely illustrative of, and protection scope of the present invention is defined by the appended claims.This
The technical staff in field, can be to these embodiment party on the premise of without departing substantially from principle of the invention and essence
Formula makes various changes or modifications, but these changes and modification each fall within protection scope of the present invention.
Claims (10)
1. a kind of interactive display method of 3-D view, it is characterised in that comprise the following steps：
S1, obtain an object be located at different angles plurality of pictures；
S2, the plurality of pictures is sutured, to form the 3-D view of the object；
S3, the 3-D view is uploaded to a Web browser；
S4, show the 3-D view on the webpage of the Web browser.
2. interactive display method as claimed in claim 1, it is characterised in that step S4Middle use
HTML5 and Javascript technologies show the 3-D view.
3. interactive display method as claimed in claim 1 or 2, it is characterised in that step S4Afterwards
It is further comprising the steps of：
S5, an offset direction and a deviation angle are determined according to peripheral operation；
S6, control the 3-D view to offset the deviation angle along the offset direction.
4. interactive display method as claimed in claim 1, it is characterised in that step S1Including following
Step：Threedimensional model to object is rendered, to form multiple figures of the object positioned at different angles
Piece.
5. interactive display method as claimed in claim 1, it is characterised in that the interactive display side
Method is further comprising the steps of：At least one in following information is added on the 3-D view：Word,
Voice, link.
6. a kind of interactive exhibition system of 3-D view, it is characterised in that including：
One acquisition module, the plurality of pictures of different angles is located at for obtaining an object；
One image stitching module, for suturing the plurality of pictures, to form the 3-D view of the object；
One uploading module, for the 3-D view to be uploaded into a Web browser；
And a display module, for showing the 3-D view on the webpage of the Web browser.
7. interactive exhibition system as claimed in claim 6, it is characterised in that the display module is used
In using HTML5 the and Javascript technologies displaying 3-D view.
8. interactive exhibition system as claimed in claims 6 or 7, it is characterised in that the displaying mould
Block is additionally operable to determine an offset direction and a deviation angle according to peripheral operation, and controls the 3-D view
The deviation angle is offset along the offset direction.
9. interactive exhibition system as claimed in claim 6, it is characterised in that the acquisition module is used
Rendered in the threedimensional model to object, to form plurality of pictures of the object positioned at different angles.
10. interactive exhibition system as claimed in claim 6, it is characterised in that the interactive display system
System also includes an information add module, for adding at least in following information on the 3-D view
Kind：Word, voice, link.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510974104.7A CN106909263A (en) | 2015-12-22 | 2015-12-22 | The interactive display method and system of 3-D view |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510974104.7A CN106909263A (en) | 2015-12-22 | 2015-12-22 | The interactive display method and system of 3-D view |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106909263A true CN106909263A (en) | 2017-06-30 |
Family
ID=59201192
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510974104.7A Withdrawn CN106909263A (en) | 2015-12-22 | 2015-12-22 | The interactive display method and system of 3-D view |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106909263A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107608608A (en) * | 2017-09-25 | 2018-01-19 | 浙江科澜信息技术有限公司 | A kind of information interacting method, the apparatus and system of three-dimensional graphics renderer engine |
| CN108833796A (en) * | 2018-09-21 | 2018-11-16 | 维沃移动通信有限公司 | A kind of image capturing method and terminal |
| CN109525771A (en) * | 2017-09-20 | 2019-03-26 | 阿马特路斯株式会社 | Imaging data release device, Imaging data release system, Imaging data release method |
| CN113559498A (en) * | 2021-07-02 | 2021-10-29 | 网易（杭州）网络有限公司 | Three-dimensional model display method and device, storage medium and electronic equipment |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102063475A (en) * | 2010-12-22 | 2011-05-18 | 张丛喆 | Webpage user terminal presenting method of three-dimensional model |
| CN103077239A (en) * | 2013-01-10 | 2013-05-01 | 上海电力学院 | IFrame embedded Web3D (Web three-dimensional) system based on cloud rendering |
| CN104484327A (en) * | 2014-10-09 | 2015-04-01 | 上海杰图天下网络科技有限公司 | Project environment display method |
-
2015
- 2015-12-22 CN CN201510974104.7A patent/CN106909263A/en not_active Withdrawn
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102063475A (en) * | 2010-12-22 | 2011-05-18 | 张丛喆 | Webpage user terminal presenting method of three-dimensional model |
| CN103077239A (en) * | 2013-01-10 | 2013-05-01 | 上海电力学院 | IFrame embedded Web3D (Web three-dimensional) system based on cloud rendering |
| CN104484327A (en) * | 2014-10-09 | 2015-04-01 | 上海杰图天下网络科技有限公司 | Project environment display method |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109525771A (en) * | 2017-09-20 | 2019-03-26 | 阿马特路斯株式会社 | Imaging data release device, Imaging data release system, Imaging data release method |
| CN107608608A (en) * | 2017-09-25 | 2018-01-19 | 浙江科澜信息技术有限公司 | A kind of information interacting method, the apparatus and system of three-dimensional graphics renderer engine |
| CN108833796A (en) * | 2018-09-21 | 2018-11-16 | 维沃移动通信有限公司 | A kind of image capturing method and terminal |
| CN113559498A (en) * | 2021-07-02 | 2021-10-29 | 网易（杭州）网络有限公司 | Three-dimensional model display method and device, storage medium and electronic equipment |
| CN113559498B (en) * | 2021-07-02 | 2024-09-20 | 网易（杭州）网络有限公司 | Three-dimensional model display method and device, storage medium and electronic equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10016679B2 (en) | Multiple frame distributed rendering of interactive content | |
| EP3201879B1 (en) | Optimizing the legibility of displayed text | |
| US9240070B2 (en) | Methods and systems for viewing dynamic high-resolution 3D imagery over a network | |
| US9691172B2 (en) | Furry avatar animation | |
| JP7112516B2 (en) | Image display method and device, storage medium, electronic device, and computer program | |
| CN106231205B (en) | Augmented reality mobile terminal | |
| CN108288251A (en) | Image super-resolution method, device and computer readable storage medium | |
| CN107369205B (en) | Mobile terminal city two-dimensional and three-dimensional linkage display method | |
| CN108227916A (en) | For determining the method and apparatus of the point of interest in immersion content | |
| CN103916621A (en) | Method and device for video communication | |
| CN108133454B (en) | Space geometric model image switching method, device and system and interaction equipment | |
| CN106909263A (en) | The interactive display method and system of 3-D view | |
| KR20180107271A (en) | Method and apparatus for generating omni media texture mapping metadata | |
| CN106383655A (en) | Interaction control method for controlling visual angle conversion in panorama playing process, and device for realizing interaction control method | |
| CN106548504A (en) | Web animation generation method and device | |
| CN107861711B (en) | Page adaptation method and device | |
| US10623713B2 (en) | 3D user interface—non-native stereoscopic image conversion | |
| CN106204418A (en) | Image warping method based on matrix inversion operation in a kind of virtual reality mobile terminal | |
| CN108027715B (en) | The modification of graph command token | |
| CN116468839A (en) | Model rendering method and device, storage medium and electronic device | |
| CN103870971B (en) | The method and its system of a kind of three-dimensional website of structure based on mobile platform | |
| CN107945243A (en) | image moving method and device | |
| CN106331834B (en) | Multimedia data processing method and equipment thereof | |
| Girašek et al. | Visualization of temperature fields distribution on power module within web interface | |
| JP2018200505A (en) | Interactive display method of three-dimensional image and system |
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 | ||
| WW01 | Invention patent application withdrawn after publication | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20170630 |