NFS服务防火墙放行端口

配置NFS服务

虚拟机CentOS系统版本信息：

[root@nfs-client ~]# cat /etc/redhat-release 
CentOS Linux release 7.4.1708 (Core) 
[root@nfs-client ~]# 
[root@nfs-client ~]# uname -r
3.10.0-693.el7.x86_64
[root@nfs-client ~]# 
[root@nfs-client ~]# uname -m
x86_64
[root@nfs-client ~]# uname -n

客户端使用showmount -e 服务器ip 查看共享目录

出现报错：
clnt_create: RPC: Port mapper failure - Unable to receive: errno 113 (No route to host)
原因：服务器端防火墙没有开启nfs服务对应的端口
方法1：实验环境，关闭防火墙
方法2：开启NFS端口
1)服务器开启111和2049端口，111为rpcbind对应端口，2049为nfsd对应端口
firewall-cmd --permanent --add-port=2049/tcp
firewall-cmd --permanent --add-port=2049/udp
firewall-cmd --permanent --add-port=111/tcp
firewall-cmd --permanent --add-port=111/udp
firewall-cmd --reload

2)编辑/etc/sysconfig/nfs 修改默认端口，在末尾添加以下内容：
RQUOTAD_PORT=30001
LOCKD_TCPPORT=30002
LOCKD_UDPPORT=30002
MOUNTD_PORT=30003
STATD_PORT=30004

3)开启添加的端口

firewall-cmd --permanent --add-port=30001/tcp
firewall-cmd --permanent --add-port=30001/udp
firewall-cmd --permanent --add-port=30002/tcp
firewall-cmd --permanent --add-port=30002/udp
firewall-cmd --permanent --add-port=30003/udp
firewall-cmd --permanent --add-port=30003/tcp
firewall-cmd --permanent --add-port=30004/tcp
firewall-cmd --permanent --add-port=30004/udp
firewall-cmd --reload

4)重启服务
systemctl restart nfs

5)客户端查看服务器共享目录
[root@nfs-client ~]# showmount -e 192.168.172.190
Export list for 192.168.172.190:
/data 192.168.172.0/24

大年初一，感恩我生命中的每一个人！

欢天喜地迎新年，

开开心心过牛年。

大年初一，新年第一天，

感恩生命里出现的每一个人，

给我关爱和温暖，

精彩了我的人生，

充盈了我的生活。

1、感谢父亲母亲

给我们生命的，是他们，

把我们养大的，是他们。

为我们付出所有，

不求回报的也是他们。

出门在外，他们千万次叮嘱，

逢年过节，他们无数次盼望，

缺钱的时候，他们毫不犹豫给你，

有事的时候，他们竭尽全力帮你。

是我们永远的依靠，

是我们坚实的后盾。

感恩父母，

用无私的父爱母爱，

为我们付出了一生。

如今我们长大，他们也老了，

一定要对他们好好尽孝，

父母在，人生尚有归处，

请珍惜这份难得的幸福。

2、感谢兄弟姐妹

世上有一种人，

陪我们一起长大，却也会拌嘴吵架，

同我们一起经历，却也会动怒生气。

和我们有同一个父母，

血脉相连，割舍不断，

他们就是兄弟姐妹。

感谢兄弟姐妹，

让我们体会什么叫手足情深，

让我们明白什么叫血浓于水。

虽然长大后各自成家，不能朝夕相处，

但这份手足情永远不会变！

3、感谢知心爱人

于千万人之中遇见你，

才知何为心动，才懂何为爱情。

初识时脸红心跳，

相爱时幸福甜蜜，

分开时朝思暮想。

因为爱他，心里全是他，

因为被爱，今生只有他。

感谢知心爱人，

给我们真心疼爱，

与我们一生相伴。

让我们体会被宠爱的感觉，

让我们感受被深爱的幸福。

今生成为眷属，实属不易，

彼此好好珍惜，不离不弃。

4、感谢真心朋友

世上有一种人，

与我们没有任何血缘关系，

却对我们真诚又照顾。

你有苦楚，会告诉他们，

