背景

在BIM运维中,消防疏散是不可或缺的一环,当发生火警的时候,触发烟感器发生报警,同时启动消防疏散,指导现场工作人员进行疏散,及时准确地显示出疏散路线对争取疏散时间尤为重要。我将介绍如何在bimface中建立消防疏散指示动画效果。

思路

第一种方式就是通过bimface自带的材质对象,结合requestAnimationFrame函数实现,具体地址见官网的水流效果。这种方式存在弊端,首先代码量相对来说比较大,要配置各种对象的参数;其次对构件有强依赖性,也就是说这种方式是对构件进行材质重写来实现的;此外这种方式的贴图是通过UV贴图实现,贴图缩放比例不好确定,需要摸索试探地确定比较合适的参数,第二种方式是直接通过threejs来实现,相对于第一种方式而言,无需太多的代码,直奔主题,最重要的是不依赖构件(实际上是自己创建了Mesh),也就是说没有构件同样可以实现上述效果,最重要的是不用再摸着石头贴图了,自己能够掌握贴图的规律。本文中采用第二种方式来实现疏散效果,其实思路很简单,无非是创建Mesh,然后给Mesh贴上带箭头的图片,完成贴图后动态地修改贴图的偏移量(offset),就实现了箭头动画效果。

实践

首先来制作材质,因为路线由若干个PlaneBufferGeometry组成,所以每一个都要进行贴图操作,其实除了图片在PlaneBufferGeometry上的分布个数不一致,其他的参数都是一致的,所以要结合图片的大小和PlaneBufferGeometry的长度来动态计算每个PlaneBufferGeometry上材质需要重复的次数。将创建的材质放入集合中是为了后续在执行动画时,可以针对每一个材质进行偏移量的修改,代码如下:

//声明存储材质的集合
var textureCollection = [];
function generateMaterial(repeat) {
var basicMaterial = new THREE.MeshBasicMaterial();
texture = new THREE.TextureLoader().load('images/icon_arrow_right_pow.png', function (map) {
basicMaterial.map = map;
basicMaterial.wireframe = false;
basicMaterial.needsUpdate = true;
basicMaterial.transparent = true;
basicMaterial.side = THREE.DoubleSide;
});
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.x = repeat;
textureCollection.push(texture);
return basicMaterial;
}

有了材质,还需要创建若干个Mesh,因为疏散路线是由一个一个的长条矩形组成,所以选择用平面PlaneBufferGeometry来制作,材质使用箭头图片进行贴图。代码如下:


/**
* @param {若干Mesh的集合,每个Mesh结构如下} planeArray
*
* @param {构件最小点世界坐标} min_position
* @param {构件最大点世界坐标} max_position
* @param {构件方向,上下左右以此对应(1,-1,2,0)} direction
*/
function loadPlane(planeArray) {
// 标准宽度
const statndardWidth = 500;
// 用于计算标准图片重复个数
const statndardRepeat = 600;
// 指定默认角度
const rotate = Math.PI / 2; var planeGroup = new THREE.Group();
// 思路一:仅用最大点进行定位(目前采用)
// 思路二:用最大点和最小点进行定位
for (let k = 0, l = planeArray.length; k < l; k++) {
let l = position_x = position_y = 0;
//区分横向和纵向
if (planeArray[k].direction === 1 || planeArray[k].direction === -1) {
l = Math.floor(planeArray[k].max_position.y - planeArray[k].min_position.y);
position_x = planeArray[k].max_position.x - (statndardWidth / 2);
position_y = planeArray[k].max_position.y - (l / 2); } else {
l = Math.floor(planeArray[k].max_position.x - planeArray[k].min_position.x);
position_x = planeArray[k].max_position.x - (l / 2);
position_y = planeArray[k].max_position.y - (statndardWidth / 2);
} let _material = generateMaterial(Math.floor(l / statndardRepeat));
let planeGeometry = new THREE.PlaneBufferGeometry(l, statndardWidth, 100, 50);
let plane = new THREE.Mesh(planeGeometry, _material);
plane.position.x = position_x;
plane.position.y = position_y;
plane.position.z = planeArray[k].max_position.z + 10;
plane.rotation.z = rotate * planeArray[k].direction;
planeGroup.add(plane);
}
viewer.addExternalObject("planeGroup", planeGroup);
viewer.render();
}

