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

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. wordpress学习笔记

    版本:4.9.8 我用wordpress的初衷是借用它的后台系统,前端用自己的网页显示存在wordpress数据库里的文章. wordpress本质上是个框架,技术栈:web-php-mysql. 初 ...

  2. js获得url传过来的参数

     function  getParam(url) {                  var arr = url.split('?');   //取?以后                 var a ...

  3. 浅析protobuf应用

    Protocal Buffers(简称protobuf)是谷歌的一项技术,用于结构化的数据序列化.反序列化,常用于RPC 系统(Remote Procedure Call Protocol Syste ...

  4. LFM oversea投资笔记、思摩尔、移卡、建业新生活、鑫苑物业

    LFM oversea 1.公司简介 2.业务展望 3. 投资策略 LFM oversea介绍 LFM oversea是在开曼成立的投资基金, 专注于中国优质企业在香港和美国IPO过程中的 基石.锚定 ...

  5. Docker引言,由来,思想

    引言 我本地运行没问题啊? 环境不一致? 哪个哥们又写死循环了?,怎么这么卡? 在多用户操作系统下,会相互影响 淘宝在双11的时候,用户量暴增 运维成果过高的问题 学习一门技术,学习安装成本高 关于安 ...

  6. VulnHub靶场学习_HA: Pandavas

    HA: Pandavas Vulnhub靶场 下载地址:https://www.vulnhub.com/entry/ha-pandavas,487/ 背景: Pandavas are the warr ...

  7. activiti7 获取流程定义的xml

    RepositoryService repositoryService = ProcessEngines.getDefaultProcessEngine().getRepositoryService( ...

  8. luogu P2304 [NOI2015]小园丁与老司机 dp 上下界网络流

    LINK:小园丁与老司机 苦心人 天不负 卧薪尝胆 三千越甲可吞吴 AC的刹那 真的是泪目啊 很久以前就写了 当时记得特别清楚 写到肚子疼.. 调到胳膊疼.. ex到根不不想看的程度. 当时wa了 一 ...

  9. C/C++编程笔记:C语言打造中国象棋游戏,项目源代码分享!

    中国象棋是起源于中国的一种棋,属于二人对抗性游戏的一种,在中国有着悠久的历史.由于用具简单,趣味性强,成为流行极为广泛的棋艺活动. 它是中国棋文化,也是中华民族的文化瑰宝,它源远流长,趣味浓厚,基本规 ...

  10. Maven知识记录(一)初识Maven私服

    Maven知识记录(一)初识Maven私服 什么是maven私服 私服即私有的仓库.maven把存放文件的地方叫做仓库,我们可以理解成我门家中的储物间.而maven把存放文件的具体位置叫做坐标.我们项 ...