CN108984835B - 一种跨平台3d户型绘制方法、装置及系统 - Google Patents
一种跨平台3d户型绘制方法、装置及系统 Download PDFInfo
- Publication number
- CN108984835B CN108984835B CN201810598135.0A CN201810598135A CN108984835B CN 108984835 B CN108984835 B CN 108984835B CN 201810598135 A CN201810598135 A CN 201810598135A CN 108984835 B CN108984835 B CN 108984835B
- Authority
- CN
- China
- Prior art keywords
- house type
- house
- type
- model
- setting
- 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
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F30/00—Computer-aided design [CAD]
- G06F30/10—Geometric CAD
- G06F30/13—Architectural design, e.g. computer-aided architectural design [CAAD] related to design of buildings, bridges, landscapes, production plants or roads
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- Geometry (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Theoretical Computer Science (AREA)
- Civil Engineering (AREA)
- Structural Engineering (AREA)
- Computational Mathematics (AREA)
- Architecture (AREA)
- Mathematical Analysis (AREA)
- Mathematical Optimization (AREA)
- Pure & Applied Mathematics (AREA)
- Evolutionary Computation (AREA)
- General Engineering & Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明公开了家装设计中一种跨平台3D户型绘制方法、装置及系统，根据用户所选择的户型图绘制标准户型，再添加门窗等标准模型，并设置好区域属性，在3D视图下查看户型，本发明免去了安装客户端的麻烦，可以跨平台使用，便于3D户型设计，同时，不限制字体，文件占用空间小，下载也很快；颜色选择范围广，图像在屏幕上总是边缘清晰，可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
Description
技术领域
本发明涉及家装设计领域，特别是一种跨平台3D户型图绘制方法、装置及系统。
背景技术
在现代家装设计领域中，较多软件都能够进行3D模型的设计和3D模型的展示，但大多需要借助相应软件来实现，需要安装客户端，使用繁琐，不能跨平台使用，且对适用人群具有一定的技术要求。同时，图形格式也多种多样，但大多只能显示安装了的字体，文件占用空间大，颜色选择范围不够广，图像边缘模糊，在缩放图像时，往往会破坏图像的清晰度、细节等。
发明内容
为解决上述问题，本发明的目的在于提供一种跨平台3D户型绘制方法、装置及系统，基于WebGL技术和SVG图像显示格式，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样设计人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，显然，WebGL技术免去了安装客户端的麻烦，可以跨平台使用，便于3D户型设计。
SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML)，用于描述二维矢量图形的一种图形格式。SVG是W3C(“WorldWideWebConSortium”即“国际互联网标准组织”)在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG图形格式具有以下优点：SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态，也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面；总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快；SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版；SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率；用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等；目前常见的浏览器也都支持SVG格式图像。
本发明解决其问题所采用的技术方案是：
一种跨平台3D户型绘制方法，其特征在于，包括以下步骤：
A、上传户型图；
B、绘制墙体，生成标准户型；
C、添加标准模型，并设置区域属性；
D、通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。
进一步，用户通过以下步骤上传户型图：
A1、进入设计页面，触发上传户型图指令；
A2、选择并打开户型图文件；
A3、所述户型图文件以图片的形式显示。
进一步，所述步骤B包括以下步骤：
B1、进入绘制页面；
B2、调整户型图至合适位置和大小；
B3、绘制一面与户型图相同尺寸的模型墙体，确定户型图比例；
B4、退出编辑，删除模型墙体；
B5、绘制户型图，设置墙体属性或直接删除墙体；
B6、绘制完成所有墙体，生成标准户型。
进一步，所述步骤B1会显示系统提示，触发系统提示确认指令后进入步骤B2；通过滚动鼠标中键缩放户型图，按住鼠标中键移动户型图从而调整户型图至合适位置和大小；通过将鼠标移动到墙体的一端，点击左键，再移动鼠标到该墙体的另一端，点击左键，在弹出的对话框中输入户型图标注的尺寸，点击确定从而绘制一面与户型图相同尺寸的墙体；通过鼠标右键单击墙体，在弹出的对话框中通过点击删除按钮删除不要的墙体。
进一步，所述步骤C包括以下步骤：
C1、从模型库中添加标准模型，并保持和户型图一致；
C2、设置空间区域属性，选择显示或隐藏户型图信息。
进一步，所述模型库已有的标准模型包括门窗、卫浴、床柜，所述标准模型也可以通过绘制模型并添加到所述模型库生成；通过调整模型的位置和切换模型的方向，获得和户型图一致的设计；通过触发空间区域属性设置指令，从而设置空间区域的高度和名称，选择隐藏或显示3D视图下的房顶；通过触发系统设置指令，从而选择显示或隐藏户型图的尺寸、空间区域信息、文字标注、底图、背景网络。
进一步，所述步骤D中，绘制完成后，以SVG格式呈现绘制完成的2D户型图；通过触发3D指令，WebGL引擎绘制3D户型图，以SVG格式呈现绘制好的3D户型图。
一种应用跨平台3D户型绘制方法的装置，其特征在于，包括：
上传模块：用于上传户型图；
绘制模块：用于绘制墙体，生成标准户型；
设置模块：用于添加标准模型，并设置属性；
展示模块：用于通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。
一种跨平台3D户型绘制系统，其特征在于，包括控制模块和存储控制指令的存储模块，控制模块读取所述指令执行以下步骤：
A、上传户型图；
B、绘制墙体，生成标准户型；
C、添加门窗等模型，并设置区域属性；
D、WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。
本发明的有益效果是：本发明采用的一种跨平台3D户型绘制方法、装置及系统，通过WebGL提供硬件3D加速渲染，通过SVG图像格式用文本格式的描述性语言来描述图像内容；对比起现有技术的做法，本发明免去了安装客户端的麻烦，可以跨平台使用，便于3D户型设计，同时，不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面；文件占用空间小，下载快；颜色选择范围广，图像在屏幕上总是边缘清晰，可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
附图说明
下面结合附图和实例对本发明作进一步说明。
图1是本发明一种跨平台3D户型绘制方法的流程图；
图2是本发明一种跨平台3D户型绘制方法步骤A的流程图；
图3是本发明一种跨平台3D户型绘制方法步骤B的流程图；
图4是本发明一种跨平台3D户型绘制方法步骤C的流程图；
图5是本发明一种跨平台3D户型绘制方法步骤D的流程图；
图6是本发明一种应用跨平台3D户型绘制方法的装置的模块方框图；
图7是本发明一种应用跨平台3D户型绘制方法的装置的上传模块方框图；
图8是本发明一种应用跨平台3D户型绘制方法的装置的绘制模块方框图；
图9是本发明一种应用跨平台3D户型绘制方法的装置的设置模块方框图；
图10是本发明一种应用跨平台3D户型绘制方法的装置的展示模块方框图。
具体实施方式
参照图1～5所示，本发明提供一种跨平台3D户型绘制方法，其特征在于，包括以下步骤：
A、上传户型图；
B、绘制墙体，生成标准户型；
C、添加标准模型，并设置区域属性；
D、通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。
进一步，用户通过以下步骤上传户型图：
A1、进入设计页面，触发上传户型图指令；
A2、选择并打开户型图文件；
A3、所述户型图文件以图片的形式显示。
进一步，所述步骤B包括以下步骤：
B1、进入绘制页面；
B2、调整户型图至合适位置和大小；
B3、绘制一面与户型图相同尺寸的模型墙体，确定户型图比例；
B4、退出编辑，删除模型墙体；
B5、绘制户型图，设置墙体属性或直接删除墙体；
B6、绘制完成所有墙体，生成标准户型。
进一步，所述步骤B1会显示系统提示，触发系统提示确认指令后进入步骤B2；通过滚动鼠标中键缩放户型图，按住鼠标中键移动户型图从而调整户型图至合适位置和大小；通过将鼠标移动到墙体的一端，点击左键，再移动鼠标到该墙体的另一端，点击左键，在弹出的对话框中输入户型图标注的尺寸，点击确定从而绘制一面与户型图相同尺寸的墙体；通过鼠标右键单击墙体，在弹出的对话框中设置墙体的尺寸、高度、厚度、透明度、是否为承重墙，设置墙体为显示状态或隐藏状态，通过点击删除按钮删除不要的墙体。
可选的，所述步骤B3中确定户型图比例通过选择户型图中的标准模型，并设置所述标准模型的尺寸实现。
进一步，所述步骤C包括以下步骤：
C1、从模型库中添加标准模型，并保持和户型图一致；
C2、设置空间区域属性，选择显示或隐藏户型图信息。
进一步，所述模型库已有的标准模型包括门窗、卫浴、床柜，所述标准模型也可以通过绘制模型并添加到所述模型库生成；通过调整模型的位置和切换模型的方向，获得和户型图一致的设计；通过触发空间区域属性设置指令，从而设置空间区域的高度和名称，选择隐藏或显示3D视图下的房顶；通过触发系统设置指令，从而选择显示或隐藏户型图的尺寸、空间区域信息、文字标注、底图、背景网络。
进一步，所述步骤D中，绘制完成后，以SVG格式呈现绘制完成的2D户型图；触发3D指令后，通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图；通过触发2D指令或3D指令，将呈现方式切换为2D户型图或3D户型图。
参照图6～10所示，一种应用跨平台3D户型绘制方法的装置，其特征在于，包括：
上传模块：用于上传户型图；
绘制模块：用于绘制墙体，生成标准户型；
设置模块：用于添加标准模型，并设置属性；
展示模块：用于通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。
进一步，所述上传模块包括：
触发模块：用于触发上传户型图指令；
读取模块：用于选择并打开户型图文件；
显示模块：用于将所述户型图文件以图片的形式显示。
进一步，所述绘制模块包括：
提示模块：用于显示绘制户型图的操作指南；
尺寸设置模块：用于设置尺寸数据；
墙体设置模块：用于设置墙体属性或直接删除墙体。
进一步，所述设置模块包括：
属性设置模块：用于设置空间区域属性；
系统设置模块：用于选择显示或隐藏户型图信息。
进一步，所述展示模块包括：
2D展示模块：用于以SVG格式呈现绘制完成的2D户型图；
3D绘制模块：用于通过WebGL引擎绘制3D户型图；
3D展示模块：用于以SVG格式呈现绘制好的3D户型图。
一种跨平台3D户型绘制系统，其特征在于，包括控制模块和存储控制指令的存储模块，控制模块读取所述指令执行以下步骤：
A、上传户型图；
B、绘制墙体，生成标准户型；
C、添加门窗等模型，并设置区域属性；
D、WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图。
以上所述，只是本发明的较佳实施例而已，本发明并不局限于上述实施方式，只要其以相同的手段达到本发明的技术效果，都应属于本发明的保护范围。
Claims (5)
1.一种跨平台3D户型绘制方法，其特征在于，包括以下步骤：
A、上传户型图；
B、绘制墙体，生成标准户型图；
C、添加标准模型，并设置属性；
D、通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图；
所述步骤B包括以下步骤：
B1、进入绘制页面；
B2、调整户型图位置和大小；
B3、绘制一面与户型图相同尺寸的模型墙体，确定户型图比例；
B4、退出编辑，删除模型墙体；
B5、绘制户型图，设置墙体属性或直接删除墙体；
B6、绘制完成所有墙体，生成标准户型；
所述步骤B1触发显示绘制户型图的操作指南，触发系统提示确认指令后进入步骤B2；通过触发户型图调整指令，从而调整户型图的位置和大小；通过触发墙体设置指令，在弹出的对话框中输入户型图标注的尺寸，完成设置后通过触发确定指令从而绘制与户型图相同尺寸的墙体，通过触发墙体删除指令删除墙体；
所述步骤C包括以下步骤：
C1、从模型库中添加标准模型，并保持和户型图一致；
C2、设置空间区域属性，选择显示或隐藏户型图信息；
所述模型库已有的标准模型包括门窗、卫浴、床柜，所述标准模型也可以通过绘制模型并添加到所述模型库生成；通过调整模型的位置和切换模型的方向，获得和户型图一致的设计；通过触发空间区域属性设置指令，从而设置空间区域的高度和名称，选择隐藏或显示3D视图下的房顶；通过触发系统设置指令，从而选择显示或隐藏户型图的尺寸、空间区域信息、文字标注、底图、背景网络。
2.根据权利要求1所述的一种跨平台3D户型绘制方法，其特征在于，用户通过以下步骤上传户型图：
A1、进入设计页面，触发上传户型图指令；
A2、选择并打开户型图文件；
A3、所述户型图文件以图片的形式显示。
3.根据权利要求1所述的一种跨平台3D户型绘制方法，其特征在于，所述步骤D中，绘制完成后，以SVG格式呈现绘制完成的2D户型图；通过触发3D指令，WebGL引擎绘制3D户型图，以SVG格式呈现绘制好的3D户型图。
4.一种应用权利要求1～3任一所述的跨平台3D户型绘制方法的装置，其特征在于，包括：
上传模块：用于上传户型图；
绘制模块：用于绘制墙体，生成标准户型；
设置模块：用于添加标准模型，并设置属性；
展示模块：用于通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图；
所述绘制模块用于：
B1、进入绘制页面；
B2、调整户型图位置和大小；
B3、绘制一面与户型图相同尺寸的模型墙体，确定户型图比例；
B4、退出编辑，删除模型墙体；
B5、绘制户型图，设置墙体属性或直接删除墙体；
B6、绘制完成所有墙体，生成标准户型；
所述步骤B1触发显示绘制户型图的操作指南，触发系统提示确认指令后进入步骤B2；通过触发户型图调整指令，从而调整户型图的位置和大小；通过触发墙体设置指令，在弹出的对话框中输入户型图标注的尺寸，完成设置后通过触发确定指令从而绘制与户型图相同尺寸的墙体，通过触发墙体删除指令删除墙体；
所述设置模块用于：
C1、从模型库中添加标准模型，并保持和户型图一致；
C2、设置空间区域属性，选择显示或隐藏户型图信息；
所述模型库已有的标准模型包括门窗、卫浴、床柜，所述标准模型也可以通过绘制模型并添加到所述模型库生成；通过调整模型的位置和切换模型的方向，获得和户型图一致的设计；通过触发空间区域属性设置指令，从而设置空间区域的高度和名称，选择隐藏或显示3D视图下的房顶；通过触发系统设置指令，从而选择显示或隐藏户型图的尺寸、空间区域信息、文字标注、底图、背景网络。
5.一种跨平台3D户型绘制系统，其特征在于，包括控制模块和存储控制指令的存储模块，控制模块读取所述指令执行以下步骤：
A、上传户型图；
B、绘制墙体，生成标准户型图；
C、添加标准模型，并设置属性；
D、通过WebGL引擎绘制3D户型图，并以SVG格式呈现绘制完成的3D户型图；
所述步骤B包括以下步骤：
B1、进入绘制页面；
B2、调整户型图位置和大小；
B3、绘制一面与户型图相同尺寸的模型墙体，确定户型图比例；
B4、退出编辑，删除模型墙体；
B5、绘制户型图，设置墙体属性或直接删除墙体；
B6、绘制完成所有墙体，生成标准户型；
所述步骤B1触发显示绘制户型图的操作指南，触发系统提示确认指令后进入步骤B2；通过触发户型图调整指令，从而调整户型图的位置和大小；通过触发墙体设置指令，在弹出的对话框中输入户型图标注的尺寸，完成设置后通过触发确定指令从而绘制与户型图相同尺寸的墙体，通过触发墙体删除指令删除墙体；
所述步骤C包括以下步骤：
C1、从模型库中添加标准模型，并保持和户型图一致；
C2、设置空间区域属性，选择显示或隐藏户型图信息；
所述模型库已有的标准模型包括门窗、卫浴、床柜，所述标准模型也可以通过绘制模型并添加到所述模型库生成；通过调整模型的位置和切换模型的方向，获得和户型图一致的设计；通过触发空间区域属性设置指令，从而设置空间区域的高度和名称，选择隐藏或显示3D视图下的房顶；通过触发系统设置指令，从而选择显示或隐藏户型图的尺寸、空间区域信息、文字标注、底图、背景网络。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810598135.0A CN108984835B (zh) | 2018-06-11 | 2018-06-11 | 一种跨平台3d户型绘制方法、装置及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810598135.0A CN108984835B (zh) | 2018-06-11 | 2018-06-11 | 一种跨平台3d户型绘制方法、装置及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108984835A CN108984835A (zh) | 2018-12-11 |
| CN108984835B true CN108984835B (zh) | 2023-01-03 |
Family
ID=64541110
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810598135.0A Active CN108984835B (zh) | 2018-06-11 | 2018-06-11 | 一种跨平台3d户型绘制方法、装置及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108984835B (zh) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109903369A (zh) * | 2019-01-17 | 2019-06-18 | 平安城市建设科技(深圳)有限公司 | 三维户型模型构建方法、装置、设备及可读存储介质 |
| CN112862925A (zh) * | 2020-12-31 | 2021-05-28 | 佛山欧神诺云商科技有限公司 | 户型图的在线上传方法、终端以及存储装置 |
| CN113051648A (zh) * | 2021-03-31 | 2021-06-29 | 厦门知本家科技有限公司 | 基于知户型的彩色平面方案生成系统及其生成方法 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104778756A (zh) * | 2015-04-10 | 2015-07-15 | 北京明兰网络科技有限公司 | 智能家居装饰设计系统 |
| CN107194978A (zh) * | 2017-06-05 | 2017-09-22 | 中国地质大学（武汉） | 一种基于WebGL的三维家居设计及展示系统 |
| CN107833105A (zh) * | 2017-11-14 | 2018-03-23 | 青岛理工大学 | 一种基于楼宇建筑信息模型的商场可视化租赁管理方法及系统 |
-
2018
- 2018-06-11 CN CN201810598135.0A patent/CN108984835B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104778756A (zh) * | 2015-04-10 | 2015-07-15 | 北京明兰网络科技有限公司 | 智能家居装饰设计系统 |
| CN107194978A (zh) * | 2017-06-05 | 2017-09-22 | 中国地质大学（武汉） | 一种基于WebGL的三维家居设计及展示系统 |
| CN107833105A (zh) * | 2017-11-14 | 2018-03-23 | 青岛理工大学 | 一种基于楼宇建筑信息模型的商场可视化租赁管理方法及系统 |
Non-Patent Citations (1)
| Title |
|---|
| WebGL在网页室内房型展示中的应用;陈勇等;《物联网技术》;20161120(第11期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108984835A (zh) | 2018-12-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8005316B1 (en) | System and method for editing image data for media repurposing | |
| US8923651B2 (en) | Data system and method | |
| US10185703B2 (en) | Web site design system integrating dynamic layout and dynamic content | |
| US5675753A (en) | Method and system for presenting an electronic user-interface specification | |
| US7692658B2 (en) | Model for layout animations | |
| US8587614B2 (en) | System and method for image editing of electronic product design | |
| KR100743781B1 (ko) | 디지털 문서 처리용 시스템 및 방법 | |
| JP5307761B2 (ja) | 電子画像のリアルタイムパーソナライゼーション方法及びシステム | |
| CN108984835B (zh) | 一种跨平台3d户型绘制方法、装置及系统 | |
| US20070024909A1 (en) | Automated image sizing and placement | |
| US20080055315A1 (en) | Method and System to Establish and Animate a Coordinate System for Content on a Display | |
| EP1759306A2 (en) | Procedurally expressing graphic objects for web pages | |
| CN108959392B (zh) | 在3d模型上展示富文本的方法、装置及设备 | |
| US20160335740A1 (en) | Zoomable web-based wall with natural user interface | |
| CN105045587B (zh) | 一种图片展示方法及装置 | |
| US7764291B1 (en) | Identification of common visible regions in purposing media for targeted use | |
| CN107861711B (zh) | 页面适配方法及装置 | |
| US20080143742A1 (en) | Method and apparatus for editing image, generating editing image, and storing edited image in portable display device | |
| US7271815B2 (en) | System, method and program to generate a blinking image | |
| US20090002386A1 (en) | Graphical Representation Creation Mechanism | |
| US8988423B2 (en) | Electronic album generating apparatus, stereoscopic image pasting apparatus, and methods and programs for controlling operation of same | |
| EP2816521A1 (en) | Editing method of the three-dimensional shopping platform display interface for users | |
| KR101430964B1 (ko) | 디스플레이 제어방법 | |
| Harder | Graphics and Multimedia for the Web with Adobe Creative Cloud: Navigating the Adobe Software Landscape | |
| JP2000231556A5 (zh) |
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 |