目前形状和材质都已经建立完成,整个场景还是静态的,由箭头组成的平面形状集合,下一步是让这些箭头跑起来,思路就是在渲染的时候动态修改材质的offset,代码如下:

function animate() {
animationId = requestAnimationFrame(animate);
for (let m = 0, len = textureCollection.length; m < len; m++) {
textureCollection[m].offset.x += 0.005;
}
viewer.render();
}

使用方式,只需要将mesh对应的包围盒最大点和最小点(用于确定位置)以及箭头方向(用于确定箭头流向)的参数放在数组中传入loadPlane函数,然后调用animate函数即可实现疏散效果,代码如下:

let planeArray = [];
const UP = 1;
const DOWN = -1;
const LEFT = 2;
const RIGHT = 0; let a = { min_position: { x: -10432.83984375, y: 20233.87109375, z: 15 }, max_position: { x: -9932.83984375, y: 26744.16796875, z: 40 }, direction: UP };
let b = { min_position: { x: -14117.83984375, y: 28943.8671875, z: 15 }, max_position: { x: -12812.83984375, y: 29443.8671875, z: 50 }, direction: RIGHT };
let c = { min_position: { x: -7591.01171875, y: 27244.16796875, z: 15 }, max_position: { x: -7091.01171875, y: 33333.8671875, z: 20 }, direction: UP }; planeArray.push(a);
planeArray.push(b);
planeArray.push(c); loadPlane(planeArray);
animate();

效果

以下是结合真实模型的疏散路线效果

如有描述不当之处,还请不吝赐教。

作者:悠扬的牧笛
地址:https://www.cnblogs.com/xhb-bky-blog/p/12521888.html
声明:本博客原创文字只代表本人工作中在某一时间内总结的观点或结论,与本人所在单位没有直接利益关系。非商业,未授权贴子请以现状保留,转载时必须保留此段声明,且在文章页面明显位置给出原文连接。

【BIM】BIMFACE中创建疏散效果的更多相关文章

  1. 【BIM】BIMFACE中创建雾化效果

    背景 在BIM运维场景初始化的时候,一般都是首先将整个运维对象呈现在用户面前,例如一座大厦.一座桥梁.一个园区等等,以便于用户进行总览,总体把握运维对象,如果这个宏大的场景边界过于清晰,与背景融合也不 ...

  2. 【BIM】BIMFACE中创建矢量文本[下篇]

    背景 在上一篇文章中,我们通过THREEJS创建了矢量文本,并添加到了BIMFACE场景中,但是仅仅加入到场景中并不是我们的目的,我们的目的是把这种矢量文本加到指定的构件或者空间上,以此标识该构件或空 ...

  3. 【BIM】BIMFACE中创建矢量文本

    背景 在三维模型产品的设计中,针对空间的管理存在这样一个普遍的需求,那就是在三维模型中,将模型所代表的空间通过附加文本的方式来展示其所代表的实际位置或功能,之前尝试过若干方式,比如直接在建模的时候,将 ...

  4. 【BIM】BIMFACE中实现电梯实时动效

    背景 在运维场景中,电梯作为运维环节重要的一部分是不可获缺的,如果能够在三维场景中,将逼真的电梯效果,包括外观.运行状态等表现出来,无疑是产品的一大亮点.本文将从无到有介绍如何在bimface中实现逼 ...

  5. SQL Server 在多个数据库中创建同一个存储过程(Create Same Stored Procedure in All Databases)

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 遇到的问题(Problems) 实现代码(SQL Codes) 方法一:拼接SQL: 方法二: ...

  6. m.jd.com首页中的js效果

    m.jd.com中的部分js效果 昨天把m.jd.com的首页布局写好了,今天写一下首页中部分js效果.头部背景色透明度的改变,焦点图轮播,京东快报的小轮播,以及秒杀倒计时.这里html,css样式就 ...

  7. 如何在MFC中创建非矩形button

    一般情况下,我们创建的按钮都是矩形的,但有时为了满足特殊的需求,我们要在对话框中创建一个非矩形的按钮,比如,圆形,椭圆等. 要实现一个非矩形的按钮,这就涉及到了自绘控件.自绘控件的方法有很多,可以参考 ...

  8. Sticker.js – 帮助你在网站中加入贴纸效果

    Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果.没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作.下面有简单的使用示 ...

  9. ASP.NET 5系列教程 (六): 在 MVC6 中创建 Web API

    ASP.NET 5.0 的主要目标之一是统一MVC 和 Web API 框架应用. 接下来几篇文章中您会了解以下内容: ASP.NET MVC 6 中创建简单的web API. 如何从空的项目模板中启 ...