你有委屈，向他们倾诉，

他们对你好，也会捉弄你，

他们帮你忙，也会开玩笑。

这种人，就是朋友。

感谢所有的真心朋友，

生命中有你们，是我的荣幸。

有你们安慰，我就不再伤心，

有你们包容，我就不再委屈。

感谢你们对我这么好，

愿我们能做一辈子的好朋友！

5、感谢亲亲宝贝

亲爱的宝贝，

今生有幸成为你们的父母，

虽然很辛苦，但也幸福，

虽然很疲惫，但很开心。

你们如纯洁的天使，

带给我们太多的欢乐，

是我们最爱的宝贝。

亲爱的孩子，

父母不求你们有多成功，

只希望你们能健康成长。

我们不求你们有多优秀，

只希望你们能无虑无忧，

开开心心的过完每天，

平安快乐的度过此生。

6、感谢辛苦的自己

世上有一个人，

从始至终陪着我们，

风雨与我们共闯，苦累与我们共担，

坎坷与我们同走，酸甜与我们共尝。

知我们的苦楚辛酸，

懂我们的种种不易，

疼我们的疲惫委屈。

对我们不离不弃，从不嫌弃，

这个人，就是自己。

感谢辛苦的自己，

一路风雨，坚持到底，

无畏无惧，从未放弃。

摔倒了，快速爬起，

流完泪，照样微笑。

新的一年，

愿努力的自己，有收获，

愿辛苦的自己，更幸福。

大年初一，新年第一天，

祝福我们的家人和朋友，

在新的一年里：

健康平安，幸福美满！

今后的日子，我们一路同行，

不离不弃，相伴到底！

陈春花：如何让自己不被替代？

导读：未来充满诸多不确定和挑战，这导致“职场焦虑”频频出现。如何让自己在工作中更有价值，是我们每个人都要思考的问题。

人工智能不断地演进和优化，机器人“军团”来势汹汹，我们不禁担心，自己会被机器智能取代吗？

职场中的女性工作者需要兼顾家庭与工作、身体承受力与工作强度、个人兴趣与责任，还有公众评价与社会习俗等等。作为女性，应该如何培养自我的领导力，获得更好的发展？

对于以上大家提出的这两个问题，我尝试做出解答。

01

只要愿意行动，机器永远无法取代你

在数字技术驱动的智能时代，有一种观点认为，机器人会抢走很多人的饭碗，但我反而不太担心。

我并不担心机器人能像人一样思考，我担心的是人像机器人那样去思考。

我在教组织行为学时，跟学生们讨论过一个话题：如果未来有一天，在工作场景中，大部分的工作都是由机器人来做，这时对组织管理来说，我们一定要做的一件事就是怎么让人有价值。

这既是组织讨论的话题，也是个体讨论的话题。

回到我前面谈到的，为什么我不担心？我希望大家能够理解到，有两件事情是机器替代不了你的：

第一，你的个性。“个性”是动词，是一个变量。你如果不断地去变化，不断地去调整，没有人可以替代和模仿的，因为这是一种特殊的属性。

第二，你的能力。关于能力，我原来在企业任职时带领员工去变革，就跟同事们谈了我对能力的认知。我认为能力的含义有三层：

1. 能力是一种可能性。它其实没有边界，比如你的能力到底到什么程度，我不能给你下定义，我希望你自己也不要下定义。你的能力一定是没有边界的，你只要不断尝试，能力就会不断地被呈现出来。

2. 能力是知行合一。能力是通过“做”来体现的，如果不做，没人知道你有什么能力，连你自己也不知道。你只要去做，肯定就会有能力。

3. 能力是韧性和速度。什么叫韧性和速度？就是你要不断地推动自己向前走。你停留下来了，能力也就停留下来了；你不坚持，能力也会失去。

人有一个最独特的能力就是与时俱进。如果说这个时代，机器人在各个行业呈现的特别多，我相信人就有能力找到一种跟机器人互动或者共同工作的方式；如果说机器人能胜任很多工作，我相信人就一定能找到他自己生存的空间和解决这些问题的方法。

