three.js 制作机房（下）

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

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。当然了只要觉得好看就可以。
这个机房的就告一段落，后面还有更好的内容等待着大家的关注。

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

巴特西