随机推荐

  1. JDK java version "1.8.0_181"环境搭建

    1.从官网上下载jdk软件,本人的系统是32位 WIN10 所以只能装1.8.0_181的了.x86 2.下载完就按照提示安装就可以了,傻瓜式操作就不多说了. 3.配置环境环境变量 3.1 点击我的电 ...

  2. 因为我说:volatile 是轻量级的 synchronized,面试官让我回去等通知!

    因为我说:volatile 是轻量级的 synchronized,面试官让我回去等通知! volatile 是并发编程的重要组成部分,也是面试常被问到的问题之一.不要向小强那样,因为一句:volati ...

  3. C语言格式化输出

    1.%d 十进制有符号整数int. 2.%u 十进制无符号整数. 3.%ld 输出long整数 . 4.%s 字符串. 5.%c 单个字符. 6.%p 指针的值. 7.%e 指数形式的浮点数. 8.% ...

  4. 两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走 (不加flex不自动撑开)

    两个div,高度都是100% 用 display:flex; 和 min-height 一边撑高了,另一边自动走

  5. 洛古 P1312 Mayan游戏(dfs+剪枝)

    题目链接 这道题和俄罗斯方块很像 很明显,我们可以看出这是一个dfs,但是,我们需要几条剪枝: 1.如果只剩下1个或2个同样颜色的方块,那么直接退出 2.相同的块不用交换 3.注意优先性,优先左边换右 ...

  6. Quantitative Proteomics of Enriched Esophageal and Gut Tissues from the Human Blood Fluke Schistosoma mansoni Pinpoints Secreted Proteins for Vaccine Development (解读人:张聪敏)

    文献名:Quantitative Proteomics of Enriched Esophageal and Gut Tissues from the Human Blood Fluke Schist ...

  7. BookStore示例项目---菜单栏UI分析

    部署 参照 ABP示例项目BookStore搭建部署 项目解构 1).动态脚本代理 启动项目时,默认会调用两个接口 /Abp/ApplicationConfigurationScript /Abp/S ...

  8. TensorFlow 趣题

    checkpoint 文件夹 Tensorflow训练后的模型可以保存checkpoint文件,checkpoint文件是结构与权重分离的四个文件,便于训练. 1)checkpoint 文件 保存断点 ...

  9. 结构化学习(Structured Learning)

    本博客是针对李宏毅教授在youtube上上传的Machine Learning课程视频的学习笔记.课程链接 目录 引入 线性模型 结构化SVM 给序列贴标签 引入 我们之前学习到的学习模型的输入与输出 ...

  10. vue2.0开发环境下解决跨域问题

    1.找到vue 项目下的配置文件 /config/index.js 2.找到 proxyTable 配置项 proxyTable: { '/api': { target: 'http://www.xx ...