Threejs构建mesh

点

   /**
     * 创建网格模型
     */
    var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

    //类型数组创建顶点位置position数据
    var vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      50, 0, 0, //顶点2坐标
      0, 100, 0, //顶点3坐标

      0, 0, 10, //顶点4坐标
      0, 0, 100, //顶点5坐标
      50, 0, 10, //顶点6坐标
    ]);
    // 创建属性缓冲区对象
    var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
    // 设置几何体attributes属性的位置position属性
    geometry.attributes.position = attribue;


    //类型数组创建顶点颜色color数据
    var colors = new Float32Array([
      1, 0, 0, //顶点1颜色
      0, 1, 0, //顶点2颜色
      0, 0, 1, //顶点3颜色

      1, 1, 0, //顶点4颜色
      0, 1, 1, //顶点5颜色
      1, 0, 1, //顶点6颜色
    ]);
    // 设置几何体attributes属性的颜色color属性
    geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB


    //材质对象
    var material = new THREE.PointsMaterial({
      // 使用顶点颜色数据渲染模型，不需要再定义color属性
      // color: 0xff0000,
      vertexColors: THREE.VertexColors, //以顶点颜色为准
      size: 10.0 //点对象像素尺寸
    });
    // 点渲染模式  点模型对象Points
    var points = new THREE.Points(geometry, material); //点模型对象
    scene.add(points); //点对象添加到场景中

---

线 (使用向量）

        var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry

        var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
        var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
        var p3 = new THREE.Vector3(80, 70, 0); //顶点3坐标
        //顶点坐标添加到geometry对象
        geometry.vertices.push(p1, p2, p3);

        //材质对象
        var material = new THREE.LineBasicMaterial({
            color: 0xffff00
        });
        //线条模型对象
        var line = new THREE.Line(geometry, material);
        scene.add(line); //线条对象添加到场景中

---

线（使用数组）

 /**
         * 创建网格模型
         */
        var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

        //类型数组创建顶点位置position数据
        var vertices = new Float32Array([
            0, 0, 0, //顶点1坐标
            100, 100, 100, //顶点2坐标
        ]);
        // 创建属性缓冲区对象
        var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
        // 设置几何体attributes属性的位置position属性
        geometry.attributes.position = attribue;


        //类型数组创建顶点颜色color数据
        var colors = new Float32Array([
            1, 0, 0, //顶点1颜色
            0, 0, 1, //顶点2颜色
        ]);
        // 设置几何体attributes属性的颜色color属性
        geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB


        //材质对象
        var material = new THREE.LineBasicMaterial({
            // 使用顶点颜色数据渲染模型，不需要再定义color属性
            // color: 0xff0000,
            vertexColors: THREE.VertexColors, //以顶点颜色为准
        });
        // 线条渲染模式  线模型对象Line
        var line = new THREE.Line(geometry, material); //点模型对象
        scene.add(line); //点对象添加到场景中

---

面(使用向量)

 var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry

    var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
    var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标
    var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标
    var p4 = new THREE.Vector3(0, 0, 100); //顶点4坐标
    //顶点坐标添加到geometry对象
    geometry.vertices.push(p1, p2, p3,p4);

    // Face3构造函数创建一个三角面
    var face1 = new THREE.Face3(0, 1, 2);
    //三角面每个顶点的法向量
    var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1顶点1的法向量
    var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2顶点2的法向量
    var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3顶点3的法向量
    // 设置三角面Face3三个顶点的法向量
    face1.vertexNormals.push(n1,n2,n3);

    // 三角面2
    var face2 = new THREE.Face3(0, 2, 3);
    // 设置三角面法向量
    face2.normal=new THREE.Vector3(0, -1, 0);

    //三角面face1、face2添加到几何体中
    geometry.faces.push(face1,face2);

    //材质对象
    var material = new THREE.MeshLambertMaterial({
      color: 0xffff00,
      side:THREE.DoubleSide//两面可见
    });
    //网格模型对象
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh); //网格模型对象添加到场景中

---

面(使用数组)

  /**
     * 创建网格模型
     */
    var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

    //类型数组创建顶点位置position数据
    var vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      50, 0, 0, //顶点2坐标
      0, 100, 0, //顶点3坐标

      0, 0, 10, //顶点4坐标
      0, 0, 100, //顶点5坐标
      50, 0, 10, //顶点6坐标
    ]);
    // 创建属性缓冲区对象
    var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
    // 设置几何体attributes属性的位置position属性
    geometry.attributes.position = attribue;


    //类型数组创建顶点颜色color数据
    var colors = new Float32Array([
      1, 0, 0, //顶点1颜色
      0, 1, 0, //顶点2颜色
      0, 0, 1, //顶点3颜色

      1, 1, 0, //顶点4颜色
      0, 1, 1, //顶点5颜色
      1, 0, 1, //顶点6颜色
    ]);
    // 设置几何体attributes属性的颜色color属性
    geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB


    //材质对象
    var material = new THREE.MeshBasicMaterial({
      // 使用顶点颜色数据渲染模型，不需要再定义color属性
      // color: 0xff0000,
      // side: THREE.DoubleSide //两面可见
      vertexColors: THREE.VertexColors, //以顶点颜色为准
    });
    // 网格模型  三角面渲染模式
    var mesh = new THREE.Mesh(geometry, material); //网格模型
    scene.add(mesh); //点对象添加到场景中

---

几何体

//var geometry = new THREE.SphereGeometry(60, 40, 40);
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
//基础网格材质对象   不受光照影响  没有棱角感
var material = new THREE.MeshBasicMaterial({
      color: 0x0000ff,
      wireframe: true, //线条模式渲染
  });
// 与光照计算  漫反射   产生棱角感
// var material = new THREE.MeshLambertMaterial({
//   color: 0x00ff00,
// });

// 与光照计算  高光效果（镜面反射）    产生棱角感
// var material = new THREE.MeshPhongMaterial({
//   color: 0xff0000,
//   specular:0x444444,
//   shininess:30,
// });
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
mesh.castShadow = true; // 设置产生投影的网格模型
// 设置接收阴影的投影面
planeMesh.receiveShadow = true;
scene.add(mesh); //网格模型添加到场景中

 

 

 

FR：徐海涛（hunk xu)
QQ技术交流群：386476712