Three.js之根據頂點信息繪製立方體並給面設置顏色

使用Three.js繪製立方體是最基本的功能，我們可以使用new THREE.BoxGeometry(width, height, depth)根據長、寬、高等信息直接繪製，也可以根據點的信息進行繪製。而根據點的信息進行繪製這個功能，由於Three.js版本的升級，以及給其中的面設置不同的顏色，我發現網上
相關的資料都很老舊，給的方法都已經是被廢棄的了，經過一些研究實現了相關功能，本文記錄之，先看下實現的效果圖：

如上圖所示，圖中繪製了一個立方體，前面的面變成了紅色。主要核心實現代碼如下：

// 1 根據points頂點新建box
    let [p0, p1, p2, p3, p4, p5, p6, p7] = points;
    let p = [
      p0, p1, p3,
      p1, p2, p3, // 前面

      p4, p5, p7,
      p5, p6, p7, // 後面

      p0, p1, p4,
      p1, p5, p4, // 上面

      p3, p2, p7,
      p2, p6, p7, // 下面

      p0, p3, p4,
      p3, p7, p4, // 左面

      p1, p2, p5,
      p2, p6, p5 // 右面
    ];

    let pp = []
    p.forEach(unit => {
      pp.push(unit.x)
      pp.push(unit.y)
      pp.push(unit.z)
    })

    // 2 根據點信息 構建物體
    const geometry = new THREE.BufferGeometry();
    const vertices = new Float32Array(pp);
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

    // 3 設置不同的材料，給不同的面顯示
    const redFace = this.getMeshBasicMaterialOption(true);
    const normalFace = this.getMeshBasicMaterialOption();    
    const materials = [redFace, normalFace, normalFace, normalFace, normalFace, normalFace] // 可以看到這裏給第一個面使用了redFace紅色的面

    // 設置面
    const geoMesh = new THREE.Mesh(geometry, materials); 
    if (geometry.groups.length === 0) {
      geometry.addGroup(0, 6, 0) //前
      geometry.addGroup(6, 6, 1)
      geometry.addGroup(12, 6, 2)
      geometry.addGroup(18, 6, 3)
      geometry.addGroup(24, 6, 4)
      geometry.addGroup(30, 6, 5)
    }

    // 獲取物體盒模型的寬高
    geometry.computeBoundingBox();
    let vv = new THREE.Vector3()
    let box = geometry.boundingBox.getSize(vv);

    // 獲取物體的中心點位置
    let cc = new THREE.Vector3();
    let center = geometry.boundingBox.getCenter(cc);   

    // 加個wrapper 用於旋轉啥的
    let wrapper = new THREE.Object3D();    
    wrapper.position.set(center.x, center.y, center.z);    
    geoMesh.position.set(-center.x, -center.y, -center.z);

    wrapper.add(geoMesh); 
    this.scene.add(wrapper);