threejs自定义顶点（vertex）创建几何体

threejs 提供了很多生成几何体的方法，如下:

 调用上面的方法可以很方便创建各种几何体,比如创建一个平面和立方体盒子,设置长宽高或者长宽就可以创建，代码和效果如下:

const material = new THREE.MeshBasicMaterial({
    color: "orange",
});
// 立方体
const cubegeometry = new THREE.BoxGeometry(10, 10, 10);
const cube = new THREE.Mesh(cubegeometry, material); 
scene.add(cube);
// 平面
const planegeometry = new THREE.PlaneGeometry(100, 100);
const plane = new THREE.Mesh(planegeometry, material); 
plane.rotation.x = -Math.PI / 2;
plane.position.y = -100;
scene.add(plane);

 本文通过自定义顶点位置创建几何体;一方面也能对三维模型的构成又较深入理解，其实通过顶点坐标方式创建几何体，已经跟原生webgl创建大同小异了，只是threejs封装的更简单；废话不多说，仍然以创建平面和立方体为例

1 创建平面

自定义定点创建几何体，简单总结就五步:

1.1 创建一个geometry对象

    var geometry = new THREE.Geometry();

1.2 指定geometry的顶点坐标

创建如下平面：

// ---------------------------------------------------------------------
// 创建一个正方形平面
// ---------------------------------------------------------------------
//    v0------v3
//    /  \    /
//   /    \  /
//  v1------v2

一个四边形平面有四个顶点： 

    //创建平面的顶点
    var vertices = [
        new THREE.Vector3(0,0,0),      // v0
        new THREE.Vector3(0,0,100),    // v1
        new THREE.Vector3(100,0,100),  // v2
        new THREE.Vector3(100, 0,0),   // v3
    ];
    geometry.vertices = vertices;

1.3 指定geometry的三角面

一个四边形有两个三角面构成：

    //创建平面需要的三角面
    var faces=[
        new THREE.Face3(0,1,2),
        new THREE.Face3(0,2,3)
    ];
    geometry.faces = faces;

1.4 指定法向量

 //生成法向量
 geometry.computeFaceNormals();

1.5 创建材质和mesh对象

    var material = new THREE.MeshLambertMaterial({color: 'orange'});
    var plane = new THREE.Mesh(geometry, material);
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;
    scene.add(plane);

 

这样一个自定义顶点的平面就完成了，纹理贴图后面再记录 ,设置wireframe为true可以看下结构；

   var material = new THREE.MeshLambertMaterial({color: 'orange',wireframe:true});

 2  创建立方体

立方体创建跟上面步骤一样；立方体有8个顶点，12个三角面；如下

// ---------------------------------------------------------------------
// 创建一个立方体
// ---------------------------------------------------------------------
//    v6----- v5
//   /|      /|
//  v1------v0|
//  | |     | |
//  | |v7---|-|v4
//  |/      |/
//  v2------v3

直接贴上代码:

function createCube(){
      //创建立方体的顶点
  var vertices = [
    new THREE.Vector3(10, 10, 10), //v0
    new THREE.Vector3(-10, 10, 10), //v1
    new THREE.Vector3(-10, -10, 10), //v2
    new THREE.Vector3(10, -10, 10), //v3
    new THREE.Vector3(10, -10, -10), //v4
    new THREE.Vector3(10, 10, -10), //v5
    new THREE.Vector3(-10, 10, -10), //v6
    new THREE.Vector3(-10, -10, -10) //v7
];
    var cubeGeometry = new THREE.Geometry();
    cubeGeometry.vertices = vertices;
    //创建立方的面
    var faces=[
        new THREE.Face3(0,1,2),
        new THREE.Face3(0,2,3),
        new THREE.Face3(0,3,4),
        new THREE.Face3(0,4,5),
        new THREE.Face3(1,6,7),
        new THREE.Face3(1,7,2),
        new THREE.Face3(6,5,4),
        new THREE.Face3(6,4,7),
        new THREE.Face3(5,6,1),
        new THREE.Face3(5,1,0),
        new THREE.Face3(3,2,7),
        new THREE.Face3(3,7,4)
    ];
    cubeGeometry.faces = faces;
    //生成法向量
    cubeGeometry.computeFaceNormals();
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 'gray'});
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.position.x = 0;
    cube.position.y = 0;
    cube.position.z = 0;
    scene.add(cube);
}

 为了更加直观显示立方体的坐标位置，在每个顶点处添加了文字几何体，代码和效果如下：

// 创建文字
var vertices = [
    new THREE.Vector3(10, 10, 10), //v0
    new THREE.Vector3(-10, 10, 10), //v1
    new THREE.Vector3(-10, -10, 10), //v2
    new THREE.Vector3(10, -10, 10), //v3
    new THREE.Vector3(10, -10, -10), //v4
    new THREE.Vector3(10, 10, -10), //v5
    new THREE.Vector3(-10, 10, -10), //v6
    new THREE.Vector3(-10, -10, -10) //v7
];
vertices.forEach((vertice,index)=>{
    addTextGeometry(`v${index}(${vertice.x},${vertice.y},${vertice.z})`,{x:vertice.x,y:vertice.y,z:vertice.z})
})

 // 添加文字
function addTextGeometry(text,pos){
    var loader = new THREE.FontLoader(); 
    loader.load("/statics/fonts/chinese.json", function (res) { 
        var geometry = new THREE.TextGeometry(`${text}`, {
            font: res,          // 字体格式
            size: 1,           // 字体大小
            height: 0.01,          // 字体深度
            curveSegments: 11,  // 曲线控制点数
            bevelEnabled: true, // 斜角
            bevelThickness: 0.1,  // 斜角的深度
            bevelSize: 0.01,       // 斜角的大小
            bevelSegments: 1    // 斜角段数
        });
        var mat = new THREE.MeshPhongMaterial({
            color: "white",
            opacity: 0.8,
            shininess: 0.01,
        });
        var mesh = new THREE.Mesh(geometry, mat);
        // mesh.rotation.y=-Math.PI/2
        mesh.position.set(pos.x,pos.y,pos.z);
        scene.add(mesh);
    }); 
}