使用ThreeJs搭建BIM模型浏览器,第九步-内存优化(1)

添加到场景的mesh,是通过geometry+materail生成的。如果场景内大量重复的构件,或者大量的构件的材质都是相同的,threejs提供这种方案节省内存:共享geometry 和materail。举例说明:

...阅读全文→


玉龙之乡 发布于 2020-10-16 15:06

使用ThreeJs搭建BIM模型浏览器,第八步-边缘线

这个辅助线条,一般称为辅助线,类似草图里的草稿线条。下面分别是有线条和没有线条的对比。

在Threejs对面的边缘添加线条,其实很简单。可以从官方示例中找到。

...阅读全文→


玉龙之乡 发布于 2020-10-16 15:05

使用ThreeJs搭建BIM模型浏览器,第七步-测量

前面说到构件选择,实现了点击时与界面记录的焦点。《使用ThreeJs搭建BIM模型浏览器,第二步-构件选择》

主要的实现思路是:通过一个全局标记,记录前一次点击(作为起点)和后一次点击(作为终点),求两点之前的距离。

...阅读全文→


玉龙之乡 发布于 2020-10-16 15:05

使用ThreeJs搭建BIM模型浏览器 第六步 纹理贴图(材质)

上效果图

解决思路:

Threejs上没啥好说的。看郭老师的博客:http://www.yanhuangxueyuan.com/Three.js_course/texture.html

Revit...<span class="readmore"><a href="http://liangzhidong.cn/?post=156">阅读全文&rarr;</a></span>

玉龙之乡 发布于 2020-10-16 15:02

使用ThreeJs搭建BIM模型浏览器 第五步 漫游

基础的键盘操作漫游其实很好解决。Threejs有一个FlyControl这个控制器,就是完成键盘操作的。

废话不说,上图

&nbsp;

关键代码

&nbsp;

...阅读全文→


玉龙之乡 发布于 2020-10-16 15:01

使用ThreeJs搭建BIM模型浏览器 第四步 剖切

技术方案:threejs的剖切,是由renderer.clippingPlanes实现的。

...阅读全文→


玉龙之乡 发布于 2020-10-16 15:01

使用ThreeJs搭建BIM模型浏览器 第三步 浮标

实现效果如下。不用纠结UI为什么很面熟,因为我从某大品牌抄过来的,哈哈。

实现原理呢,

第一步,获取鼠标点击。

第二步,计算交插点。(这里要注意,如果是剖切之后,被剖切部分要舍弃,否则标记在隐藏构...<span class="readmore"><a href="http://liangzhidong.cn/?post=153">阅读全文&rarr;</a></span>

玉龙之乡 发布于 2020-10-16 15:00

使用ThreeJs搭建BIM模型浏览器,第二步-构件选择

构件选择其实是鼠标点选的二维坐标与Canvas上的视角方向做射线投影,所穿过的所有构件,第1个即为点选。

以下为代码逻辑。部分变量可以根据您的需要,修改成你的变量。点击后把构件设置为半透明。

如果有需要,还可...<span class="readmore"><a href="http://liangzhidong.cn/?post=152">阅读全文&rarr;</a></span>

玉龙之乡 发布于 2020-10-16 14:59

使用ThreeJs搭建BIM模型浏览器,第一步-显示

threejs既然能够通过三角面构造mesh,肯定是能够通过面片构造出几何模型。各个功能模块的核心代码,在我后续的博客中会一一列举公布出来。

实现思路:

1、从Revit中导出族名称+构件三角面+构件属性的J...<span class="readmore"><a href="http://liangzhidong.cn/?post=151">阅读全文&rarr;</a></span>

玉龙之乡 发布于 2020-10-16 14:58

使用ThreeJs搭建BIM模型浏览器 QModel的诞生记

QModel模型浏览器展示页面:QModel链接入口,支持Revit文件上传,在Web端浏览,并集成与模型相关的业务。

首先关于笔者的介绍:

2010年机缘巧合进行建筑信息化行业,当时主要还是在做工程造价相关...<span class="readmore"><a href="http://liangzhidong.cn/?post=150">阅读全文&rarr;</a></span>

玉龙之乡 发布于 2020-10-16 14:57