three.js 製作機房（下）

郭先生的部落格發表於2020-08-12
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。當然了只要覺得好看就可以。
這個機房的就告一段落，後面還有更好的內容等待著大家的關注。

轉載請註明地址：郭先生的部落格

相關文章