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

Posted webhmy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);   

以上是关于Three.js之根据顶点信息绘制立方体并给面设置颜色的主要内容,如果未能解决你的问题,请参考以下文章

cesium 和 Three.js有啥区别,以及二者与WebGL 的关系

Three.js教程:顶点索引复用顶点数据

three.js - 使用 MeshLambertMaterial 和点光源绘制自定义网格

three.js(13)-三角形面

three.js入门——画一个3D正方体

threejs学习day3:几何形状