threejs的坐标渲染和着色

点击查看代码

function createBasic() {
  // 目标：了解顶点坐标绘制正方形
  // 1. 准备 BufferGemotry 缓冲几何图形
  // 2. 准备 32 位浮点数的数组，定义矩形的顶点位置
  // 3. 准备 BufferAttribute 属性缓冲对象，保存几何图形的属性值
  // 4. 把属性设置给几何图形对象
  // 5. 准备材质创建物体并加入场景中

  // 1. 准备 BufferGemotry 缓冲几何图形（灵活表示图形）
  const geometry = new THREE.BufferGeometry();
  // 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
  // 因为在两个三角面片里，这两个顶点都需要被用到。
  // 注意：three.js 内部需要计算坐标值
  // 顶点坐标（逆时针描述-正面渲染）
  // 2. 准备 32 位浮点数的数组，定义矩形的顶点位置
  const vertices = new Float32Array([
    0, 0, 0,
    1.0, 0, 0,
    0, 1.0, 0,

    1.0, 0, 0,
    1.0, 1.0, 0,
    0, 1.0, 0
  ]);

  // 3. 准备 BufferAttribute 属性缓冲对象，保存几何图形的属性值
  // itemSize = 3 因为每个顶点都是一个三元组
  // position 顶点坐标
  // 4. 把属性设置给几何图形对象
  geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

  // 5. 准备材质创建物体并加入场景中
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh)
}