这一篇书接上文,说一说剩下的一些模块。

1. 机箱存储占用比率

机箱存储占用比其实很简单,就是在机箱上新加一个组即可,然后根据比率值来设置颜色,这个颜色我们去HSL(0.4,0.8,0.5) ~ HSL(0,0.8,0.5)就是从绿色到红色。我们就不多废话了。

2. 监控摄像视角

监控摄像相机我在强的四个角都放了一个,这里面我们引入了OBJ模型,模型是不带贴图的,因此需要自己慢慢设置,幸好这个模型不是很难,只有5个Mesh。如下图

这个模型由于是斜的,所以图上的和它对角的能够很好的展示,另外两个交的角度就很奇怪了,不用担心,这里我们使用一个镜像的四维矩阵解决,对模型使用这个矩阵即可得到镜像的模型。

var m = new THREE.Matrix4();
var vec=new THREE.Vector3(0,0,1);
m.set( 1-2*vec.x*vec.x, -2*vec.x*vec.y, -2*vec.x*vec.z, 0,
-2*vec.x*vec.y, 1-2*vec.y*vec.y, -2*vec.y*vec.z, 0,
-2*vec.x*vec.z, -2*vec.y*vec.z, 1-2*vec.z*vec.z, 0,
0, 0, 0, 1 );
object.applyMatrix4(m);

在网上下载的模型如果不带贴图,那么它默认应该是蓝色的材质,现在我们给他简单的设计一下颜色(在网格少的情况下)

object.children[0].material = new THREE.MeshPhongMaterial({color: 0x0D0D0D});
object.children[1].material = new THREE.MeshPhongMaterial({color: 0x717679});
object.children[2].material = new THREE.MeshPhongMaterial({color: 0x424242});
object.children[3].material = new THREE.MeshPhongMaterial({color: 0x626262});
object.children[4].material = new THREE.MeshPhongMaterial({color: 0x1B1B1B});

在监控的时候,我们不让控制器生效,这里控制器有一个属性controls.enabled = false即可。
好了监控就搞完了。

3. 红外防控报警

红外射线报警主要是对线的应用,封装一下其实就很简单了,怎么可能让它这么简单呢?我们在加一点点细节。

在封装的方法中如何让红外发射器沿着线的方向放置呢?

var monitorArr = [
[[44, 3, 27.5], [-44, 3, 27.5]], [[44, 6, 27.5], [-44, 6, 27.5]], [[44, 9, 27.5], [-44, 9, 27.5]], [[44, 12, 27.5], [-44, 12, 27.5]], [[44, 15, 27.5], [-44, 15, 27.5]], [[44, 18, 27.5], [-44, 18, 27.5]],
[[44, 3, -27.5], [-44, 3, -27.5]], [[44, 6, -27.5], [-44, 6, -27.5]], [[44, 9, -27.5], [-44, 9, -27.5]], [[44, 12, -27.5], [-44, 12, -27.5]], [[44, 15, -27.5], [-44, 15, -27.5]], [[44, 18, -27.5], [-44, 18, -27.5]],
[[42.5, 3, 29], [42.5, 3, -29]], [[42.5, 6, 29], [42.5, 6, -29]], [[42.5, 9, 29], [42.5, 9, -29]], [[42.5, 12, 29], [42.5, 12, -29]], [[42.5, 15, 29], [42.5, 15, -29]], [[42.5, 18, 29], [42.5, 18, -29]],
[[-42.5, 3, 29], [-42.5, 3, -29]], [[-42.5, 6, 29], [-42.5, 6, -29]], [[-42.5, 9, 29], [-42.5, 9, -29]], [[-42.5, 12, 29], [-42.5, 12, -29]], [[-42.5, 15, 29], [-42.5, 15, -29]], [[-42.5, 18, 29], [-42.5, 18, -29]]
]; createLine(arr) {
arr.forEach(d => {
let v0 = new THREE.Vector3(...d[0]);
let v1 = new THREE.Vector3(...d[1]);
let vs = v1.clone().sub(v0).normalize();
let ve = v0.clone().sub(v1).normalize();
let standV = new THREE.Vector3(0,1,0); let quaternion1 = new THREE.Quaternion().setFromUnitVectors(standV, vs);
let quaternion2 = new THREE.Quaternion().setFromUnitVectors(standV, ve);
let cylineMesh1 = cylineMesh.clone();
let cylineMesh2 = cylineMesh.clone();
cylineMesh1.position.set(...d[0]);
cylineMesh2.position.set(...d[1]);
cylineMesh1.applyQuaternion(quaternion1);
cylineMesh2.applyQuaternion(quaternion2); let lineGeom = new THREE.Geometry();
lineGeom.vertices.push(new THREE.Vector3(...d[0]), new THREE.Vector3(...d[1]));
let line = new THREE.Line( lineGeom, lineMate );
})
}