02

岗位只有职责，没有性别

有很多人关注女性在工作上的竞争力，认为女性会比较弱势。

从管理的角度看，我们到了一定的岗位之上，其实只有责任没有性别。这个岗位不会讨论你的性别是什么，只讨论你可不可以把这个责任担当下来。

对于职场中的女性领导者，我试着给大家一些建议。

《哈佛商业评论》的一项调查研究表明，在大多数的工作场所中，女性更愿意帮助别人解决他们遇到的困惑。相反，男性为了不耽误自己个人绩效的完成，不愿意花费多余的时间帮别人解决问题。我们可以从多个角度去理解这项调查的结果，其中一个视角是，男性更愿意个人成功，而女性更愿意合作。

但是，我想大家从另外一个视角去理解，那就是，女性也许无意中忽略了成就自我领导力的培养。

我从事教育30多年，跟踪了一些学生持续10多年的职业发展，也有一些我自己的观察结论。在我看来，女性在职业发展中，特别需要注重自我领导力的培养和提升，让自己成为一位卓越的领导者。

如何才能做到这一点？我建议大家在以下几个方面做出努力。

1. 要有良好的定力

通常情况下，职场中女性的角色比较模糊，一方面，人们希望她们承担职责，具有职业性；另一方面，人们又希望她们显示出女性的特征，凡事谦让，配合和甘于服从。

在职业发展上的角色认知模糊，也是女性从业者自己的困顿，于是，辅助者、服务者、执行者的角色常常落在女性身上。甚至女性从业者自己也从清晰的目标中，变得越来越不自信，直至退让以至于停滞不前。

其实，对于组织而言，角色是与责任相对应的，与性别没有关联。当女性进入领导角色的时候，请一定要理解这一点，组织选择你，并不是因为你是女性，而是因为你可以胜任责任。所以你要有定力去承担责任，而不是纠结于自己是否是女性。

女性要成为领导者，必须融入领导的责任。你所要关注的就是围绕责任去成就自己的角色。这是一个不断进化的过程，需要依靠你的定力和坚定的行动，以及明确的责任来表现你的领导力。

2. 懂得确信的力量

女性在一些情形下，比较会出现犹豫、质疑或者难以下判断的情形。其实，如果你可以懂得确信的力量，这些情形就会减少很多。

确信是指在不确定中寻求确定性，是指可以有解决问题的路径与方法，有可依靠的人，有目标和价值观牵引。正因为此，确信可以帮助领导者去面对质疑与犹豫，可以帮助领导者获得支持与肯定。

如果不能拥有一种确信的力量，确信你有能力去接受正确的东西，你就很难成为一个好的领导者。

3. 训练思辨的能力

思辨力之所以重要，是因为它可以帮助人获得独立判断却又可以保持有效的对话。有效的未来领导者需要能够在复杂性与冲突挑战中独立做出判断，不会人云亦云，也不会固守偏执，同时能够寻找到合理性。

具备思辨力的人，在探讨一个观点时，会很自然地去怀疑、审视，然后用证据来证明观点的逻辑性或者事实性，或者寻找数据来证明观点的合理性。他们不会盲从地相信一个观点，哪怕这个观点是一个权威专家提出来的。他们会遵循客观规律并寻求事物的本质，从而在纷繁变化中不至于迷失。

思辨力首先是抽象思维的能力，也就是概念化的能力。从管理的本身看，没有概念能力是无法真正成为领导者并引领变化的。因为管理者真正重要的就是找出真正的问题，并做出认知判断。论证真正的问题，说服大家接受并能给出解决方案，而不是习惯性去分辨对错、作出评价。

同时，领导者需要有能力处理复杂性的问题，把复杂问题简单化，从而引领组织成员去达成目标，而这种能力就是思辨力训练而成概念化能力。

使用ThreeJs搭建BIM模型浏览器-第十步 加载优化

最近在尝试了新的传输方式。不过对QModel而言，影响不是很大，因为QModel这个产品只有首次加载是需要从服务器下载模型数据的。

 

