threejs 笔记 06 —— 点

按网格模型顶点创建点

提取顶点信息

创建一个网格几何体并访问顶点信息

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个球体几何对象
  console.log(geometry.vertices)
  // 创建一个点材质对象
  // PointsMaterial // 点材质
  var material = new THREE.MeshLambertMaterial({
    color: 0x0000ff, //颜色
  });
  //网格模型对象  参数：几何体  点材质
  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh); //网格模型添加到场景中

得到了一组顶点信息，将来，点模型也会将渲染到这8个顶点上

通过顶点的位置渲染点材质

 var scene = new THREE.Scene();
  /**
   * 创建网格模型
   */
  var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个球体几何对象
  console.log(geometry.vertices)
  // 创建一个点材质对象
  // PointsMaterial // 点材质
  var material = new THREE.PointsMaterial({
    color: 0xffff00, //颜色
    size: 10
  });
  //点模型对象  参数：几何体  点材质
  var point = new THREE.Points(geometry, material);
  scene.add(point); //网格模型添加到场景中

通过设置顶点信息创建点

上文中，顶点信息都是一个vector3对象，我们可以手动设置顶点信息，并渲染为点模型

设置顶点

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

  //类型数组创建顶点位置position数据
  var vertices = new Float32Array([
    0, 0, 0, //顶点1坐标
    50, 0, 0, //顶点2坐标
    50, 50, 0, //顶点3坐标
    0, 50, 0, //顶点4坐标
  ]);
  // 创建属性缓冲区对象
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(vertices, 3)
  );

  var material = new THREE.PointsMaterial({
    // 使用顶点颜色数据渲染模型，不需要再定义color属性
    color: 0xff0000,
    size: 15, //点对象像素尺寸
  });

  var points = new THREE.Points(geometry, material); //点模型对象
  scene.add(points); //点对象添加到场景中

设置顶点颜色

能够对每一个顶点定位，也可以改变每一个顶点的颜色

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

var material = new THREE.PointsMaterial({
    // 使用顶点颜色数据渲染模型，不需要再定义color属性
    vertexColors: THREE.VertexColors, //以顶点颜色为准
    size: 15, //点对象像素尺寸
});
      

通过范围批量创建点

var vertices = [];

  var colors = [];
  // 设置几何体attributes属性的颜色color属性

  for (var i = 0; i < 10000; i++) {
    var x = THREE.MathUtils.randFloatSpread(200);
    var y = THREE.MathUtils.randFloatSpread(200);
    var z = THREE.MathUtils.randFloatSpread(200);
    vertices.push(x, y, z);
    // 随机颜色
    let c = new THREE.Color(Math.random() * 0xffffff);
    colors.push(c.r, c.g, c.b);
  }
  console.log(colors);

  var geometry = new THREE.BufferGeometry();
  geometry.attributes.color = new THREE.BufferAttribute(
    new Float32Array(colors),
    3
  );
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(vertices, 3)
  );

  var material = new THREE.PointsMaterial({
    size: 5,
    vertexColors: THREE.VertexColors, //以顶点颜色为准
  });

  var points = new THREE.Points(geometry, material);

  scene.add(points);