数据是一个数组,每两个点坐标放在一个数组作为一个线的两个端点,代码中v0,v1既为两个Vectro3,vs是v0到v1的单位向量,ve相反,standV是沿y轴的单位向量。这里我们设置一个四元数quaternion1,它表示的旋转既是从standV到vs(或者ve)的旋转,我们将这个选转应用到新建的发射器上,将v0(或者v1)应用到它的position属性上即可。

4. 弱电线的铺设。

弱电线的铺设我仍然选用了线,这里我用了三种颜色的线,先看一下细节

还是比较到位的,这里主要靠数组的创建,也就不多说了。

5. 风向

如果是简单来做,我们可以使用PlaneGeometry来做,加一些平移旋转,透明度,双面材质,纹理重复等等,但是这里为了让风有一点感觉,我们考虑使用着色器材质。不过这里我发现,在使用着色器材质后,纹理的repeat将不再起作用,但是已经使用了着色器材质,那么uv的事情都不算事情,

var windMate = new THREE.ShaderMaterial({
uniforms: { texture: { value: windT } },
transparent: true,
side: THREE.DoubleSide,
vertexShader: `
varying vec2 vUv;
void main() {
vUv = vec2(uv.x, uv.y * 3.0);
vec3 newPosition = vec3(position.x, position.y, pow((position.y) / 5.0, 2.0) / 4.0);
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}
`,
fragmentShader: `
varying vec2 vUv;
uniform sampler2D texture;
void main() {
gl_FragColor = texture2D( texture, vUv );
}
`
});

这里我们使用幂函数既position的z值pow((position.y) / 5.0, 2.0) / 4.0。当然了只要觉得好看就可以。
这个机房的就告一段落,后面还有更好的内容等待着大家的关注。

转载请注明地址:郭先生的博客

three.js 制作机房(下)的更多相关文章

  1. three.js 制作机房(上)

    three.js使用的人太少了,一个博文就几百个人看,之前发js基础哪怕是d3都会有几千的阅读量,看看以后考虑说一说d3了,哈哈.吐槽完毕回归正题.前几天郭先生看到网上有人开发了3D机房,正愁博客没什 ...

  2. 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  3. 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

  4. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  5. 基于node.js制作爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  6. JS制作图片切换

    <!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...

  7. 使用Vue.js制作仿Metronic高级表格(一)静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

  8. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

随机推荐

  1. Oracle DataGuard主库丢失归档日志后备库的RMAN增量恢复一例

    第一部分  问题描述和环境状态确认 ----1. 问题场景 Oracle DataGuard主库丢失archivelog,如何不重建备库完成同步? 在Oracle DataGuard主从同步过程中可能 ...

  2. Python 简明教程 --- 23,Python 异常处理

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 要么做第一个,要么做最好的一个. 目录 我们在编写程序时,总会不自觉的出现一些错误,比如逻辑错误,语 ...

  3. OneinStack - 自动编译环境安装脚本

    https://oneinstack.com/

  4. twitch游戏直播(【国外】平台)如何绑定二次验证码_虚拟MFA?

    一般点账户名——设置——安全设置中开通虚拟MFA两步验证 具体步骤见链接 twitch游戏直播([国外]平台)如何绑定二次验证码_虚拟MFA? 二次验证码小程序于谷歌身份验证器APP的优势(更多见官网 ...

  5. JS常用知识点(一)

    1.js数据类型 基本类型:String.Number.boolean.null.undefined.Symbol 引用类型:Object null和undefined的区别:undefined表示定 ...

  6. 附002.Nginx全系列大总结

    Nginx全系列总结如下,后期不定期更新. 欢迎基于学习.交流目的的转载和分享,禁止任何商业盗用,同时希望能带上原文出处,尊重ITer的成果,也是尊重知识. 若发现任何错误或纰漏,留言反馈或右侧添加本 ...

  7. JVM系列之:String.intern和stringTable

    目录 简介 intern简介 intern和字符串字面量常量 分析intern返回的String对象 分析实际的问题 G1中的去重功能 总结 简介 StringTable是什么?它和String.in ...

  8. JSONObject遍历

    导入JSONObject和JSONArray所需要的jar包 JSONObject所必需的6个jar包: commons-beanutils-1.7.0.jar commons-collections ...

  9. MacOS安装npm

    原文链接:https://www.cnblogs.com/zmdComeOn/p/11543441.html 第一步:检查brew -v是否安装了homebrew这个MacOS 缺失的软件包的管理器. ...

  10. 如何在Linux下的C++文件使用GDB调试

    首先在Linux下写好一个.Cpp的文件. #include<stdio.h> #include<stdlib.h> using namespace std; void sho ...