首先，把原本的模型文件拆分成多份了。原本只有一个zip数据压缩包，现在改为在服务端拆解为N份，根据构件数量每500个压缩为一个包，同时把数据转换为utf8array.然后生成一个索引文件A。

前端首先请求索引文件A。得到数据包的数量，然后进入本文重点。

主线程根据解析索引文件，知道了一共有N个数据包，然后开始启用worker下载。如下

主线程代码：

 


    


        


            


            

        

        


            

                var worker = new Worker("worker.js");
            

        

    

    


        


            


            

        

        


            

                worker.postMessage({m: 模型N}); //向worker发送数据 
            

        

    

    


        


            


            

        

        


            

                worker.onmessage = function(evt) { //接收worker传过来的数据函数 
            

        

    

    


        


            


            

        

        


            

                var resulti = JSON.parse(evt.data);
            

        

    

    


        


            


            

        

        


            

                //开始解析resulti 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

 

然后创建一个worker.js，多线程进行传输并解压。

 


    


        


            


            

        

        


            

                onmessage = function(evt) {
            

        

    

    


        


            


            

        

        


            

                JSZipUtils.getBinaryContent( "数据包N.zip", {
            

        

    

    


        


            


            

        

        


            

                callback: function(err, data) {
            

        

    

    


        


            


            

        

        


            

                var zipdata = new JSZip(data);
            

        

    

    


        


            


            

        

        


            

                var filei = zipdata.file("数据包N.json");
            

        

    

    


        


            


            

        

        


            

                postMessage(filei.asText());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

实际效果如下图

 总结：

1、由于个人服务器原因，带宽就那么大，一个线程跑满和10个线程同时下载，完全没有效率的差异。所以下载起来是一样的。需要硬件支持才体现出传输的优化。

2、数据解析放到线程里面，确实会提升一些效率。

3、下一步优化，可以考虑在worker里面直接把数据转换成Utf8Array或者ArrayBuffer，PostMessage是可以移交这一类对象的控制权的。

原文https://blog.csdn.net/ztz87

使用ThreeJs搭建BIM模型浏览器，第九步-性能优化(2)

感谢网友给的建议。

我之前一直是使用threejs的102dev版本，以为geometry共享了就行了，但是这并不是threejs里面所说的Instance。在新的threejs版本中，新增加了几个很有意思的Instance类，这里重点挑InstancedMesh来说。InstancedMesh与使用一个geometry共享创建出Mesh是不一样的，InstancedMesh最终达到的效果是一次Drawcall，而共享geometry创建出来的Mesh并无此效果，效率跟不共享创建Mesh渲染性能上没有太大区别，只是可能会省点内存。

InstancedMesh是R110之后出现
官网简介：
A special version of Mesh with instanced rendering support. Use InstancedMesh if you have to render a large number of objects with the same geometry and material but with different world transformations. The usage of InstancedMesh will help you to reduce the number of draw calls and thus improve the overall rendering performance in your application.
大量相同的几何，会减少绘图调用的次数，大量提高页面性能；

参考文档：

http://www.qmodel.cn/threejs/three/docs/index.html#api/en/objects/InstancedMesh

查看示例：

http://www.qmodel.cn/threejs/three/examples/?q=instanc#webgl_instancing_raycast

用法：

    


        


            


            

        

        


            

                var geometry = new THREE.SphereBufferGeometry( 0.2 );
            

        

    

    


        


            


            

        

        


            

                var material = new THREE.MeshPhongMaterial( { flatShading: true } );
            

        

    

    


        


            


            

        

        


            

                var amount=80
            

        

    

    


        


            


            

        

        


            

                var count=amount*amount*amount;
            

        

    

    


        


            


            

        

        


            

                var mesh = new THREE.InstancedMesh( geometry, material, count );
            

        

    

    


        


            


            

        

        


            

                var i = 0;
            

        

    

    


        


            


            

        

        


            

                var offset = ( amount - 1 ) / 2;
            

        

    

    


        


            


            

        

        


            

                var transform = new THREE.Object3D();
            

        

    

    


        


            


            

        

        


            

                for ( var x = 0; x < amount; x ++ ) {
            

        

    

    


        


            


            

        

        


            

                for ( var y = 0; y < amount; y ++ ) {
            

        

    

    


        


            


            

        

        


            

                for ( var z = 0; z < amount; z ++ ) {
            

        

    

    


        


            


            

        

        


            

                transform.position.set( offset - x, offset - y, offset - z );
            

        

    

    


        


            


            

        

        


            

                transform.updateMatrix();
            

        

    

    


        


            


            

        

        


            

                mesh.setMatrixAt( i ++, transform.matrix );
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                scene.add( mesh );
            

        

    

点击获取InstancedId，官方示例

    


        


            


            

        

        


            

                // move
            

        

    

    


        


            


            

        

        


            

                function onMouseMove( event ) {
            

        

    

    


        


            


            

        

        


            

                event.preventDefault();
            

        

    

    


        


            


            

        

        


            

                mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            

        

    

    


        


            


            

        

        


            

                mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // render
            

        

    

    


        


            


            

        

        


            

                function render() {
            

        

    

    


        


            


            

        

        


            

                raycaster.setFromCamera( mouse, camera );
            

        

    

    


        


            


            

        

        


            

                var intersection = raycaster.intersectObject( mesh );
            

        

    

    


        


            


            

        

        


            

                if ( intersection.length > 0 ) {
            

        

    

    


        


            


            

        

        


            

                // 获取当前实例的ID 索引
            

        

    

    


        


            


            

        

        


            

                var instanceId = intersection[ 0 ].instanceId;
            

        

    

    


        


            


            

        

        


            

                // 根据当前的索引 获取当前的矩阵
            

        

    

    


        


            


            

        

        


            

                mesh.getMatrixAt( instanceId, instanceMatrix );
            

        

    

    


        


            


            

        

        


            

                // 更新矩阵
            

        

    

    


        


            


            

        

        


            

                matrix.multiplyMatrices( instanceMatrix, rotationMatrix );
            

        

    

    


        


            


            

        

        


            

                // 设置拾取当前几何的矩阵
            

        

    

    


        


            


            

        

        


            

                mesh.setMatrixAt( instanceId, matrix );
            

        

    

    


        


            


            

        

        


            

                // 更新矩阵
            

        

    

    


        


            


            

        

        


            

                mesh.instanceMatrix.needsUpdate = true;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                renderer.render( scene, camera );
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

实际测试性能效率，当使用InstancedMesh时，如上述代码。如果使用的是Mesh，我的渣渣电脑已经渲染不出来了。

 

如何解决使用InstancedMesh后，构件选择的问题？通过射线相交，可以取到Instance实例的索引ID，可使用ID来找到对应的构件。大家多看官方示例代码就可以了。

补充一点思路，如果网友有更好的方案也欢迎留言。

隐藏构件，把矩阵设置为0矩阵隐藏某个instanceId,0矩阵为[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,]

选择构件：可以考虑把InstancedMesh的geometry和被Pick到的Matrix构造一个新的InstancedMesh放在对应的位置，材质替换为高亮选中的材质，且把原来的Matrix设置为0矩阵，则实现隐藏。实际上目前120版本，Mesh和InstancedMesh还是有不少BUG的，建议全部使用InstancedMesh。

透明度和颜色设置：与选择构件同理，不过考虑到还原操作，对数据的管理会更复杂一些。这里会特征一些内存，效率上也有所降低，最终效果如何，全看编码人员的控制力了。

 

Merge之后也可以实现Drawcall的减少，且可以实现不同材质的合并。我就尝试过把一整个建筑模型合并成一个geometry，没错，性能提升巨大，且内存锐减一半！merge可以实现不同材质的几何直接合并，但是因为group的处理，还是会拆分为多次drawcall，没有太多作用。关于merge的总结可以看一下后面的介绍。

对比geometry.merge和Instance实例化、普通Mesh。以一个5万构件的全专业（建筑、结构、给排水、暖通、电气）的住宅塔楼为例（复用率还比较高的）。

2020-9-11 

关于merge又有了新的发现。

我们来试一下常规情况，直接使用mesh加入12万个构件。渲染有多么困难，降到fps=6

无视材质的merge,看一下对比，geometry合并到8个里面，有所提升，fps=18，drawcall一次没少。

1、为什么drawcall一次没少呢？因为group没有把同材质的合并起来。由些判断drawcall跟group有关。

2、但是为什么性能会有提升？因为视锥剔除不需要计算了啊！

再进一步，把材质全都合并起来，一个geometry就一个material，会达到什么效果呢？看下图。怎么样？fps109，是不是起飞了？当然，它的不易之处在于，首先要按材质先分组，不同material的也就别合并了，技术上可行，但是合并没好处。

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

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

创建300个一样的圆，一般情况可能会写成下面这样

    


        


            


                


                

            

            


                

                    for (let i = 0; i < 300; i++) {
                

            

        

        


            


                


                

            

            


                

                    let geometry = new THREE.BoxGeometry(10, 10, 10);
                

            

        

        


            


                


                

            

            


                

                    let material = new THREE.MeshLambertMaterial({color: 0x00ffff});
                

            

        

        


            


                


                

            

            


                

                    let mesh = new THREE.Mesh(geometry, material);
                

            

        

        


            


                


                

            

            


                

                    mesh.position.set(THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200));
                

            

        

        


            


                


                

            

            


                

                    group.add(mesh);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

    

优化的方法是这样写：

    


        


            


                


                

            

            


                

                    let geometry = new THREE.BoxGeometry(10, 10, 10);
                

            

        

        


            


                


                

            

            


                

                    let material = new THREE.MeshLambertMaterial({color: 0x00ffff});
                

            

        

        


            


                


                

            

            


                

                    for (let i = 0; i < 300; i++) {
                

            

        

        


            


                


                

            

            


                

                    let mesh = new THREE.Mesh(geometry, material);
                

            

        

        


            


                


                

            

            


                

                    mesh.position.set(THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200), THREE.Math.randFloatSpread(200));
                

            

        

        


            


                


                

            

            


                

                    group.add(mesh);
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

    

注意了，大佬的博客都点到为止，不会告诉你这样的弊端，你一试就知道在BIM浏览器这样做会存在的问题！

因为所有的构件都共享了materail，你怎么实现点击选中，点击选中之后给构件赋予颜色，结果所有同类构件都被渲染成相同的颜色！因为materail是共享的，对materail改个颜色会感觉被选中了一大片。

解决思路很简单，简单到我都没代码可分享：针对选中的构件（或者要赋予颜色的构件），临时替换一个materail即可（曲线救国）！

以前每个构件的纹理材质单独创建时，可以直接赋予颜色，如下图：

现在赋予颜色可以新建一个material给它。当然material新建之后也要管理好，以免内存膨胀；旧的材质纹理要缓存起来，用于恢复默认。相当于给构件弄了个新的包装盒，旧的也别丢掉，还要用的。

Revit自带的这个模型叫做Arch Link Model.rvt，它的材质有点多，有42种，即使这样也明显节省了20%的内存。如果是机电专业，管道设备几乎不在意材质，都是通用的材质纹理，一共就不需要创建几个material,估计会有惊喜。

这是第一步内存优化，针对材质纹理的。后面还会针对Revit导出的几何体进行分析，计算相同形状的构件，以实现文件的压缩和前端的提效。

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

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

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

    


        


            


            

        

        


            

                var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
            

        

    

    


        


            


            

        

        


            

                var edges = new THREE.EdgesGeometry( geometry ,89);//大于度才添加线条
            

        

    

    


        


            


            

        

        


            

                var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
            

        

    

    


        


            


            

        

        


            

                scene.add( line );
            

        

    

 https://threejs.org/docs/index.html#api/en/geometries/EdgesGeometry

注意：如果以三角面的方式去添加边缘线，往往会出现很多问题，需要依赖正确的法向量，只针对夹角大于等于90度的面添加边缘线效果会好一些，否则线条过多，对性能负担重，效果也很乱。

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

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

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

然后在终点附近插件一个标签。插件标签的方法前面也提到了。如意门：《使用ThreeJs搭建BIM模型浏览器 第三步 浮标》

 

1，点击，当然要加起点终点的全局变量记录一下。

    


        


            


            

        

        


            

                mouseUp: function(event) {
            

        

    

    


        


            


            

        

        


            

                var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY  / window.innerHeight) * 2 + 1, 0.5);
            

        

    

    


        


            


            

        

        


            

                vector = vector.unproject(this.camera);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var raycaster = new THREE.Raycaster(this.camera.position, vector.sub(this.camera.position).normalize());
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var intersects = raycaster.intersectObjects(this.scene.children);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                console.log(intersects[0].point);//这就是焦点。
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

2，在点击始末位置画个小球：

    


        


            


            

        

        


            

                function sphere(x, y, z, color, opacity, r) {
            

        

    

    


        


            


            

        

        


            

                var sphereGeo = new THREE.SphereGeometry(r, 10, 10); //创建球体
            

        

    

    


        


            


            

        

        


            

                var sphereMat = new THREE.MeshLambertMaterial({ //创建材料
            

        

    

    


        


            


            

        

        


            

                color: color,
            

        

    

    


        


            


            

        

        


            

                wireframe: false,
            

        

    

    


        


            


            

        

        


            

                transparent: true,
            

        

    

    


        


            


            

        

        


            

                side: THREE.DoubleSide,
            

        

    

    


        


            


            

        

        


            

                opacity: opacity
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                var dwq = new THREE.Mesh(sphereGeo, sphereMat); //创建球体网格模型
            

        

    

    


        


            


            

        

        


            

                dwq.position.set(x, y, z); //设置球的坐标
            

        

    

    


        


            


            

        

        


            

                //  this.scene.add(dwq); //将球体添加到场景
            

        

    

    


        


            


            

        

        


            

                //this.mGroup.add(dwq);
            

        

    

    


        


            


            

        

        


            

                return dwq;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                sphere(point.x, point.y, point.z, 0xFF0000, 1, 0.2)
            

        

    

3，在两点之间画条线：

    


        


            


            

        

        


            

                var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
            

        

    

    


        


            


            

        

        


            

                var geometry = new THREE.Geometry();
            

        

    

    


        


            


            

        

        


            

                geometry.vertices.push(this.mp1); 
            

        

    

    


        


            


            

        

        


            

                geometry.vertices.push(sel.point);
            

        

    

    


        


            


            

        

        


            

                var line = new THREE.Line(geometry, material);
            

        

    

    


        


            


            

        

        


            

                // scene.add(line);
            

        

    

    


        


            


            

        

        


            

                //mGroup.add(line); //建议用group来放小球和线
            

        

    

4，画个标签，看之前的文章，此处略。

5，看结果

6,优化的目标，可以在MouseOver的时候尝试把点自动的定位到面的边缘，会好用很多！

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

上效果图

解决思路：

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

Revit上如何导出呢，不好意思，这次真不能贴核心代码了。。

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

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

废话不说，上图

 

关键代码

 

    


        


            


            

        

        


            

                <script src="js/controls/FlyControls.js"></script>
            

        

    

    


        


            


            

        

        


            

                //用FlyControl代替常用的OrbitControls
            

        

    

    


        


            


            

        

        


            

                controls =new THREE.FlyControls(this.camera);
            

        

    

    


        


            


            

        

        


            

                controls.movementSpeed = 100; //设置移动的速度
            

        

    

    


        


            


            

        

        


            

                controls.rollSpeed = Math.PI / 6; //设置旋转速度
            

        

    

    


        


            


            

        

        


            

                controls.autoForward = false;
            

        

    

    


        


            


            

        

        


            

                controls.dragToLook = true;
            

        

    

 

返回顶部    首页    手气不错    捐赠支持   后花园   
版权所有： 草原上的建筑- 草原上的建筑模型-玉龍之鄉    站长： 玉龙之乡   程序：emlog   蒙ICP备16004298号      sitemap