threejs学习之定义uv坐标

在使用物体纹理贴图时，可以使用uv坐标截取贴图，u相当于x轴，v相当于y轴，定义4个坐标点截取贴图

   // 加载物体纹理贴图
    const texture = new THREE.TextureLoader().load('./img/5.png');
    // 创建立方体
    const geometry = new THREE.BoxGeometry(3, 3, 3);
    // 定义uv取值范围 顺序 左上 右上 左下 右下
    const uv = new Float32Array([
      // 右面
      0, 1,
      0.8, 1,
      0, 0.3,
      0.8, 0.3,
      // 左面
      0, 1,
      0.8, 1,
      0, 0.3,
      0.8, 0.3,
      // 上面
      0, 1,
      0.8, 1,
      0, 0.3,
      0.8, 0.3,
      // 下面
      0, 1,
      0.8, 1,
      0, 0.3,
      0.8, 0.3,
      // 后面
      0, 1,
      0.8, 1,
      0, 0.3,
      0.8, 0.3,
      // 前面
      0, 1,
      0.8, 1,
      0, 0.3,
      0.8, 0.3,
    ])
    // 使用uv坐标
    geometry.attributes.uv = new THREE.BufferAttribute(uv, 2)
    const material = new THREE.MeshBasicMaterial({
      map: texture
    });
    // 创建网格
    const cube = new THREE.Mesh(geometry, material);

效果

原图片