threejs 添加几何模型

添加cube,若不添加纹理则将{map:texture }改为{color:0xffff00}

function addTexCube(mesh){
  let texture = new THREE.TextureLoader().load( mesh.url );
  let geo=new THREE.CubeGeometry(mesh.data.width,mesh.data.height, mesh.data.long);
  let mat=new THREE.MeshLambertMaterial({map:texture });
  let cube= new THREE.Mesh(geo,mat);
  cube.position.x=mesh.position.x;
  cube.position.y=mesh.position.y;
  cube.position.z=mesh.position.z;
  cube.name=mesh.name;
  scene.add(cube);
}

添加圆柱

/**
 * @description:  添加圆柱
 * @param {*} mesh={name:name,data:{topR:5,bottomR:10,height:10},position:{x:0,y:0,z:0},color:0xffff00}
 * @return {*}
 */
function addCylinder(mesh){
  //顶圆半径、底圆半径、圆柱体高度 圆滑度；
  let geo=new THREE.CylinderGeometry(mesh.data.topR, mesh.data.bottomR ,mesh.data.height ,30 ,30);
  let mat=new THREE.MeshLambertMaterial({color: mesh.color});
  let cylinder=new THREE.Mesh(geo,mat);
  cylinder.position.x=mesh.position.x;
  cylinder.position.y=mesh.position.y;
  cylinder.position.z=mesh.position.z;
  cylinder.name=mesh.name;
  scene.add(cylinder);
}

添加球体

function addTexSphere(mesh){
  let texture = new THREE.TextureLoader().load( mesh.url );
  let geo=new THREE.SphereGeometry(mesh.data.R ,30 ,30);
  let mat=new THREE.MeshLambertMaterial({map:texture});
  let cylinder=new THREE.Mesh(geo,mat);
  cylinder.position.x=mesh.position.x;
  cylinder.position.y=mesh.position.y;
  cylinder.position.z=mesh.position.z;
  cylinder.name=mesh.name;
  scene.add(cylinder);
}

根据点绘制几何，以立方体为例，三角形逆时针绘制

function addElement(){
  let geometry = new THREE.BufferGeometry();
  let vertices= new Float32Array([
    //前面 012 023
    10, 10, 10,
    -10, 10, 10,
    -10, -10, 10,
    10, 10, 10,
    -10, -10, 10,
    10, -10, 10,
    //右面 034 045
    10, 10, 10,
    10, -10, 10,
    10, -10, -10,
    10, 10, 10,
    10, -10, -10,
    10, 10, -10,
    //左面 167 172
    -10, 10, 10,
    -10, 10, -10,
    -10, -10, -10,
    -10, 10, 10,
    -10, -10, -10,
    -10, -10, 10,
    //后面 654 647
    -10, 10, -10,
    10, 10, -10,
    10, -10, -10,
    -10, 10, -10,
    10, -10, -10,
    -10, -10, -10,
    //顶面 561 510
    10, 10, -10,
    -10, 10, -10,
    -10, 10, 10,
    10, 10, -10,
    -10, 10, 10,
    10, 10, 10,
    //底面 327 374
    10, -10, 10,
    -10, -10, 10,
    -10, -10, -10,
    10, -10, 10,
    -10, -10, -10,
    10, -10, -10
  ])
 
  
  // 创建属性缓冲区对象
  let attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组
  // 设置几何体attributes属性的位置position属性
  geometry.attributes.position = attribue;
  //计算法向量
  let normalArr=[];
  for(let i=0;i<vertices.length;i+=3){
    let normal=new THREE.Vector3(vertices[i],vertices[i+1],vertices[i+2]).normalize();
    //console.log(normal)
    normalArr.push(normal.x);
    normalArr.push(normal.y);
    normalArr.push(normal.z);
  }
   //设置法向量
   var normals = new Float32Array(normalArr)
   // 设置几何体attributes属性的位置normal属性
   geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据
   
  
  // 材质
  let material = new THREE.MeshLambertMaterial({
    color: 0xffff00, 
    side: THREE.DoubleSide 
  }); 
  let mesh = new THREE.Mesh(geometry, material); 
  scene.add(mesh);
  //console.log('结束',new Date().getMilliseconds())
}

可用于不规则几何体绘制，效果如图