核心示例
Super_Calvin
每周创作更新一些webGl、ThreeJS渲染三维模型,并写出一些心得技巧,感谢关注~~~
展开
-
三维模型如何实现设备运维管理平台?
设备运维管理平台示例描述与操作指南应用场景示例效果展示实现步骤第一步 初始化构件查询功能第二步 初始化报警维修功能第三步 初始化管道预览功能相关接口示例描述与操作指南模拟设备发生报警时系统第一时间响应,点选警报按钮,导航至故障点模拟维修场景,维修完成后排除故障,并记录故障序号,同时可在此实例中查找Bim模型内的所有构件,快速准确的查找需要的构件。应用场景以BIM为手段,用数据创造价值,辅助用户完成智慧企业搭建。如智慧管廊、智慧机场、智慧水务、智慧能源、智慧安防、智慧医疗、智慧楼宇等。集成各系统设备及原创 2020-06-29 17:12:10 · 647 阅读 · 0 评论 -
threeJS如何实现智慧楼宇管理平台
智慧楼宇管理平台示例描述与操作指南示例效果展示应用场景实现步骤第一步 初始化设置功能第二步 初始化查看设备信息功能第三步 初始化重点区域监控功能第四步 初始化热力分布功能相关接口相关示例示例描述与操作指南点击示例内各个功能,可以查看到建筑中的监控图像,了解各个楼层的热力分布,同时可查看各层建筑的构件详情,楼层剖切,也可观察楼层中各系统的占比,更快速的处理建筑中突发情况,实现智慧楼宇的意义。示例效果展示应用场景智慧楼宇管理平台管理系统是智能建筑的主要组成部分之一。智能建筑通过楼宇自动化系统实现建原创 2020-06-28 17:29:30 · 5112 阅读 · 2 评论 -
智慧屏幕中的能耗数据展示如何实现?
智慧屏幕中的能耗数据展示如何实现示例描述与操作指南示例效果展示实现步骤第一步 添加光源第二步 添加统计图表第三步 添加Dom标签应用场景示例描述与操作指南能耗数据屏幕展示,是以室内灯光场景为例,利用上方的功能按钮交互显示人数占比、用电比例、发电趋势、以及异常行为分析的监控,同时点击区域内灯光的开关功能,可以模拟室内灯光的点亮效果。示例效果展示实现步骤第一步 添加光源/*** @description 创建聚光灯* @param {array} spotLightList 聚光灯所在构件*原创 2020-06-05 11:21:05 · 1183 阅读 · 0 评论 -
基于threejs如何将两个模型进行对比?
模型对比示例示例描述与操作指南应用场景示例效果展示实现步骤第一步 发起模型对比请求第二步 获取模型对比结果第三步 根据模型对比的结果进行显示示例描述与操作指南模型对比是从构件级来比较模型不同版本之间的差异。模型对比功能可以对比两个不同版本模型之间的差异,这些差异包含构件关系的差异、构件信息的差异以及模型中构件的增加与删除等改动。构件信息的差异是指匹配构件的属性信息、基本信息、几何信息的差异;构...原创 2019-12-12 16:19:39 · 1280 阅读 · 0 评论 -
三维模型下的系统信息提取与展示
系统信息提取与展示示例描述与操作指南应用场景示例效果展示实现步骤第一步 获取模型系统树结构第二步 初始化树操作区域示例描述与操作指南系统信息提取与展示,主要用于展示当前模型含有的系统结构。通过调用获取模型系统树列表,将当前模型的系统信息提取并展示出来。用户可以将完整代码直接下载下来后,将模型id和用户个人账户devcode替换上去,即可展示自有模型。应用场景建筑信息模型的系统信息,特指模型...原创 2019-11-28 14:04:21 · 681 阅读 · 0 评论 -
基于threejs系统流向与数据展示
系统流向与数据展示示例描述与操作指南应用场景示例效果展示实现步骤第一步 根据选定的构件获取相应的系统所属组别的构件列表第二步 获取模型的系统类别和对应系统下的构件列表第三步 添加流向箭头和三维字体示例描述与操作指南系统流向与数据展示示例,用于展示管道水流水压信息,并对管道水流信息进行监管。通过调用获取模型系统树列表,将当前模型的系统信息提取并展示出来,并在界面上模拟水流动态效果与水压数据实时监...原创 2019-11-27 16:22:05 · 2719 阅读 · 5 评论 -
三维模型下构件关联类型系统展示
构件关联类型系统展示示例描述与操作指南应用场景示例效果展示实现步骤第一步 获取指定构件相关联的构件类型集第二步 根据获取的相关构件列表进行对应的模型视图展示示例描述与操作指南构件关联类型系统展示示例,用于对管道系统中某一被选择的管道构件进行同系统下构件类查找。通过获取指定构件所属系统和获取构件相关联的指定类型构件集这两个接口,将当前示例效果展示出来。用户可以将完整代码直接下载下来后,将模型id...原创 2019-11-27 16:05:08 · 369 阅读 · 0 评论 -
基于thee.js如何在管道系统中维修?
管道系统维修示例描述与操作指南应用场景效果展示实现步骤第一步 获取模型构件指定type类型相近构件第二步 根据选中的构件显示对应的开关构件描述与操作指南管道系统维修示例,是一个完整的模拟管道运维系统的示例。此维修示例会对管道数据进行监控,将异常管道构件红色高亮展示;在开始维修后系统会自动将相关联阀门关闭,维修完成后可操作系统打开指定阀门进行测试;点击完成,系统会打开阀门重新对管道数据进行检测,...原创 2019-11-21 13:57:13 · 269 阅读 · 0 评论 -
教你如何在指定构件进行系统展示
指定构件所属系统展示示例描述与操作指南应用场景示例效果展示实现步骤第一步 监听构件点击事件第二步 获取用户点击构件的相关联的构件列表第三步 绑定点击相关联构件列表的构件id的点击事件相关示例示例描述与操作指南指定构件所属系统展示示例,用于对当前模型内不同管道所属于哪个系统进行反向的查询并将同一系统下的其它构件展示出来。通过调用获取模型系统树列表,将当前模型的系统信息提取并展示。用户可以将完整代...原创 2019-11-21 11:07:42 · 256 阅读 · 0 评论 -
三维模型中的系统流向与数据展示
系统流向与数据展示示例描述与操作指南应用场景示例效果展示实现步骤第一步 根据选定的构件获取相应的系统所属组别的构件列表第二步 获取模型的系统类别和对应系统下的构件列表第三步 添加流向箭头和三维字体相关示例示例描述与操作指南系统流向与数据展示示例,用于展示管道水流水压信息,并对管道水流信息进行监管。通过调用获取模型系统树列表,将当前模型的系统信息提取并展示出来,并在界面上模拟水流动态效果与水压数...原创 2019-11-21 10:36:33 · 862 阅读 · 0 评论 -
3D模型多级外轮廓与内部构件如何实现分离
多级外轮廓与内部构件分离示例描述与操作指南应用场景示例效果展示实现步骤第一步 提取模型外轮廓第二步 获取多级外轮廓构件列表第三步 构建组移动动画示例描述与操作指南多级外轮廓与内部构件分离示例,用于展示同一模型下不同外轮廓级别所提取出来的外轮廓构件集之间的差异,以及不同级别下哪些构件将被剔除。通过 提取模型外轮廓接口将输入 BIM 模型的建筑外轮廓提取出来后,调用获取模型外轮廓构件集接口获取对应...原创 2019-11-20 16:45:18 · 663 阅读 · 1 评论 -
基于Three.js如何进行构件查询?(详解)
3D模型进行构件查询示例描述与操作指南应用场景示例效果展示实现步骤第一步 创建搜索区域第二步 根据搜索结果对模型进行相应显示示例描述与操作指南构件查询示例,是对当前模型的数据进行按需查找。可以筛选楼层,在指定楼层进行查找;可对某类构件进行查找;也可针对某个构件名称进行模糊查询。用户可以将完整代码直接下载下来后,将模型id和用户个人账户devcode替换上去,即可展示自有模型。应用场景用于用...原创 2019-11-20 14:34:24 · 1412 阅读 · 0 评论 -
在ThreeJS中如何让三维模型实现空间树展示?
空间树展示示例描述与操作指南示例效果展示实现步骤示例描述与操作指南空间树展示示例,主要用于将 BIM 模型的建筑空间结构展示出来。通过调用获取模型空间树列表接口将模型空间架构展示出来。用户将完整代码下载下来后,将模型 id 和用户个人账户 devcode 替换上去,即可展示自有模型。示例效果展示实现步骤第一步 获取并创建树结构通过调用获取模型空间树的接口,获取对应模型树结构并在三维界...原创 2019-09-19 15:07:48 · 3056 阅读 · 0 评论 -
如何对两个三维模型进行对比
模型对比示例示例描述与操作指南示例效果展示实现步骤示例描述与操作指南模型对比是从构件级来比较模型不同版本之间的差异。模型对比功能可以对比两个不同版本模型之间的差异,这些差异包含构件关系的差异、构件信息的差异以及模型中构件的增加与删除等改动。构件信息的差异是指匹配构件的属性信息、基本信息、几何信息的差异;构件关系的差异是指构件父子节点关系的变化,管道系统中连接关系的变化;构件的增删情况是指...原创 2019-09-19 14:58:50 · 6245 阅读 · 0 评论 -
模型数据如何实现模糊搜索?
模型数据实现模糊搜索示例描述与操作指南示例效果展示实现步骤示例描述与操作指南构件查询示例,是对当前模型的数据进行按需查找。可以筛选楼层,在指定楼层进行查找;可对某类构件进行查找;也可针对某个构件名称进行模糊查询。用户可以将完整代码直接下载下来后,将模型id和用户个人账户devcode替换上去,即可展示自有模型。示例效果展示实现步骤第一步 搜索区的创建:在界面左侧创建搜索区域// 创建...原创 2019-09-19 14:49:58 · 371 阅读 · 0 评论 -
在ThreeJS下如何做产品信息介绍?
产品信息介绍示例描述与操作指南示例效果展示实现步骤示例描述与操作指南产品信息介绍示例,将原有的产品手册转为三维可视化的产品信息展示界面,将产品数据、产品介绍与三维模型关联展示。示例效果展示实现步骤第一步 创建左侧区域// 创建左侧按钮操作区,点击不同的按钮会切换成不同的模型 const showxsjTool2 = () => { const toolB...原创 2019-09-11 17:28:55 · 619 阅读 · 0 评论 -
如何给建筑模型空间添加标签?
空间添加标签示例描述与操作指南示例效果展示实现步骤示例描述与操作指南空间添加标签示例,主要是用于将建筑空间模型的空间结构和它的空间意义关联在一起展示出来。通过调用获取模型空间树列表接口,将模型空间架构展示出来,后在对应结构位置添加相关信息标签。用户将完整代码下载下来后,将模型 id 和用户个人账户 devcode 替换上去,即可展示自有模型。示例效果展示实现步骤第一步 获取并创建树结构...原创 2019-09-11 17:21:28 · 587 阅读 · 0 评论 -
如何对三维模型做产品安装指南?
产品安装指南示例描述与操作指南示例效果展示实现步骤示例描述与操作指南产品安装指南示例,将安装转椅的安装指南模拟至三维界面中,按步骤对用户进行指导安装。示例效果展示实现步骤第一步 零件对照对现有所有零件进行展示对照/** * @description: 零件对照函数 * 点击零件对照时的动画,将每一个构件从当前位置移动到对应的位置 * 同时将钉子缓慢...原创 2019-09-11 17:18:02 · 235 阅读 · 0 评论 -
基于ThreeJS如何让太阳光影发生变化?
太阳光影变化示例描述与操作指南示例效果展示 [^1]:实现步骤示例描述与操作指南太阳光影变化示例,是利用 Threejs 开源接口模拟在不同地区、不同时间的太阳光照下阴影的形成。当前示例用于展示在不同经纬度、不同时间下、建筑受到不同光照强度而生成的不同阴影效果。用户将完整代码下载下来后,替换用户模型 id 和用户个人账户 devcode,即可展示自有模型。示例效果展示 1:实...原创 2019-09-11 11:08:44 · 3153 阅读 · 5 评论 -
基于ThreeJS在BIM如何实现室内展厅导航?
室内导航示例示例描述与操作指南示例效果展示应用场景实现步骤相关示例示例描述与操作指南室内导航示例,以医院场景为例,基于建筑模型的空间路网所实现。主要包括智能挂号与医院导航两个功能。智能挂号,用户可以选择科室进行挂号,生成挂号单,并显示挂号信息。点击前往所选科室,当前示例会在挂号处与所选科室之间生成最短路径。用户可以通过全局视角及沉浸式视角两种方式进行路径预览。医院导航,是指用户可以任意选择...原创 2019-09-11 10:54:53 · 5068 阅读 · 4 评论 -
在三维模型如何实现空间区域导览?
空间区域导览示例描述与操作指南示例效果展示应用场景实现步骤相关案例示例描述与操作指南空间区域导览,是以医院场景为例,利用模型空间树,将医院分层展示。同时利用IFC模型中的IfcSpace构件,进行科室区域高亮展示,使模型中对应的区域位置更加清晰直观。将配以详细的信息介绍与科室进行挂钩,使得用户在了解医院模型整体空间区域位置的同时,又能轻松掌握单个科室区域的详细信息。示例效果展示应用场景...原创 2019-09-11 10:59:01 · 733 阅读 · 0 评论 -
在IFC标准模型如何实现室内灯光管控?
室内灯光管控示例描述与操作指南示例效果展示实现步骤示例描述与操作指南室内光照管控示例,是利用 Threejs 开源接口模拟室内光影与智能家居控制。用户可以将完整代码直接下载下来后,将模型 id 和用户个人账户 devcode 替换上去,即可展示自有模型。示例效果展示实现步骤第一步 创建 SpotLight// 创建 spotLight const createSpotLigh...原创 2019-09-11 11:07:19 · 321 阅读 · 2 评论