![](https://img-blog.csdnimg.cn/20190820112846249.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
三维示例代码
基于ThreeJS在BIM模型中,帮助更多用户进行建筑信息模型上的二次开发~~
Super_Calvin
每周创作更新一些webGl、ThreeJS渲染三维模型,并写出一些心得技巧,感谢关注~~~
展开
-
基于Three.js的三维模型如何设置高亮
基于Three.js的三维模型如何设置高亮示例描述与操作指南示例效果展示实现方式相关示例相关接口示例描述与操作指南设置高亮示例是将构件高亮显示。点击“运行”按钮,可看到构件的高亮效果。通过接口highlightComponentsByKey来实现。示例效果展示实现方式通过接口highlightComponentsByKey来实现。// 点击运行触发的函数const run = (...原创 2020-04-16 13:30:02 · 4550 阅读 · 0 评论 -
三维模型下如何实现高亮并飞跃视角
三维模型下如何实现高亮并飞跃视角示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南高亮并飞跃视角示例是将选中构件高亮,并将视点飞跃至合适的观察位置。通过highlightComponentsByKey和adaptiveSizeByKey实现。示例效果展示实现步骤通过highlightComponentsByKey和adaptiveSizeByKey实现。// ...原创 2020-04-16 13:22:16 · 887 阅读 · 0 评论 -
如何基于Three.js实现厂房模型高亮效果
厂房类高亮效果实现示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南以厂房类模型为例,高亮选中的构件类,本示例默认选中 IfcFlowSegment 类型构件组。其它常用的构件类型还有 IfcDoor、IfcWindow、IfcRailing、IfcSlab、IfcWall、IfcWallStandardCase 等。点击“运行”按钮,可看到效果。示例效果展示实现步...原创 2020-04-16 13:15:25 · 2724 阅读 · 0 评论 -
三维模型办公区如何实现高亮
办公区如何实现高亮示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南以办公区模型为例,高亮选中的构件类,本示例默认选中 IfcFurnishingElement 类型构件组。其它常用的构件类型还有 IfcDoor、IfcWindow、IfcRailing、IfcSlab、IfcWall、IfcWallStandardCase 等。点击“运行”按钮,可看到效果。示例效果展...原创 2020-04-16 13:09:21 · 658 阅读 · 0 评论 -
三维模型住房如何对构件隔离
住房类示例 - 隔离示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南以住房类模型为例,将所选择的构件类型隔离展示,本示例默认选中 IfcFurnishingElement 类型构件组。其它常用的构件类型还有 IfcDoor、IfcWindow、IfcRailing、IfcSlab、IfcWall等。通过接口isolateComponentsByKey、resetSce...原创 2020-04-16 11:36:59 · 240 阅读 · 0 评论 -
三维模型如何进行隔离构件?
隔离构件类示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南将所选构件类隔离显示,其他所有构件均隐藏,本示例默认隔离显示 IfcFlowSegment 类型示例。其它常用的构件类型还有 IfcDoor、IfcFlowController、IfcRailing、IfcSlab、IfcFlowFitting 等。通过接口isolateComponentsByKey、rese...原创 2020-04-16 11:26:42 · 438 阅读 · 0 评论 -
三维模型座椅如何进行隔离构件?
隔离构件示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南将所选构件或构件组隔离显示,其他所有构件均隐藏。示例效果展示通过接口isolateComponentsByKey、resetScene、getHighlightComponentsKey实现。实现步骤通过接口isolateComponentsByKey、getHighlightComponentsKey实...原创 2020-04-16 10:55:29 · 266 阅读 · 0 评论 -
三维模型进行视角相机变换
相机变换示例描述与操作指南示例效果展示实现步骤第一步 正交相机第二步 透视相机相关示例相关接口示例描述与操作指南透视相机与正交相机的切换示例效果展示实现步骤第一步 正交相机通过接口render、toOrthographic实现。// 点击运行触发的函数const run = () =>{ viewer3D.getViewerImpl().camera.toOrthogr...原创 2020-04-16 10:32:47 · 1452 阅读 · 0 评论 -
基于three.js模型如何漫游
漫游示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南该示例实现第一视角漫游模型。键盘上的WASD用来控制方向、QE控制高度、±控制速度;鼠标用来控制视角。通过接口setControlMode、resetScene、BIMWINNER.BOS3D.message实现。示例效果展示实现步骤通过接口setControlMode、resetScene、BIMWINNER...原创 2020-04-16 10:21:38 · 2828 阅读 · 1 评论 -
三维办公桌模型下的构件线框使用
如何修改背景颜色示例描述与操作指南示例效果展示实现步骤相关接口示例描述与操作指南本示例通过接口setSceneBackGroundColor实现。通过传递十六进制颜色值,修改当前模型的背景颜色。示例效果展示实现步骤本示例通过接口setSceneBackGroundColor实现。// 点击运行触发的函数const run = () =>{ viewer3D.setScen...原创 2020-04-16 10:11:35 · 232 阅读 · 0 评论 -
基于three.js如何在模型加消息提示框?
在模型加消息提示框示例描述与操作指南示例效果展示实现步骤相关接口示例描述与操作指南在模型区的正上方显示消息提示,可提示多类信息,本示例默认为“info”类信息提示,还可以选择“success”、“warning”、“error”类信息提示。通过接口BIMWINNER.BOS3D.message实现。示例效果展示实现步骤通过接口BIMWINNER.BOS3D.message实现。//...原创 2020-04-15 18:08:21 · 5855 阅读 · 0 评论 -
如何在三维空间中添加面板标签?
如何在三维空间中添加面板标签?示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示如何在三维构件上端添加面板标签。示例效果展示实现方式在构件选定位置处添加面板标签// 在构件选定位置处添加面板标签const addMark = (componentId) => { const cardBord = $("这是一把人体工程学座椅") mark = n...原创 2019-09-11 16:53:18 · 347 阅读 · 0 评论 -
基于ThreeJS实现3D模型阴影渲染
基于ThreeJS实现3D模型阴影渲染示例描述与操作指南示例效果展示实现步骤示例描述与操作指南当前示例专门用于展示构件的阴影效果。示例效果展示实现步骤第一步 添加聚光灯/** * @description: 添加spotlight聚光灯,模拟室内光。spotlight可以理解成一个聚光灯。 * 一般使聚光灯产生阴影效果分为以下几步: * ...原创 2019-09-19 14:54:56 · 1866 阅读 · 0 评论 -
如何在3D模型上实现太阳光照模拟?
如何在3D模型上实现太阳光照模拟?示例描述与操作指南示例效果展示实现步骤示例描述与操作指南当前示例用于模拟太阳光照效果。示例效果展示实现步骤第一步 添加屏幕炫光/** * @description: 添加一个屏幕炫光到场景,因为屏幕炫光不是实际的光源,只是一个效果,因此一般配合其他光源使用。 * 一般用此屏幕炫光来模拟太阳光源,因此配合一个平行光源...原创 2019-09-19 15:03:41 · 4187 阅读 · 0 评论 -
基于ThreeJS在三维空间中实现模型的移动与旋转
基于ThreeJS在三维空间中实现模型的移动与旋转示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例为展示构件移动与旋转效果的示例。通过简单代码,使得构件在移动的过程中自旋转。示例效果展示实现方式嵌入JavaScript中将下面一段代码写入JavaScript中,使得在模型加载完成后构件沿着某一路径移动并随之旋转// 添加模型构件移动动画,依赖tweenjs做动画,项...原创 2019-09-11 16:49:45 · 4174 阅读 · 0 评论 -
如何在三维空间中实现构件移动
如何在三维空间中实现构件移动示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例为展示构件移动效果的示例。通过简单代码,使得构件沿着某一构件坐标系往复运动。示例效果展示实现方式嵌入JavaScript中将下面一段代码写入JavaScript中,使得在模型加载完成后构件进入沿x轴往复运动的效果展示// 定义构件每次刷新移动的步长let step = 0.001;// ...原创 2019-09-11 16:55:39 · 557 阅读 · 0 评论 -
基于ThreeJS实现箭头移动与消失
基于ThreeJS实现箭头移动与消失示例描述与操作指南示例效果展示实现步骤示例描述与操作指南当前示例用于展示在三维界面中如何设置箭头沿某一特定方向移动后消失。示例效果展示实现步骤第一步 添加三维线段和图片/** * 该方法用来添加三维线段面板和图片 * @params: componentid {string} * @params: callback {functio...原创 2019-09-11 16:47:29 · 2833 阅读 · 0 评论 -
基于ThreeJS为3D模型添加贴图
基于ThreeJS为3D模型增加贴图示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示如何在三维立体构件六个面上添加贴图。示例效果展示实现方式添加贴图:在模型的多个面上添加材质图片// 改变材质种类const changeMaterial = () => { // 实例化一个加载器loader const loader = new THREE.T...原创 2019-09-11 11:23:49 · 16223 阅读 · 0 评论 -
如何对三维模型进行反选透明处理?
如何对三维模型进行反选透明处理?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南将所选构件或构件组以外的其它全部构件透明化,若未选择构件直接点击运行,则默认选择一个管道构件。使用接口getHighlightComponentsKey、transparentOtherComponentsByKey、clearHighlightList实现。示例效果展示实现步骤使...原创 2020-04-16 17:24:51 · 289 阅读 · 0 评论 -
如何对三维模型进行分类反选透明处理?
如何对三维模型进行分类反选透明处理?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南将所选构件类以外的全部构件透明化,本示例默认选中 IfcFlowController 类型构件组。其它常用的构件类型还有 IfcDoor,IfcRailing,IfcSlab,IfcFlowFitting,IfcWindow,IfcWall 等。使用接口transparentOther...原创 2020-04-16 17:28:45 · 256 阅读 · 0 评论 -
三维模型中如何展现火焰
火焰示例示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南当前示例为展示火焰效果的示例。通过简单代码,使得火焰效果展示于页面上,用户可调整火焰大小以及火焰位置在建筑物上。示例效果展示实现步骤第一步 监听点击构件监听点击构件// 监听点击构件component.on("click", function (event) { if (disabled || !pickStatus) { return; } component.rem原创 2020-07-20 17:05:04 · 658 阅读 · 0 评论 -
如何对办公区三维模型构件进行透明处理?
如何对办公区三维模型构件进行透明处理?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南以办公区模型为例,将所选构件类突出显示,将其他构件类透明化。本示例默认选中 IfcFlowSegment 类型构件。其它常用的构件类型还有 IfcDoor,IfcFlowController,IfcRailing,IfcSlab,IfcFlowFitting 等。使用接口transp...原创 2020-04-16 17:15:17 · 299 阅读 · 0 评论 -
如何对厂房类三维模型构件进行透明处理?
如何对厂房类三维模型构件进行透明处理?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南以厂房类模型为例,将所选构件类突出显示,将其他构件类透明化。本示例默认选中 IfcFlowSegment 类型构件。其它常用的构件类型还有 IfcDoor,IfcFlowController,IfcRailing,IfcSlab,IfcFlowFitting 等。使用接口transp...原创 2020-04-16 17:19:34 · 287 阅读 · 0 评论 -
如何对三维模型进行分类剖切?
如何对三维模型进行分类剖切?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南对当前模型中某一特定构件类进行剖切操作,本示例默认选中 IfcFlowSegment 类型构件组。鼠标推动六个面进行剖切。其它常用的构件类型还有 IfcDoor、IfcFlowController、IfcRailing、IfcSlab、IfcFlowFitting、IfcColumn 等。通过...原创 2020-05-07 17:39:09 · 1109 阅读 · 0 评论 -
如何对三维模型进行整体剖切?
如何对三维模型进行整体剖切?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南对当前模型进行剖切操作。鼠标推动六个面进行剖切。通过接口enableSectionBox实现。示例效果展示实现步骤通过接口enableSectionBox实现。// 点击运行触发的函数const run = () =>{ viewer3D.enableSectionBox...原创 2020-04-16 16:56:49 · 2166 阅读 · 1 评论 -
如何对住房类三维模型进行剖切?
如何对住房类三维模型进行剖切?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南以住房类模型为例,对某一特定构件类进行剖切操作,本示例默认选择 IfcFlowSegment 类型构件组。鼠标推动六个面进行剖切。其它常用的构件类型还有 IfcDoor、IfcWindow、IfcRailing、IfcSlab、IfcWall、IfcWallStandardCase 等。通过...原创 2020-04-16 16:59:54 · 385 阅读 · 0 评论 -
如何对办公区三维模型进行剖切?
如何对办公区三维模型进行剖切?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南以某一办公室模型为例,对某一特定构件类进行剖切操作,本示例默认选择 IfcWallStandardCase 类型构件组。鼠标推动六个面进行剖切。其它常用的构件类型还有 IfcDoor、IfcWindow、IfcRailing、IfcSlab 等通过接口enableSectionBox与iso...原创 2020-04-16 16:36:26 · 564 阅读 · 0 评论 -
基于threejs三维办公室如何显示线框化
办公区示例 - 线框示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南以办公区类模型为例,对所选构件类进行线框化处理,本示例默认选中 IfcWallStandardCase 类型构件组。其它常用的构件类型还有 IfcDoor、IfcWindow、IfcRailing、IfcSlab、IfcFurnishingElement等。通过接口wireFrameComponent...原创 2020-04-16 16:37:49 · 2255 阅读 · 2 评论 -
如何对厂房类三维模型进行剖切?
如何对厂房类三维模型进行剖切?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南以厂房类模型为例,对模型进行剖切操作,鼠标推动六个面进行剖切。通过接口enableSectionBox与isolateComponentsByKey实现。示例效果展示实现步骤通过接口enableSectionBox与isolateComponentsByKey实现。// 点击运行触...原创 2020-04-16 16:43:00 · 360 阅读 · 0 评论 -
如何对单一构件进行剖切?
如何对单一构件进行剖切?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南对所选中的构件进行剖切操作,鼠标推动六个面进行剖切。通过接口enableSectionBox、resetScene、与isolateComponentsByKey实现。示例效果展示实现步骤通过接口enableSectionBox、resetScene、与isolateComponentsB...原创 2020-04-16 16:49:31 · 409 阅读 · 0 评论 -
住房类三维模型如何构件聚焦?
住房类三维模型如何构件聚焦?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南以住房类模型为例,聚焦所选构件或构件组,将视点飞跃至所选构件组的较优观察位置,为方便查看将所选构件或构件组高亮显示。通过接口highlightComponentsByKey、adaptiveSizeByKey实现。示例效果展示实现步骤通过接口highlightComponentsByK...原创 2020-04-16 16:27:03 · 214 阅读 · 0 评论 -
基于ThreeJS实现3D模型上的室内灯光效果模拟
基于ThreeJS实现3D模型上的室内灯光效果模拟示例描述与操作指南示例效果展示实现步骤示例描述与操作指南当前示例用于展示室内灯光的多角度光影效果。示例效果展示实现步骤第一步 创建聚光灯/** * @description: 添加spotlight聚光灯,模拟室内光。spotlight可以理解成一个聚光灯。 * 一般使聚光灯产生阴影效果分为以下几步...原创 2019-09-11 11:26:44 · 6136 阅读 · 1 评论 -
如何在3D模型中增加天空盒?
如何在3D模型中增加天空盒?示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示如何在模型空间中将图片作为天空盒加载,让模型看上去更生动,真实。示例效果展示实现方式加载天空盒:在当前示例中,我们展示了如何将图片作为天空盒加载// 添加天空盒背景图片const addBackgroundImage = () =>{ // 创建一个three的正方体材质加...原创 2019-09-11 11:25:38 · 833 阅读 · 0 评论 -
基于ThreeJS修改模型材质
基于ThreeJS修改模型材质示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示如何在模型上改变构件的材质。材质和几何体构成网格,决定几何体是否像金属,透明与否,是否展示线框。常见材质包括:1、基础材质 MeshBasicMaterial : 对光照无感,给几何体一种简单的颜色或显示线框。2、兰伯特材质 MeshLambertMaterial :这种材质对光照有反应...原创 2019-09-11 11:24:47 · 10999 阅读 · 0 评论 -
如何在IFC模型上添加三维球状标签?
如何在IFC模型上添加三维球状标签?示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示如何在三维构件上端添加球状标签。示例效果展示实现方式// 添加三维圆形标签const addBallMarker = (componentId) =>{ /** * 该方法用来添加三维圆形标签 * @params: componentid {string...原创 2019-09-11 11:21:35 · 217 阅读 · 0 评论 -
基于ThreeJS实现箭头单向移动
基于ThreeJS实现箭头单向移动示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示在三维界面中如何设置箭头沿某一特定方向移动。示例效果展示实现方式箭头沿y轴移动// 箭头移动函数const moveArrows = () => { let posSrc = {pos: 0}; // 初始化一个动画需要更新的值,tweenjs使用 // 每次更新...原创 2019-09-11 11:20:28 · 3145 阅读 · 0 评论 -
在三维空间中实现模型旋转
在三维空间中实现模型旋转示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例为展示构件自旋转效果的示例。通过简单代码,使得构件围绕当前构件的构件坐标的某一坐标轴进行旋转。示例效果展示实现方式嵌入JavaScript中将下面一段代码写入JavaScript中,使得在模型加载完成后构件进入自旋转的效果展示// 动画函数const animate = () => {...原创 2019-09-11 16:51:41 · 1595 阅读 · 0 评论 -
在3D模型空间中加入三维标签字体
在3D模型空间中加入三维标签字体示例描述与操作指南示例效果展示实现方式示例描述与操作指南当前示例用于展示如何在三维构件某一位置上添加三维字体。示例效果展示实现方式在构件选定位置处添加三维字体// 添加三维字体const addText = (content, componentId) => { /** * 该方法用来通过给出内容加载出来3d字体,暂不支持中文 ...原创 2019-09-11 11:22:45 · 456 阅读 · 0 评论 -
三维模型如何聚焦构件?
三维模型如何聚焦构件?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南聚焦所选构件,将视点飞跃到适合构件的观察位置。示例效果展示实现步骤聚焦所选构件,将视点飞跃到适合构件的观察位置。若未选中构件,则聚焦默认构件并会将默认构件高亮。// 点击运行触发的函数const run = () =>{// 如果用户点击了构件,则把选中的构件id赋值给defaul...原创 2020-04-16 16:04:55 · 293 阅读 · 0 评论 -
如何对三维模型构件聚焦且做高亮处理?
如何对三维模型构件聚焦且做高亮处理?示例描述与操作指南示例效果展示实现步骤相关示例相关接口示例描述与操作指南聚焦所选构件,为方便查看将所选构件高亮显示。通过接口highlightComponentsByKey与adaptiveSizeByKey实现。通过接口通过key将构件设置为高亮与将视图缩放到指定构件的大小实现。示例效果展示实现步骤通过接口highlightComponents...原创 2020-04-16 16:13:22 · 441 阅读 · 0 评论