Three.js之根据顶点信息绘制立方体并给面设置颜色

Posted 2022-01-19 webhmy

使用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);