CN106909263A - 三维图像的交互展示方法及系统 - Google Patents
三维图像的交互展示方法及系统 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 OR CALCULATING; 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 [3D], 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
本发明公开了一种三维图像的交互展示方法及系统，所述交互展示方法包括以下步骤：获取一物体位于不同角度的多张图片；缝合所述多张图片，以形成所述物体的三维图像；将所述三维图像上传至一Web浏览器；在所述Web浏览器的网页上展示所述三维图像。与现有技术相比，本发明通过将获取的多张图片进行缝合，以形成物体的三维图像，并将其在统一的发布平台，即Web浏览器的网页上进行展示，使得用户能够利用各种终端通过访问Web浏览器的网页实现三维图像的观看和分享。同时，本发明中的三维图像还可以根据用户的外部操作做出相应的响应，使得用户能够从任意角度查看三维图像，提升了用户与三维图像之间的交互体验。
Description
技术领域
本发明涉及三维图像的交互展示领域，特别涉及一种基于HTML5(经过第五次重大修改的应用超文本标记语言)的三维图像的交互展示方法及系统。
背景技术
传统的三维数码展示技术一般依托于强大的CPU，GPU和RAM的图形工作站只会出现在高端的展示环境和行业中。当各种个人终端设备的运算能力不断增强，人们对于随时随地查看三维内容的需求也不断增大，为此不断购置强大的硬件设备。即使这样，目前市场上仍然未出现一款可以跨平台使用的三维展示工具，更不用说具备全方位的用户交互体验了。出现这种情况的主要原因非常复杂，但是不外乎有如下几个因素：
(1)各种终端设备，例如智能手机或智能电视等，对于三维内容的渲染能力未形成标准，因此，在某种设备上可以运行的内容并不一定在其它设备上可以有同样的效果；
(2)三维图形的格式未形成统一，目前流行的三维图形格式繁杂，主流的有obj、maya、max、fbx、cat、stl、igs、VRML等，也有在不同平台上流行的Unity3d、rhino、formZ等；
(3)各类操作系统不同，由于算法设计的不统一，例如Windows、IOS、Android等系统对于三维格式图形的运算速度和效果完全不同。
发明内容
本发明要解决的技术问题是为了克服现有技术中各种终端设备对于三维内容的渲染能力未形成标准、三维图形的格式不统一以及各类操作系统算法不统一导致三维图形不能跨平台展示的缺陷，提供一种基于HTML5的能够跨平台展示的三维图像的交互展示方法及系统。
本发明是通过下述技术方案来解决上述技术问题的：
一种三维图像的交互展示方法，其特点在于，包括以下步骤：
S1、获取一物体位于不同角度的多张图片；
S2、缝合所述多张图片，以形成所述物体的三维图像；
S3、将所述三维图像上传至一Web浏览器(网页浏览器)；
S4、在所述Web浏览器的网页上展示所述三维图像。
本方案中，通过将获取的多张图片进行缝合，以形成物体的三维图像，并将其在统一的发布平台，即Web浏览器的网页上进行展示，使得用户能够利用各种终端通过访问Web浏览器的网页实现三维图像的观看和分享，例如用户可以利用支持Web浏览器的PC(个人电脑)、手持设备或者PAD(平板电脑)、手机等终端实现对网页的访问。
在步骤S1中，可以通过对物体进行多角度拍照的方式获取图片，还可以通过上传图片序列的方式获取图片。
在步骤S2中，采用2D图片缝合技术对所述多张图片进行缝合，其中，可以将获取的多张图片上传至云端，并基于云端对所述多张图片进行缝合，避免了本地加载数据导致运算速度减慢的问题，使得用户可以迅速体验三维图像，同时避免了运用插件或者专有的运行平台，实现了跨平台体验，且无需安装任何软件。
本方案中，在将三维图像上传至Web浏览器之前，可以对其进行优化处理，例如可以调整所述三维图像的颜色或背景等。
本方案中的物体可以为茶碗、包包、衣服、手机、汽车、家具等任何具有立体形状的物体。
较佳地，步骤S4中采用HTML5及Javascript(一种计算机语言)技术展示所述三维图像。
较佳地，步骤S4之后还包括以下步骤：
S5、根据外部操作确定一偏移方向和一偏移角度；
S6、控制所述三维图像沿所述偏移方向偏移所述偏移角度。
本方案中，外部操作是指用户对所述三维图像做出的例如向左滑动、向右滑动、向上滑动、向下滑动或者向其它方向滑动等，上述外部操作可以通过鼠标或者手指等实现。根据用户的外部操作确定偏移方向和偏移角度，并控制三维图像沿所述偏移方向偏移所述偏移角度，使得用户能够从任意角度查看三维图像，提升了用户与三维图像之间的交互体验。
较佳地，步骤S1包括以下步骤：对物体的三维模型进行渲染，以形成所述物体位于不同角度的多张图片。本方案中，可以采用三维渲染引擎对物体的三维模型进行渲染。其中，三维渲染引擎为现有技术，不再赘述。
较佳地，所述交互展示方法还包括以下步骤：在所述三维图像上添加以下信息中的至少一种：文字、语音、链接。
本方案中，用户可以在三维图像上添加文字、语音和/或链接等信息。其中，添加信息的用户可以为上传物体三维图像的用户，添加的信息可以表征所述物体的属性，例如拍摄所述物体的时间、所述物体尺寸大小等。添加信息的用户还可以为观看物体三维图像的用户，添加的信息可以为用户对物体的评论，例如咨询所述物体的售价、对所述物体的使用性能的评论等。
本方案中，在三维图像上添加的信息会随着三维图像的移动而移动。
本发明还提供一种三维图像的交互展示系统，其特点在于，包括：
一获取模块，用于获取一物体位于不同角度的多张图片；
一图像缝合模块，用于缝合所述多张图片，以形成所述物体的三维图像；
一上传模块，用于将所述三维图像上传至一Web浏览器；
以及一展示模块，用于在所述Web浏览器的网页上展示所述三维图像。
较佳地，所述展示模块用于采用HTML5及Javascript技术展示所述三维图像。
较佳地，所述展示模块还用于根据外部操作确定一偏移方向和一偏移角度，并控制所述三维图像沿所述偏移方向偏移所述偏移角度。
较佳地，所述获取模块还用于对物体的三维模型进行渲染，以形成所述物体位于不同角度的多张图片。
较佳地，所述交互展示系统还包括一信息添加模块，用于在所述三维图像上添加以下信息中的至少一种：文字、语音、链接。
在符合本领域常识的基础上，上述各优选条件，可任意组合，即得本发明各较佳实例。
本发明的积极进步效果在于：与现有技术相比，本发明通过将获取的多张图片进行缝合，以形成物体的三维图像，并将其在统一的发布平台，即Web浏览器的网页上进行展示，使得用户能够利用各种终端通过访问Web浏览器的网页实现三维图像的观看和分享。同时，本发明中的三维图像还可以根据用户的外部操作做出相应的移动，使得用户能够从任意角度查看三维图像，提升了用户与三维图像之间的交互体验。
附图说明
图1为本发明实施例的三维图像的交互展示方法的流程图。
图2为本发明实施例的三维图像的交互展示系统的结构框图。
具体实施方式
下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。
本实施例提供一种三维图像的交互展示方法，如图1所示，包括以下步骤：
步骤101、通过拍照的方式获取一汽车位于不同角度的10张图片；
步骤102、采用2D图片缝合技术缝合所述10张图片，以形成汽车的三维图像；
步骤103、将所述三维图像上传至Web浏览器；
步骤104、在所述Web浏览器的网页上展示所述三维图像；
步骤105、根据外部操作确定偏移方向和偏移角度；
步骤106、控制所述三维图像沿所述偏移方向偏移所述偏移角度。
在将三维图像上传至Web浏览器之前，可以对其进行优化处理，例如可以调整所述三维图像的颜色或背景。
步骤104中，采用HTML5及Javascript技术展示汽车的三维图像。
本实施例中，用户利用手机访问Web浏览器中展示汽车三维图像的网页，并通过在手机屏幕上做出手势操作来查看汽车的三维图像。例如当用户向左滑动手指时，汽车的三维图像会随着手指的滑动而向左移动。
本实施例中的三维图像的交互展示方法还包括：在所述三维图像上添加以下信息中的至少一种：文字、语音、链接。例如上传三维图像的用户可以在步骤103之前在三维图像上添加拍摄汽车的时间、汽车的配置以及售价等信息。通过Web浏览器的网页观看汽车三维图像的用户可以对网页上展示的三维图像上添加对汽车的评论等信息。其中，在三维图像上添加的信息会随着三维图像的移动而移动。
另外，用户还可以将展示于Web浏览器网页上的三维图像分享至其他网页，以供其它用户观看。
本实施例中，汽车的三维图像被上传至Web浏览器，用户可以通过访问Web浏览器的网页观看汽车的三维图像，还可以对三维图像做出向左滑动、向右滑动或者向其它方向滑动的操作，汽车的三维图像会随着用户的操作而移动，方便用户全方位地观看汽车。另外，本实施例中基于云端对汽车的图片进行缝合，避免了本地加载数据导致运算速度减慢的问题，使得用户可以迅速体验三维图像，同时避免了运用插件或者专有的运行平台，实现了跨平台体验，且无需安装任何软件。
本实施例还提供一种三维图像的交互展示系统20，如图2所示，包括获取模块21、图像缝合模块22、信息添加模块23、上传模块24以及展示模块25。
获取模块21用于获取一物体位于不同角度的多张图片。其中，获取模块获取图片的方式，对物体的三维模型进行渲染，以形成所述物体位于不同角度的多张图片。
图像缝合模块22用于缝合所述多张图片，以形成所述物体的三维图像。
信息添加模块23用于在所述三维图像上添加以下信息中的至少一种：文字、语音、链接。
上传模块24用于将所述三维图像上传至一Web浏览器。
展示模块25用于在所述Web浏览器的网页上采用HTML5及Javascript技术展示所述三维图像，并根据外部操作确定一偏移方向和一偏移角度，以及控制所述三维图像沿所述偏移方向偏移所述偏移角度。
本发明中，获取图片的方式不限于本实施例中的拍照，还可以通过上传图片序列、对物体的三维模型进行渲染等方式来获取所述物体位于不同角度的多张图片。获取图片的数量也不限于本实施例中的10张，具体可以根据实际情况来确定图片的数量，以将所有图片缝合完成后得到物体的三维图像为准。
虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这些仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。
Claims (10)
1.一种三维图像的交互展示方法，其特征在于，包括以下步骤：
S1、获取一物体位于不同角度的多张图片；
S2、缝合所述多张图片，以形成所述物体的三维图像；
S3、将所述三维图像上传至一Web浏览器；
S4、在所述Web浏览器的网页上展示所述三维图像。
2.如权利要求1所述的交互展示方法，其特征在于，步骤S4中采用HTML5及Javascript技术展示所述三维图像。
3.如权利要求1或2所述的交互展示方法，其特征在于，步骤S4之后还包括以下步骤：
S5、根据外部操作确定一偏移方向和一偏移角度；
S6、控制所述三维图像沿所述偏移方向偏移所述偏移角度。
4.如权利要求1所述的交互展示方法，其特征在于，步骤S1包括以下步骤：对物体的三维模型进行渲染，以形成所述物体位于不同角度的多张图片。
5.如权利要求1所述的交互展示方法，其特征在于，所述交互展示方法还包括以下步骤：在所述三维图像上添加以下信息中的至少一种：文字、语音、链接。
6.一种三维图像的交互展示系统，其特征在于，包括：
一获取模块，用于获取一物体位于不同角度的多张图片；
一图像缝合模块，用于缝合所述多张图片，以形成所述物体的三维图像；
一上传模块，用于将所述三维图像上传至一Web浏览器；
以及一展示模块，用于在所述Web浏览器的网页上展示所述三维图像。
7.如权利要求6所述的交互展示系统，其特征在于，所述展示模块用于采用HTML5及Javascript技术展示所述三维图像。
8.如权利要求6或7所述的交互展示系统，其特征在于，所述展示模块还用于根据外部操作确定一偏移方向和一偏移角度，并控制所述三维图像沿所述偏移方向偏移所述偏移角度。
9.如权利要求6所述的交互展示系统，其特征在于，所述获取模块用于对物体的三维模型进行渲染，以形成所述物体位于不同角度的多张图片。
10.如权利要求6所述的交互展示系统，其特征在于，所述交互展示系统还包括一信息添加模块，用于在所述三维图像上添加以下信息中的至少一种：文字、语音、链接。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510974104.7A CN106909263A (zh) | 2015-12-22 | 2015-12-22 | 三维图像的交互展示方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510974104.7A CN106909263A (zh) | 2015-12-22 | 2015-12-22 | 三维图像的交互展示方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106909263A true CN106909263A (zh) | 2017-06-30 |
Family
ID=59201192
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510974104.7A Withdrawn CN106909263A (zh) | 2015-12-22 | 2015-12-22 | 三维图像的交互展示方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106909263A (zh) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107608608A (zh) * | 2017-09-25 | 2018-01-19 | 浙江科澜信息技术有限公司 | 一种三维图形渲染引擎的信息交互方法、装置及系统 |
| CN108833796A (zh) * | 2018-09-21 | 2018-11-16 | 维沃移动通信有限公司 | 一种图像拍摄方法及终端 |
| CN109525771A (zh) * | 2017-09-20 | 2019-03-26 | 阿马特路斯株式会社 | 影像发布装置、影像发布系统、影像发布方法 |
| CN113559498A (zh) * | 2021-07-02 | 2021-10-29 | 网易（杭州）网络有限公司 | 三维模型展示方法、装置、存储介质及电子设备 |
| CN115830212A (zh) * | 2022-11-23 | 2023-03-21 | 上海哔哩哔哩科技有限公司 | 三维模型展示方法及相关设备 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102063475A (zh) * | 2010-12-22 | 2011-05-18 | 张丛喆 | 三维模型的网页用户终端呈现方式 |
| CN103077239A (zh) * | 2013-01-10 | 2013-05-01 | 上海电力学院 | 基于云渲染的iFrame 嵌入式Web3D系统 |
| CN104484327A (zh) * | 2014-10-09 | 2015-04-01 | 上海杰图天下网络科技有限公司 | 一种项目工程的环境展示方法 |
-
2015
- 2015-12-22 CN CN201510974104.7A patent/CN106909263A/zh not_active Withdrawn
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102063475A (zh) * | 2010-12-22 | 2011-05-18 | 张丛喆 | 三维模型的网页用户终端呈现方式 |
| CN103077239A (zh) * | 2013-01-10 | 2013-05-01 | 上海电力学院 | 基于云渲染的iFrame 嵌入式Web3D系统 |
| CN104484327A (zh) * | 2014-10-09 | 2015-04-01 | 上海杰图天下网络科技有限公司 | 一种项目工程的环境展示方法 |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109525771A (zh) * | 2017-09-20 | 2019-03-26 | 阿马特路斯株式会社 | 影像发布装置、影像发布系统、影像发布方法 |
| CN107608608A (zh) * | 2017-09-25 | 2018-01-19 | 浙江科澜信息技术有限公司 | 一种三维图形渲染引擎的信息交互方法、装置及系统 |
| CN108833796A (zh) * | 2018-09-21 | 2018-11-16 | 维沃移动通信有限公司 | 一种图像拍摄方法及终端 |
| CN113559498A (zh) * | 2021-07-02 | 2021-10-29 | 网易（杭州）网络有限公司 | 三维模型展示方法、装置、存储介质及电子设备 |
| CN113559498B (zh) * | 2021-07-02 | 2024-09-20 | 网易（杭州）网络有限公司 | 三维模型展示方法、装置、存储介质及电子设备 |
| CN115830212A (zh) * | 2022-11-23 | 2023-03-21 | 上海哔哩哔哩科技有限公司 | 三维模型展示方法及相关设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3201879B1 (en) | Optimizing the legibility of displayed text | |
| US10016679B2 (en) | Multiple frame distributed rendering of interactive content | |
| US9240070B2 (en) | Methods and systems for viewing dynamic high-resolution 3D imagery over a network | |
| US9691172B2 (en) | Furry avatar animation | |
| KR102841929B1 (ko) | 전방향 미디어 텍스처 매핑 메타데이터를 생성하는 방법 및 장치 | |
| CN103472985B (zh) | 一种三维购物平台显示界面的用户编辑方法 | |
| CN103916621A (zh) | 视频通信方法及装置 | |
| CN106909263A (zh) | 三维图像的交互展示方法及系统 | |
| US20250131642A1 (en) | Method, apparatus, storage medium, device and program product for image processing | |
| CN108133454B (zh) | 空间几何模型图像切换方法、装置、系统及交互设备 | |
| US10127715B2 (en) | 3D user interface—non-native stereoscopic image conversion | |
| CN106383655A (zh) | 在全景播放过程中控制视角转换的交互控制方法及装置 | |
| CN107861711B (zh) | 页面适配方法及装置 | |
| US12456275B2 (en) | System and method of three-dimensional model interaction on low end devices with photorealistic visualization | |
| CN107888970A (zh) | 视频处理方法、装置、嵌入式设备及存储介质 | |
| US20250217004A1 (en) | Virtual object interaction method and apparatus, computer device, and storage medium | |
| CN106204418A (zh) | 一种虚拟现实移动端中基于矩阵逆运算的图像扭曲方法 | |
| US20250157116A1 (en) | Sticker generation method and device | |
| CN108027715B (zh) | 图形命令令牌的修改 | |
| KR20170119352A (ko) | 몰핑 기술을 이용하여 3차원 동영상 이미지를 생성하는 방법 및 3차원 동영상 이미지를 생성하기 위한 전자 장치 | |
| Girašek et al. | Visualization of temperature fields distribution on power module within web interface | |
| CN106331834B (zh) | 一种多媒体数据处理方法及其设备 | |
| JP2018200505A (ja) | ３次元画像のインタラクティブ表示方法及びシステム | |
| US20260038201A1 (en) | System and method of three-dimensional model interaction on low end devices with photorealistic visualization | |
| CN207337340U (zh) | 一种应用于实体产品信息的ar系统 |
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 |