three.js 制作机房（下）
这一篇书接上文，说一说剩下的一些模块。
1. 机箱存储占用比率
机箱存储占用比其实很简单，就是在机箱上新加一个组即可，然后根据比率值来设置颜色，这个颜色我们去HSL(0.4,0.8,0.5) ~ HSL(0,0.8,0.5)就是从绿色到红色。我们就不多废话了。
2. 监控摄像视角
监控摄像相机我在强的四个角都放了一个，这里面我们引入了OBJ模型，模型是不带贴图的，因此需要自己慢慢设置，幸好这个模型不是很难，只有5个Mesh。如下图
捕获99999999.PNG
这个模型由于是斜的，所以图上的和它对角的能够很好的展示，另外两个交的角度就很奇怪了，不用担心，这里我们使用一个镜像的四维矩阵解决，对模型使用这个矩阵即可得到镜像的模型。
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. 红外防控报警
红外射线报警主要是对线的应用，封装一下其实就很简单了，怎么可能让它这么简单呢？我们在加一点点细节。
捕获12121212.PNG
在封装的方法中如何让红外发射器沿着线的方向放置呢？
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. 弱电线的铺设。
弱电线的铺设我仍然选用了线，这里我用了三种颜色的线，先看一下细节
捕获1131313.PNG
还是比较到位的，这里主要靠数组的创建，也就不多说了。
5. 风向
如果是简单来做，我们可以使用PlaneGeometry来做，加一些平移旋转，透明度，双面材质，纹理重复等等，但是这里为了让风有一点感觉，我们考虑使用着色器材质。不过这里我发现，在使用着色器材质后，纹理的repeat将不再起作用，但是已经使用了着色器材质，那么uv的事情都不算事情，
捕获15151515.PNG
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。当然了只要觉得好看就可以。
这个机房的就告一段落，后面还有更好的内容等待着大家的关注。
转载请注明地址：郭先生的博客